HTML

Terminology

Web design: The process of planning, structuring and creating a website.
Web development: The process of programming dynamic web applications.
Front end: The outwardly visible elements of a website or application.
Back end: The inner workings and functionality of a website or application.

Anatomy of an HTML Element

Element: Building blocks of web pages, an individual component of HTML.
Tag: Opening tag marks the beginning of an element & closing tag marks the end. Tags contain characters that indicate the tag's purpose content.

<tagname> content </tagname>

Container Element: An element that can contain other elements or content.
Stand Alone Element: An element that cannot contain anything else.
Attribute: Provides additional information about the HTML element. Placed inside an opening tag, before the right angle bracket.
Value: Value is the value assigned to a given attribute. Values must be contained inside quotation marks (“”).

The Doctype

The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.

XHTML 1.0 Strict

HTML
1 2	`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">`

HTML4 Transitional

HTML
1 2	`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">`

HTML5

<!doctype html>

The HTML Element

After <doctype>, the page content must be contained between tags.

HTML
<!doctype html>
<html lang="en">
    <!-- page contents -->
</html>

The HEAD Element

The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines.
UTF-8 is a character encoding capable of encoding all possible characters, or code points, defined by Unicode. The encoding is variable-length and uses 8-bit code units.

XHTML and HTML4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>

HTML5: <meta charset="utf-8">

HTML Shiv (Polyfill)

Used to make old browsers understand newer HTML5 and newer components.

HTML
<!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->

The BODY Element

The body contains the actual content of the page. Everything that is contained in the body is visible to the user.

HTML
<body>
    <!-- page contents -->
</body>

JavaScript

XHTML and older: <script src="js/scripts.js" type="text/javascript"></script>
HTML5: <script src="js/scripts.js"></script> (HTML5 spec states that type attribute is redundant and should be omitted)
The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.

Local, Remote or Inline JavaScript

Remote: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Local: <script src="js/main.js"></script>
Inline: <script> javascript-code-here </script>

Forms

Forms allow to collect data from the user:

signing up and logging in to websites
entering personal information
filtering content (using dropdowns, checkboxes)
performing a search
uploading files

Forms contain elements called controls (text inputs, checkboxes, radio buttons, submit buttons).
When users complete a form the data is usually submitted to a web server for processing.

Form Validation

Validation is a mechanism to ensure the correctness of user input.

Uses of Validation:

Make sure that all required information has been entered
Limit the information to certain types (e.g. only numbers)
Make sure that the information follows a standard (e.g. email, credit card number)
Limit the information to a certain length
Other validation required by the application or the back-end services

Front-End Validation

The application should validate all information to make sure that it is complete, free of errors and conforms to the specifications required by the back-end.
It should contain mechanisms to warn users if input is not complete or correct.
It should avoid to send "bad" data to the back-end.

Back-End Validation

It should never trust that the front-end has done validation since some clever users can bypass the front-end mechanisms easily.
Back-end services can receive data from other services, not necessarily front-end, that don't perform validation.

Built-In Validation

Not all browsers validate in the same way and some follow the specs partially. Some browsers don't have validation at all (older desktop browsers, some mobile browsers).
Apart from declaring validation intention with HTML5 developers don't have much control over what the browser actually does.
Before using build-in validation make sure that it's supported by the target browsers.

Validation with JavaScript

Gives the developer more control.
The developer can make sure it works on all target browsers.
Requires a lot of custom coding, or using a library (common practice).

General structure of HTML page

HTML
<!-- HTML Boilerplate -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- meta tag -->
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- adapt page dimensions to device -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- external style sheet here -->
        <link rel="stylesheet" href="path/style-sheet.css">

        <!-- script if necessary -->
        <script src="_.js" type="text/javascript"></script>

        <!-- script is executed only after the page finishes loading-->
        <script src="_.js" defer type="text/javascript"></script>
    </head>
    <body>

        <!-- end of body -->
        <script src="_.js" type="text/javascript"></script>
    </body>
</html>

Attributes describe additional characteristics of an HTML element.
<tagname attribute="value"> content </tagname>

Meta Tag Structure

<meta name="info-name" content="info-content">

Paragraph

Paragraphs allow to format the content in a readable fashion.

HTML
<p> paragraph-content </p>
<p> paragraph-content </p>

Headings

Heading numbers indicates hierarchy, not size.

