Html Document Outline

It's easy to forget that a web page is a text document if all the new exciting web technologies influence your design aspirations, but It doesn't matter what you add, It's still a text document. However, you can add semantic value and meaning to your markup with new Html5 structural elements.

Html5 has several new and redefined elements and attributes. Some of the semantic containers you can use in your web pages include Main, Article, Nav, Section, figure, Header, and Footer, those are the main Html5 elements you'll need to build the foundation and define the structure of your document.

There are several ways to outline a document hierarchy using Html structural containers that can add semantic meaning and logic to your markup. You can use the generic HTML div element with classes and id's, or, you can define distinct sections of a document with Html5 sectioning elements.

The article element can include a header, nav, section, and footer as a stand-alone independent document, but according to the W3C, you can also nest other article and section elements within the main article with h1 headings and footer, and the markup will still be HTML compliant. nevertheless, such practice is questionable and should be avoided.

If you embrace Html best practice, the H1 element should only be used once on the same page. H1 is the root of a well structured semantic Html document. Anything other heading after that are children and siblings, which can be used to define other sections and sub sections of the document accordingly.

Although user agents could derive meaning from the outlining semantics in both approach, the later is still questionable even if Its valid HTML. Because the W3C said you could do so, It doesn't mean that you should, markup must have meaning.

Every Html document has an underlining outline defined by the h1-h6 heading elements, but browsers do not implicitly display it on a page. If you start using more than one h1 element in your markup, It can affect the document outline and decrease its semantic value. A well-defined document outline makes it much easier for search engines and screen readers to understand the structure of your web pages.