HTML Elements

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>

header

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

iframe

  • The Inline Frame Element <iframe> represents a nested browsing context, effectively embedding another HTML page into the current page.
  • iframe mozilla.org
  • Iframes and CSS
  • How to apply CSS to iframe?
  • 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.)

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.

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.

select

<select>
    <option selected value="">Choose an Option</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

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>