An example of HTML5 markup

From the doctype to new elements, HTML5 in many ways is a simplification as well as an addition to what can be done with HTML. Here’s an example HTML5 page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<hgroup>
<h1>Main Heading</h1>
<h2>Secondary Heading</h2>
</hgroup>
<nav>
<ul><li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li></ul>
</nav>
</header>
<section>Content, which might include headings, paragraphs, article elements each with a header and footer if desired and other material such as figure and figcaption or form elements.</section>
<section>other sections if needed</section>
<aside>secondary content</aside>
<footer>footer content</footer>
</body>
</html>

A few comments on what you see. The doctype is simplified (See The HTML5 doctype). The language declaration is simplified, the link to the stylesheet no longer needs a type attribute.

New elements have more semantic names, providing more meaning than the generic <div>. The <header> and <footer> elements can be part of the entire page, plus part of <section> or <article> elements. The <hgroup> element nested in a <header> can be used when more than one level heading is needed as a title. (See: Document outlines in HTML 5 and The new hgroup element) The <aside> element can contain secondary content similar to what is now placed in a secondary sidebar div.

See also:

3 thoughts on “An example of HTML5 markup”

    1. Are you looking for an example of an unordered list or a definition list that has been styled to display comments? Not sure what your question means?

Leave a Reply