HTML5

HTML Document

A HTML Document is a text file written for web browsers to read.

Basic HTML5 Document Example
This example show the basic structure needed to define a modern HTML5 document:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document Title</title>
        <meta content="width=device-width" name="viewport"> <!-- optional (really?) device-width -->
    </head>
    <body>
        <!-- Page content goes here. -->
    </body>
</html>
 

More Resources

Elements

HTML elements are used to define the content and meaning of a HTML document.

Normal Elements

Tags which wrap around content using opening and closing tags are considered normal.

Void Elements

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.
Void or self-closing tags are expressed with a single tag. They do not wrap content because they have no end tag. The “/” is completely optional, so <img/> is not different from <img>, but <img></img> is invalid.

Element Attributes

 

More Resources

Document Outline

The most basic function of a website is to present information in a hierarchical structure called the Outline. The Document Outline is created using the heading elements h1, h2, h3, h4, h5, and h6.

Heading elements have a rank given by the number in their name. The h1 element has the highest rank, the h6 element has the lowest rank, and two elements with the same name have equal rank.

Use the rank of heading elements to create the document outline.

 

More Resources

Semantic HTML

Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.

<body>

    <header>
        
        <div id="logo">...</div>
        <nav role="navigation">
            <ul>
                <li><a href="/"><span>Home</span></a></li>
                <li><a href="/archives/"><span>Archives</span></a></li>
                <li><a href="/about/"><span>About</span></a></li>
                <li><a href="/contact/"><span>Contact</span></a></li>
            </ul>
        </nav>
        
    </header>
    
    <main role="main">
        
        <h1>...</h1>
        <p>...</p>
      
        <article>
            
            <header>
                <h2>...</h2>
                <p>...</p>
            </header>
            
            <p>...</p>
            
            <section>
                
                <h3>Comments</h3>
                
                <article>
                    <header>
                        <h3>...</h3>
                        <p>...</p>
                    </header>
                    <p>...</p>
                </article>
                
            </section>
            
        </article>
        
        ...
        
    </main>
    
</body>
</html>
 

More Resources

main

The <main> element should contain the main content for your web page. All of this content should be unique to the individual page and should not appear elsewhere on the site. Any content that is repeated on multiple pages (logos, search boxes, footer links, etc.) should not be placed within the <main> element.

The main tag can only be used once per page and it can not be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element. According to caniuse.com IE11 does not currently support the main element, but use of the HTML5 Shiv will fix this.

 

More Resources

article

The <article> element should contain a piece of self-contained content that could be distributed outside the context of the page. This includes things like news articles, blog posts, or user comments.

blockquote

<blockquote>
    <p>
        As my fellow HTML5 Doctor, Oli Studholme has showed, people seldom quote exactly – so sacrosanctity of the quoted text isn’t a useful ideal – and in print etc, 
citations almost always appear as part of the quotation – it’s highly conventional.
    </p>
    <footer>
        - <cite>Bruce Lawson</cite>
    </footer>
</blockquote>
 

More Blockquote Resources

table

<table>
    <thead>
        <tr>
            <th>Product</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Pen</td>
            <td>A nice ball point pen.</td>
            <td>$2.50</td>
        </tr>
        <tr>
            <td>Paper</td>
            <td>A package of top-shelf paper.</td>
            <td>$4.99</td>
        </tr>
        <tr>
            <td>Stapler</td>
            <td>Sturdy and powerful stapler</td>
            <td>$3.00</td>
        </tr>
    <tbody>
    <tfoot>
        <tr>
            <td></td>
            <td>Total:</td>
            <td>$10.49</td>
        </tr>
    </tfoot>
</table>

header

The header element is not sectioning content; it doesn’t introduce a new section in a document outline.

nav

The nav element is intended to contain links to other pages within the site. Links to external sites is discouraged. Optionally nav tags can be put inside header tags.

iframe

The Inline Frame Element <iframe> represents a nested browsing context, effectively embedding another HTML page into the current page.

Note: In order to improve speed, It’s a good idea to set the iframe’s src attribute with JavaScript after the main content is done loading. This makes your page usable sooner and decreases your official page load time (an important SEO metric.)

Jump Links

When a jumplink is used, it scrolls the browser window to a specific element on the page.
You can link to any element with an id attribute.

Placing a hashtag followed by the target elements ID at the end of a URL will cause the browser to scroll-to the top of the target element.

Note: In HTML5 the name attribute on the <a> element is obsolete. The name attribute was often used in HTML4 for jumplinks.

<!-- The target object. -->
<div id="my-target-element">Target element here.</div>

<!-- On-page link. -->
<a href="#my-target-element">Jump-To My Element</a>

<!-- Off-page link. -->
<a href="http://example.com/some-page#my-target-element">Jump-To My Element</a>

<!-- With parameters. -->
<a href="http://example.com/some-page?parama=1&paramb=2#my-target-element">Jump-To My Element</a>

Social Media Tags

HTML Special Characters

ARIA Web Standards

Markup Validation