Structuring content

The value of structure

So far, we covered a little bit of the background of HTML and the basic elements that are required for each HTML document. In this chapter, we'll begin exploring how to structure pages properly by examining the sectioning elements that are available in HTML. One of the major benefits of HTML is that it allows us to structure documents in a way that illustrates the meaning of the content. This is often referred to as semantics. And it's an important part of the web authoring process. Most of the time content in a web page fits within specific sections. You might have the company information up top in a heading. The site navigation and a section below that followed by the main content and perhaps, a sidebar with some related information below it. Below everything else, there might be a footer that contains contact information or other information related to the site. Now that's a pretty standard layout for web pages and if you spent any time at all browsing the web, you probably recognize those sections almost immediately and intuitively. However, as designers, it's really easy for us to lose track of the fact that there are people using assistive technology and machines, such as search engines that can't rely on the visual layout to convey meaning. For those users, the actual structure of the page has to convey the information about the content. If the page isn't structured properly, the page content will have no hierarchy and no way to convey how the content relates to each other. That's where HTML's sectioning and heading elements come in. These elements allow us to group content together in specific sections that have semantic meaning. They are the headings, which are the h1 through h6 elements. And the article, aside, nav and section elements. When used properly, these elements give your document an intelligent outline that clearly represents the page's content. In addition to these sectioning elements, HTML also has several semantic elements that can help add structure and meaning to your document as well. These are the header, main and footer elements. Used together, these elements allow you to group sections of content into clearly defined regions. Establish the relationship between those regions and make your pages more readable for both people and machines. This will result in more accessible sites, better search engine results and sites that are more consistent and easier for you to style. I can't stress enough how important it is for new web designers to learn how to use these elements correctly. By focusing on proper page structure early in the process of learning HTML, you can avoid costly mistakes in the future and be well on the way to producing semantic sites that perform exactly as intended.