Sample Web Page Using HTML5 Semantic Elements <header>

What Is This?! (<article>)

This web page is a demonstration of what are called the major semantic elements of HTML5.  The elements (HTML tags) name the various sections of a page logically (like <header> and <article>).  You can then define the characteristics of each page section (the HTML tags or elements) in a CSS file, rather than the old way of declaring CSS IDs or Classes for DIVs or other elements.  It is simply a more logical way to divide up a page and specify sectional characteristics.

For example, on this page the <footer> text is smaller than the rest of the page and centered.  Here is the CSS definition (using element overrides) and HTML: 

	footer   { color: white; background-color: black; }
	footer p { margin: 0; padding: 5px; font-size: smaller; text-align: center; }
	
	<footer>
	<p>&copy; 2019 by me. (Not really, this is an example!) &lt;footer&gt;</p>
	</footer>

Design (<article>)

This page is divided into the following elements (tags of these names):  header; nav(igation); section(s) - there are 2:  Example and Reference; article(s) - there are two in this section and one in the following section; and footer.  NOTE:  It is proper coding technique to begin each section and article with a header tag.  We used <h1> in the header, <h2> for each section, and <h3> for each article.  If you don't do this, validation will flag it as a warning.  [Do your validation at https://validator.w3.org/nu/.]