[an error occurred while processing this directive]
Go to Bottom Nav - July 20, 2018 - No exercises at this time - ERRORblah Happy Holidays and Semester Break!

Semantics, Important in HTML5

Previous versions of HTML had two general types of HTML elements, block and inline. HTML5 introduces more types of elements as well as new tags that are more semantically rich.

This article assumes that you already understand some of the block level elements used in HTML/xHTML. These include: div, h1, h2, h3, h4, h5, h6, p, hr although there are more.

Past Formatting Practices

Formatting in the past was concerned with appearance with little concern about the context of the information. Tables were used for layout formatting in HTML which was not very satisfactory for visually disabled visitors. As the specification advanced, div tags became the method of choice for layout as the information could be grouped inside the div and then styled to taste using CSS.

HTML5 Introduces Structural Semantic Elements

Pre-HTML5 practice involved dividing your page info into separate div tags and identifying them with varying ids or classes. Commonly, there are header divs, footer divs, content divs, and so on. HTML5 introduces specific tags for these page elements so they have a richer semantical context. Div tags are still useful as all-around containers in HTML5; when practical, use these semantically rich tags instead.

<section></section>
Section tags are used to group together related information and represent a section of your document.
<article></article>
Article tags are used to group together related information that could stand alone. The article is similar to the section, the article is self contained enough to be pulled from your page for syndication.
<header></header>
Header tags hold (typically) masthead headings and header information for the body, section, article, and other "sectioning" elements. If a section or article do not have a header section, the the first h1 tag becomes the header. These headers and heading tags form the outline of your document which becomes important in HTML5.
<nav></nav>
Nav tags are used to contain the main navigation links on a page. Although a nav section could be inside of articles or sections, it is usually reserved for main navigation.
<aside></aside>
Aside tags surround information tangentially related to the section or article information in which it resides. Asides are good candidates for pull-quotes or advertising in an article or section. At the top level of a document, the aside is often used for a sidebar column.
<footer></footer>
Footer tags surround footer information for the document, sections, and/or articles in the page. The document footer typically contains copyright information and "housekeeping" links (about this site, contact, home, and so on). Within sections and articles, footers can also contain related links and pertinent metadata.

It only take a little more effort to use semantically relevant tags instead of reflexively reaching for a div tag, give it a try!

Related Links

Heading One
Ut pharetra, ante eget imperdiet ullamcorper, tortor nunc sollicitudin orci, non cursus neque nisl eget ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, nibh in suscipit interdum, velit magna volutpat turpis, at ornare sem magna et tellus. Sed pulvinar facilisis ligula, id vehicula eros sollicitudin a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Heading Two
Vivamus vestibulum, augue id iaculis sodales, odio odio feugiat arcu, scelerisque congue nisi ipsum vitae orci. Nunc sed ligula quam. Cras sed iaculis neque. Proin ultricies consectetur tortor, eu pulvinar sapien commodo ac. Cras diam arcu, lacinia id mattis ut, convallis sed massa. Nullam ut arcu lacus. Suspendisse ultricies elementum arcu ut dictum.
Heading Three
Sed aliquet augue ut ligula porta gravida pellentesque sapien semper. Duis mauris massa, semper pulvinar eleifend id, tincidunt fermentum nulla. Proin ipsum neque, imperdiet in vestibulum non, hendrerit ac nisi. Maecenas eleifend libero quis urna lacinia elementum. Etiam mi massa, sollicitudin nec accumsan in, aliquet in dui. Pellentesque consequat diam quis felis luctus a vehicula lectus mollis.
Pull Down Menu Close Menu