Geeks Ocean

Frontend Development HTML Notes

Dikshant Gautam

Aug 14, 2020

Hello fellas, today in this article I would share you the HTML notes of Frontend Web Development, Working on HTML is first starting step in learning Web Development. In this article I have shared with you the some of the most common HTML Tags that we use to create web page using HTML.

So Let's Get Started -

Document (individual elements combined to form an entire HTML page)

1) Doctype: <!DOCTYPE html>

· Required as the first line of an HTML document (historical artifact).

2) Root Element: <html>

· Follows the "doctype" and wraps around all content on the entire page.

3) Head Element: <head>

· Container for things that do not appear as viewable content (e.g., keywords and descriptions that will appear in search results, CSS, character set declarations, etc.).

4) Character Set: <meta charset="UTF-8">

· Allows document to use "utf-8" character set, which includes most characters from all known human languages (nests within head element).

5) Title: <title>

· Sets the title that appears in browser tab (nests within head element).

· Also appears as the search result in Google.

6) Body: <body>

· Contains all of the content that will be shown to the viewer.

Elements (content + opening/closing tags)

1) Block Elements form a visible block on a page (e.g., paragraphs, lists, navigation menus, footers, etc.):

· Paragraph: <p>

· Divider: <hr>

· Headings: <h1> through <h6>

o NOTE: As a general rule, try to have only one <h1> tag in your HTML document, and it should be the biggest text element on the page.

· Generic Container: <div>

· Lists (each item within a type of list needs to be identified by the "<li>" tag):

o Ordered Lists (lists that are numbered): <ol>

o Unordered Lists (lists composed of bullet points: <ul>

Tables: <table>

1) Table Row: <tr>

2) Table Header (consists of one cell within a row): <th>

Should be nested within <thead> under main table (semantics).

3) Table Data (consists of one cell within a row): <td>

Should be nested within <tbody> under main table (semantics).

4) Borders can be added by entering <table border="1">, although this is discouraged, as CSS should be used for styling.

Forms (interactive controls to submit information to a web server): <form>

o Typically contain the "action" (the URL to send form data to) and "method" (the type of HTTP request, such as "GET" to receive information from the server and "POST" to add information to the serve) attributes, e.g.:

o Input (used to accept data from the user): <input>

The operation of <input> depends upon its type attribute. For a complete list of attributes, view Form Input Types. Examples:

· Text (can be used for user names): type="text"

· Password: type="password"

· Placeholder (temporary text in input fields; used with "text" and "password" attributes): placeholder="insert- text-here"

· Button: type="button" value="insert-text-here"

Simple Submit button: type="submit"

Alternatively, if placed at the end of a form, use the following to create an even simpler submit button:

<button>insert-text-here</button>

· Checkbox (square box for multiple choices): type="checkbox"

o To have the checkbox already marked upon loading, add the attribute "checked" to the input.

Radio Button (circular icon for one choice): type="radio"

o In order to make the user only able to select one choice, you must add the "name" attribute, which must be common among all choices.

o The "value" attribute is necessary for the query string to understand the meaning behind each choice; otherwise, it will simply state "name=on".

o Example:

Dropdown Menus: <select>

1) For every possible option to select, use an <option> tag.

2) In order for the query string to understand that an option has been selected from the dropdown menu, the "name" attribute must be included in the <select> tag, e.g.:

<option>White</option>

<option>Black</option>

</select>

3) If you want the query string to contain text other than "White" or "Black" in the example above, use the "value" attribute in the

<option> tag, e.g.:

Text Areas (multi-line plain-text editing control): <textarea>

1) You can specify how large the text area is by using the "rows" and "cols" attributes.

2) In order for the query string to process the data in the text area, you must use the "name" attribute.

3) Example:

o Labels (add captions for individual items in a form): <label>

§ A label can be used by placing the control element inside

the <label> element, or by using the "for" and "id" attributes:

· For example,

<label>Username<input type="text"></label>

…is identical to:

<label for="username">Username</label>

Validations ensure that users fill out forms in the correct format, e.g.:

1) The Boolean attribute "required" makes a field mandatory:

<label>Username<input type="text" required></label>

Only works if the browser (like Chrome) allows it.

2) By changing type from "text" to "email", the browser will ensure that the field contains an @ symbol.

Inline Elements are contained within block level elements and do not cause new lines to appear:

· Italics: <em>

· Bold: <strong>

· Generic Container: <span>

BUT NOTE: Empty Elements contain only a single tag:

· Image: <img src="https://www.google.com/logo.png">

NOTE: Image width can be modified like so…

…but is discouraged, as styling should be done by CSS.

· Input: <input type="text">

For a complete list of elements, view the MDN Element Reference.

TIP: In Sublime, press "Ctrl+Shift+D" to replicate an entire line of an element.

Attributes (extra info; does not appear in content; target of style info)

1) Components:

· Space between it and the element name (or prior attribute),

· Attribute name followed by an equals sign, and

· Attribute value surrounded by quotation marks.

Double or single quotes may be used, but must be done consistently. You can nest a single quote within a double quote (and vice versa), but if you want to nest the same type of quote, you must use HTML Entities (e.g., " or ').

2) Examples:

· Class: <p class="editor-note">content</p>

· Can be paired with the "anchor" element: <a>

o Hyperlink with Title:

<a href="https://www.google.com/" title="Google">content</a>

BUT NOTE: Boolean Attributes can be written without a value, but technically always have only one value (generally the same as the attribute name:

· Disabled: <input type="text" disabled="disabled">

o Creates a text box in which typing is disabled.

o May also be written as:

For a complete list of attributes, view the MDN Attribute Reference.

So, these were the some of the commonly used HTML Tags that we use in web development. All the best and cheers to you.