Create a Semantic Structure for Web Pages - dummies

Create a Semantic Structure for Web Pages

Creating semantically relevant pages has been good practice on the web since long before the iPad appeared, but HTML5 builds in special tags to make it easier to be consistent in how you use semantics as you design web pages.

The idea of creating semantically relevant pages comes from the inventor of the World Wide Web, Tim Berners-Lee, who envisioned a “web of data” that had meaning, or semantics.

Creating a web page with semantic structure has long been considered a best practice because it gives the web page more meaning. In HTML4 and XHTML, web designers can create a semantic structure by following well-established rules with HTML tags.

For example, the most important headline on a page should be formatted with the Heading 1, or <h1> tag. Similarly, most web designers now define class or ID styles for the main sections of a site with names like header and footer to identify their role and importance on a page.

HTML5 takes this concept a step further by adding a series of new semantic elements. Rather than create a class or ID style and apply it to a <div> tag, in HTML5 you can simply use tags with names like <header> and <footer>.

Thus, rather than use ID styles such as <div id=”nav”>, you can simply use <nav>. Much like <div> tags, however, none of the new tags does anything unless you define a set of style rules that correspond to the name.

Building these semantic elements into HTML5 gives designers a more consistent way of structuring HTML pages and is recommended because it makes web pages more accessible for anyone who uses a screen reader to read web pages aloud, as well as for search bots and other programs that need to interpret the content of a web page irrespective of its design.

Think of it this way: When you see a web page, you can generally tell by the design which part of the page is the header (it has the navigation area with links) and which is the footer (with the copyright and other details). But none of the bots, readers, and other programs that need to interpret web pages can “see” the design, and that’s part of the reason that using semantics is important.

The semantic structure of a page can be independent from the styling and positioning of the content, so you can create a page that has meaning because recognizable sections make up a logical structure. For your visitors who can see the page, you can style sections, such as the header or footer, to display any way you want them to in a browser.