Using HTML 5

Hypertext Markup Language (HTML) is a standardized set of tags which, when used within a text document, instruct a web browser how to display that text. Based on a uniform resource locator (URL) input by a user in the browser's address bar, the web browser sends a "GET" request (via Hypertext Transfer Protocol (HTTP), which is a simple, text-based protocol built on top of TCP) to the web server specified by that URL. The web server responds with HTML which can then be rendered by the web browser.

Basic HTML Document Layout

<!DOCTYPE html>
<html>
<head>
    <title>Title of document goes here</title>
    <!-- This is an HTML comment -->
    <!-- meta, link and script tags are also often used in the head -->
</head>

<body>
    Visible text goes here...
</body>
</html>

Simple Text Formatting

Bold text 
<b>Bold text</b>
Important text 
<strong>Important text</strong>
Italic text 
<i>Italic text</i>
Emphasized text 
<em>Emphasized text</em>
Smaller text 
<small>Smaller text</small>
Strikethrough (deleted) text 
<del>Strikethrough (deleted) text</del>
Text that is no longer correct 
<s>Text that is no longer correct</s>
Inserted text 
<ins>Inserted text</ins>
Underlined text 
<u>Underlined text</u>
Highlighted text 
<mark>Highlighted text</mark>
Title of a work 
<cite>Title of a work</cite>
Computer code 
<code>Computer code</code>
Keyboard input 
<kbd>Keyboard input</kbd>
 
Pre-formatted text -
Leave all
of this alone

<pre>Pre-formatted text -
Leave all
of this alone
</pre>
 
Here is a subscript
 
Here is a <sub>subscript</sub>
 
Here is a superscript
 
Here is a <sup>superscript</sup>
Contact information
 
<address>Contact information</address>
A short little quotation 
<q>A short little quotation</q>
"Of all life's pleasures, fornication is the most overrated, and defecation the most underrated"
 
<blockquote>"Of all life's pleasures, fornication is the most overrated,
and defecation the most underrated"</blockquote>
This text will be displayed right-to-left, except for this 
<bdo dir="rtl">This text will be displayed right-to-left, <bdi>except for this</bdi></bdo>
HTML (mouse over to display tooltip) 
<abbr title="Hypertext Markup Language">
    HTML (mouse over to display tooltip)
</abbr>

Headers

Title

 
<h1>Title</h1>

Title

 
<h2>Title</h2>

Title

 
<h3>Title</h3>

Title

 
<h4>Title</h4>
Title
 
<h5>Title</h5>
Title
 
<h6>Title</h6>

General Formatting and Organization

HTML will ignore your line breaks 
HTML will ignore
your line breaks
Unless you explicitly
add them. 
Unless you explicitly <br/> add them.

Blocks of text are often organized into paragraphs.

Paragraphs are usually displayed as distinct units.

 
<p>Blocks of text are often organized into paragraphs.</p>
<p>Paragraphs are usually displayed as distinct units.</p>
You can break apart sections
with horizontal rules		 
You can break apart sections<hr/>with horizontal rules
Styles/Sections
A block-level section in a document
An inline section in a document
New Defines an article

Embedding External Content

<iframe width="320" height="195"
        src="http://www.youtube.com/embed/lEsPhTbJhuo"
        seamless>
</iframe>

Links

We can simply mark a section with an ID 
<a id="tips">We can simply mark a section with an ID</a>
Jump to the section marked with the 'tips' id 
<a href="#tips">Jump to the section marked with the 'tips' id</a>
Click this link to go to Google 
<a href="http://google.com">Click this link to go to Google</a>
Click me to go to Google 
<a href="http://google.com">
    <img height="135" width="135"
        src="http://eoimages.gsfc.nasa.gov/images/imagerecords/57000/57723/globe_east_540.jpg"
        alt="Click me to go to Google"/>
</a>
Click this link to open your email client and send an email addressed to guy 
<a href="mailto:guy@example.com">
    Click this link to open your email client and send an email addressed to guy
</a>

Tables

10 Something
20 Something Else 
<table>
    <tr>
        <td>10</td>
        <td>Something</td>
    </tr>
    <tr>
        <td>20</td>
        <td>Something Else</td>
    </tr>
</table>

Lists

  • List Element 1
  • List Element 2
  • List Element 3
 
<ul>
    <li>List Element 1</li>
    <li>List Element 2</li>
    <li>List Element 3</li>
</ul>
  1. List Element 1
  2. List Element 2
  3. List Element 3
 
<ol>
    <li>List Element 1</li>
    <li>List Element 2</li>
    <li>List Element 3</li>
</ol>
Definition 1
Description 1
Definition 2
Description 2
Definition 3
Description 3
 
<dl>
    <dt>Definition 1</dt>
    <dd>Description 1</dd>
    <dt>Definition 2</dt>
    <dd>Description 2</dd>
    <dt>Definition 3</dt>
    <dd>Description 3</dd>
</dl>

Escape Characters

A complete list can be found at http://www.w3schools.com/tags/ref_entities.asp and http://www.w3schools.com/tags/ref_symbols.asp, but here are some of the more commonly used elements:

& 
&amp;
< 
&lt;
> 
&gt;
© 
&#169;

Forms

HTML forms enable a user to interact with a server-based web application. The form allows the user to enter input, which is then sent back to the server when the user submits the form. A variety of form elements are supported: 













<form method="GET" action="url_which_will_accept_form_input">
    <input type="checkbox" name="my-checkbox" checked/><br/>
    <input type="file" name="my-file-chooser"/><br/>
    <input type="hidden"/><br/>
    <input type="image"/><br/>
    <input type="radio"/><br/>
    <optgroup label="fruits">
        <option>Apples</option>
        <option selected="selected">Bananas</option>
        <option>Cherries</option>
    </optgroup>
    <optgroup label="vegetables">
        <option>Asparagus</option>
        <option>Beets</option>
        <option>Carrots</option>
    </optgroup>
    <input type="text" Placeholder="Default text" name="email" size="40" maxlength="50"><br/>
    <input type="text" value="Default text" name="email" size="40" maxlength="50"><br/>
    <input type="password"/><br/>
    <textarea name="my-textarea" rows="5" cols="40">This is the text</textarea><br/>
    <input type="button" name="my-button" value="Hello"/><br/>
    <input type="reset"/><br/>
    <input type="submit" value="This will trigger form submission to the action URL "/><br/>
</form>

Dynamic HTML

By combining Javascript with out HTML, we can create a richer, interactive client-side environment. 
<progress max="100" value="33" />
 
<meter min="10" max="100" value="63" />

Media

<video src="http://www.youtube.com/watch?v=lEsPhTbJhuo"
       controls="controls">
    'video' tag not supported on this browser
</video>

Canvas

This text is displayed if your browser does not support HTML5 Canvas. This text is displayed if your browser does not support HTML5 Canvas.

Images and Image Maps