HTML Elements

HTML elements or tags are used to define the content and meaning of a HTML document. Elements represent things; that is, they have intrinsic meaning, also known as semantics.

Element Types

There are two types of elements normal and void. Tags which wrap around content using opening and closing tags are considered normal. 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 &lt;img&gt;, but &lt;img&gt;&lt;/img&gt; is invalid.

area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr.

Attributes

 

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**

– [main element (w3schools.com)](https://www.w3schools.com/tags/tag_main.asp “A link to more resources.”)
– [main element (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main “A link to 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**

– [Blockquotes (alistapart.com)](https://gist.github.com/murtaugh/4489740 “A link to more resources.”)
– [Blockquotes (html5doctor.com)](http://html5doctor.com/cite-and-blockquote-reloaded/ “A link to more resources.”)

main
main
main
main
main
main
main
main
main
main

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.)