HTML
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>

Formatted Text

With semantic value:

Emphasized text (default cursive): <em></em>
Important text (default bold): <strong></strong>

Without semantic value, used as last resort:

Italic text: <i></i>
Bold text: <b></b>

Elements

<br/>: Line break (carriage return). It's not good practice to put line breaks inside paragraphs.

<hr>: horizontal rule (line). Used to define a thematic change in the content.

Links/Anchor

Surround content to turn into links.

HTML
<!-- Link to absolute URL -->
<a href="uri/url" title="content-title" target="_self"> text/image </a>

<!-- links to relative URL -->
<a href="//example.com">Scheme-relative URL</a>
<a href="/en-US/docs/Web/HTML">Origin-relative URL</a>
<a href="./file">Directory-relative URL</a>

<!-- Link to element on the same page -->
<a href="#element-id"></a>

<!-- Link to top of page -->
<a href="#top"> Back to Top </a>

<!-- link to email -->
<a href="mailto:address@domain">address@domain</a>

<!-- link to telephone number -->
<a href="tel:+39(111)2223334">+39 111 2223334</a>

<!-- download link -->
<a href="./folder/filename" download>Download</a>

target:

_blank: opens linked document in a new window or tab
_self: opens linked document in the same frame as it was clicked (DEFAULT)
_parent: opens the linked document in the parent frame
_top: opens linked document in the full body of the window
frame-name: opens the linked document in the specified frame

Images

HTML
<img src="image-location" alt="brief-description"/>    <!-- image element -->
<!-- alt should be always be populated for accessibility and SEO purposes -->

HTML
<!-- supported by modern browsers -->
<figure>
    <img src="img-location" alt="description">
    <figcaption> caption of the figure </figcaption>
</figure>

Unordered list (bullet list)

HTML
<ul>
    <li></li>    <!-- list element -->
    <li></li>
</ul>

Ordered list (numbered list)

HTML
<ol>
    <li></li>
    <li></li>
</ol>

Description list (list of terms and descriptions)

HTML
<dl>
    <dt>term</dt>    <!-- define term/name -->
    <dd>definition</dd> <!-- describe term/name -->
    <dt>term</dt>
    <dd>definition</dd>
</dl>

Tables

HTML
<table>
    <thead>    <!-- table head row -->
        <th></th> <!-- table head, one for each column-->
        <th></th>
    </thead>
    <tbody>    <!-- table content (body) -->
        <tr> <!-- table row -->
            <td></td> <!-- table cell -->
            <td></td>
        </tr>
    </tbody>
</table>

Character Codes

Code	Character
`©`	Copyright
`<`	less than (`<`)
`>`	greater than (`>`)
`&`	ampersand (`&`)

Block Element

Used to group elements together into sections, eventually to style them differently.

HTML
<div>
    <!-- content here -->
</div>

Inline Element

Used to apply a specific style inline.

HTML
<p> non-styled content <span class="..."> styled content </span> non-styled content </p>

HTML5 new tags

HTML
<header></header>
<nav></nav>
<main></main>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

HTML Forms & Inputs

HTML
<form action="data-receiver" target="" method="http-method">
    <!-- ALL form elements go here -->
</form>

Target:

_blank: submitted result will open in a new browser tab
_self: submitted result will open in the same page (default)

Method:

get: data sent via get method is visible in the browser's address bar
post: data sent via post in not visible to the user

PROs & CONs of GET method:

Data sent by the GET method is displayed in the URL
It is possible to bookmark the page with specific query string values
Not suitable for passing sensitive information such as the username and password
The length of the URL is limited

PROs & CONs of POST method:

More secure than GET; information is never visible in the URL query string or in the server logs
Has a much larger limit on the amount of data that can be sent
Can send text data as well as binary data (uploading a file)
Not possible to bookmark the page with the query

Basic Form Elements

HTML
<form action="" method="">
    <label for="target-identifier">label-here</label>
    <input type="input-type" name="input-name" value="value-sent" id="target-identifier">
</form>

<!-- SAME AS -->

<form>
    <label>Label:
        <input type="input-type" name="input-name" value="value-sent" id="target-identifier">
    </label>
</form>

Note: The <label> tag is used to define the labels for <input> elements.

Input Attributes:

