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>
HTML elements are used to define the content and meaning of a HTML document.
Tags which wrap around content using opening and closing tags are considered normal.
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.
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.
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>
- W3C Sections Recommendation (w3.org)
- Semantics in HTML5 (alistapart.com)
- HTML5 Semantic Elements (w3schools.com)
- An Overview of HTML5 Semantics (codepen.io/mi-lee)
- How to Use The HTML5 Sectioning Elements (teamtreehouse.com)
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.
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>
More Blockquote Resources
<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>
The header element is not sectioning content; it doesn’t introduce a new section in a document outline.
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.
The Inline Frame Element
<iframe> represents a nested browsing context, effectively embedding another HTML page into the current page.
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¶mb=2#my-target-element">Jump-To My Element</a>