- 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.
- Normal Tags wrap around content using opening and closing tags. Ex:
- Void or self-closing tags are expressed with a single tag. Ex:
- HTML Element Reference (developer.mozilla.org)
- HTML Global Attributes Reference (w3schools.com)
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> <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>
The header element is not sectioning content; it doesn’t introduce a new section in a document outline.
- 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?
<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.
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> <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> <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>