name: assigns a name to the form control (used by JavaScript and queries)
value: value to be sent to the server when the option is selected
id: identifier for CSS and linking tags
checked: initially selected or not (radiobutton, checkboxes, ...)
selected: default selection of a dropdown

Text Field

One line areas that allow the user to input text.

HTML
<input type="text" placeholder="placeholder-text" spellcheck="true" pattern="\regex\">

Note: Text inputs can display a placeholder text that will disappear as soon as some text is entered

Password Field

HTML
<input type="password">

Radio Buttons

HTML
<input type="radio" value="value">
<input type="radio" value="value" checked>

Checkboxes

HTML
<input type="checkbox">
<input type="checkbox" checked>

HTML
<select multiple>
    <option value="value">Value</option>
    <option value="value">Value</option>
    <option value="value" selected>Value</option>
</select>

Use <select> rather than radio buttons when the number of options to choose from is large selected is used rather than checked.
Provides the ability to select multiple options.
Conceptually, <select> becomes more similar to checkboxes.

File Select

Upload a local file as an attachment. The accept attribute value is a string that defines the file types the file input should accept.
This string is a comma-separated list of unique file type specifiers.

HTML
<input type="file" value="filename" accept=".txt,application/json,audio/*">

Text Area

Multi line text input.

HTML
<textarea rows="row-number" cols="column-number" >pre-existing editable test</textarea>

Submit & Reset

HTML
<input type="submit" value="label">
<input type="reset" value="label">
<!-- OR -->
<button type="submit" value="label">
<button type="reset" value="label">

submit: sends the form data to the location specified in the action attribute.
reset: resets all forms controls to the default values.

Button

HTML
<button type="button/reset/submit" value="label"/>

<!-- can contain HTML -->
<button type="button/reset/submit" value="lebel"></button>

Fieldset

Group controls into categories. Particularly important for screen readers.

HTML
<fieldset>
    <legend>Color</legend>
    <input type="radio" name="colour" value="red" id="colour_red">
    <label for="colour_red">Red</label>
    <input type="radio" name="colour" value="green" id="colour_green">
    <label for="colour_green">Green</label>
    <input type="radio" name="colour" value="blue" id="colour_blue">
    <label for="colour_blue">Red</label>
</fieldset>

Email Field

Used to receive a valid e-mail address from the user. Most browsers can validate this without needing javascript. Older browsers don't support this input type.

HTML
<form>
    <label for="user-email">Email:</label>
    <input type="email" name="user-email" id="form-email">
    <button type="submit">Send</button>
</form>

Progress Bar

HTML
<progress max="100" value="70"> 70% </progress>

Slider

HTML
<input type="range" min="0" max="20">

Meter

The <meter> HTML element represents either a scalar value within a known range or a fractional value.

HTML
<meter min="0" max="100" low="33" high="66" optimum="80" value="50">current value</meter>

Datalist (Autocomplete)

The datalist HTML element can provide suggestions to an input that targets it's id with the list attribute.

HTML
<input list="items">

<datalist id="items">
    <option value="value-1">
    <option value="value-2">
    <option value="value-3">
</datalist>

More Input Types

HTML
<input type="email" id="email" name="email" />
<input type="url" id="url" name="url" />
<input type="number" name="" id="identifier" min="min-value" max="max-value" step="" />
<input type="search" id="identifier" name="">
<input type="color" />

Using Built-In Form Validation

One of the most significant features of HTML5 form controls is the ability to validate most user data without relying on JavaScript.
This is done by using validation attributes on form elements.

required: Specifies whether a form field needs to be filled in before the form can be submitted.
minlength, maxlength: Specifies the minimum and maximum length of textual data (strings)
min, max: Specifies the minimum and maximum values of numerical input types
type: Specifies whether the data needs to be a number, an email address, or some other specific preset type.
pattern: Specifies a regular expression that defines a pattern the entered data needs to follow.

If the data entered in an form field follows all of the rules specified by the above attributes, it is considered valid. If not, it is considered invalid.

When an element is valid, the following things are true:

The element matches the :valid CSS pseudo-class, which lets you apply a specific style to valid elements.
If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g. JavaScript).

When an element is invalid, the following things are true:

The element matches the :invalid CSS pseudo-class, and sometimes other UI pseudo-classes (e.g. :out-of-range) depending on the error, which lets you apply a specific style to invalid elements.
If the user tries to send the data, the browser will block the form and display an error message.