Course notes 12
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Semantic HTML

When designing in HTML, it can often be tempting to simply mark up content in whatever code appears to work. Before you know it, you have DIVs, SPANs, and other arbitrary tags scattered all over the document; nothing really reflecting what it contains. The aim of semantic HTML is to prevent such situations by using tags for their implied meanings. Tags inherently have meaning, and, when we use the context of the tag accurately, it can reinforce the purpose of that block of content.

Tags Have Inherent Meaning

  • <P> (paragraph) means a section of text
  • <DIV> (division) means an area of related content
  • <ul>,<dl>,<ol> (lists) means a sequence of related items
  • <h#> (headers) means a defining segment of information(h1 being of a higher title than h2,etc)

All tags can be thought of in terms of their purpose. And, once you conceptualize the idea that the tag represents, you can more efficiently apply tags to provide content with structure. An easy example is navigation. You might be tempted to wrap your navigation items individually in DIVs, but is that the most meaningful mark-up? Navigational links are a sequence of related objects which serve the same goal of providing access. That sounds like a list! Even if navigation is horizontal, it is still a list of elements. Do not let preconceptions of prototypical visual representations cloud your judgement of the information's integrity.

So, a more structurally meaningful navigation might look something like this:

        <ul id='nav'>
            <li><a href="#">Page 01</a></li>
            <li><a href="#">Page 02</a></li>
            <li><a href="#">Page 03</a></li>
            <li><a href="#">Page 04</a></li>
        </ul>
    

The structure that is now built into the content can actually help us apply style easier, and more efficiently. Below, is the same navigation styled as a horizontal menu.

        <style>
            ul#menu {
            	list-style:none;
            	height:35px;
            	padding:0;
            }
            
            ul#menu li {
            	float:left;
            }
            
            ul#menu li a:link {
            	border-top:3px solid #CCC;
            	border-bottom:3px solid #CCC;
            	color:white;
            	text-decoration:none;
            	background-color:#900;
            	padding:5px 15px;
            }
            
            ul#menu li a:hover {
            	background-color:#C00;
            }
        
        </style>
      
      

      
        <ul id='nav'>
            <li><a href="#">Page 01</a></li>
            <li><a href="#">Page 02</a></li>
            <li><a href="#">Page 03</a></li>
            <li><a href="#">Page 04</a></li>
        </ul>
        
    

This philosophical approach to delineating content may seem to be no more than metadata, and to a certain degree it might be, but there are several benefits that it provides. Aside from a cleaner structure to your code, applying tags semantically can actually help to define your code. Screen readers, web crawlers and other non-visual methods of reaching your site can better understand the content and areas that make up your page. Since they never see the presentation layer defined by CSS, they must rely on the HTML itself to derive what is what. In incorporating semantic HTML you make your site more accessible, reach better search engine optimization, and achieve a more meaningful code base.