So with our new understanding of some of the HTML section elements, let’s rewrite our navbar taking advantage of them:
1 <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
2 <div class="container">
3 <header class="navbar-header">
4 <button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navbar-collapse"> 5 <span class="sr-only">Toggle navigation</span>
6 <span class="icon-bar"></span> 7 <span class="icon-bar"></span> 8 <span class="icon-bar"></span> 9 </button>
10 <a class="navbar-brand" href="{% url 'home' %}">Mos Eisley's Cantina</a>
11 </header>
12 <div class="navbar-collapse collapse"> 13 <ul class="nav navbar-nav">
14 <li class="active"><a href="{% url 'home' %}">Home</a></li> 15 <li><a href="/pages/about">About</a></li>
16 <li><a href="{% url 'contact' %}">Contact</a></li> 17 {% if user %}
18 <li><a href="{% url 'sign_out' %}">Logout</a></li> 19 {% else %}
20 <li><a href="{% url 'sign_in' %}">Login</a></li> 21 <li><a href="{% url 'register' %}">Register</a></li> 22 {% endif %}
23 </ul> 24 </div> 25 </div> 26 </nav>
Notice the difference? Basically we replaced two of the divs with more meaningful section elements.
1. The second line and the second to last line define the nav or navigation section, which
lets a program know:This is the main navigation section for the site.
2. Inside the nav element there is a header element, which encompasses the “brand” part of the navbar, which is intended to show the name of the site with a link back to the main page.
Those two changes may not look like much, but depending on the scenario, they can have a huge impact. Let’s look at a few examples real quick.
1. Web scraping: Pretend you are trying to scrape the website. Before, you would have to follow every link on the page, make sure the destination is still in the same domain, detect circular links, and finally jump through a whole bunch of loops and special cases just to visit all the pages on the site. Now you can basically achieve the same thing in just a few steps. Take a look at the following pseudo-code:
1 access site 2
3 for <a> in <nav>: 4 click <a>
5 check for interesting sections 6 extract data
7
8 #n ow return to main landing page 9 <nav>.<header>.<a>.click()
2. Specialized interfaces: Imagine tying to read a web page on something tiny like google glass, or a “smart watch”. Lot’s of pinching and zooming and pretty tough to do. Now imagine if that smart watch could determine the content and respond to voice com- mands like “Show navigation”, “Show Main Content”, “Next Section”. This could hap- pen across all sites today if they used Semantic markup. But there is no way to make that work if your site is just a bunch of unstructured divs.
3. Accessibility Devices: Several accessibility devices rely on semantic markup to make it possible for those with accessibility needs to access the web. There are a number or
write ups about this on the web includinghereandhereandhere
But it’s not just about making your site more accessible in a programatic way. It’s also about making the code for your site clearer and thus easier to maintain.
As we have talked about before, writing maintainable code is a huge part of Software Crafts- manship. If you go back and look at our previous example with all the divs vs the semantic markup you should find it much easier to see whats going on at a glance by just looking at the section tags. This may not seem like much, but these tiny change add up quickly. Every little bit counts.
Try this: Use your browser toView Page Sourceof your favorite web site. Chances are if
it’s not using semantic markup you’ll be drowning indivs, making it tough to dig through
the HTML and see what corresponds to what. Adding semantic markup make this process much simpler and thus makes things more maintainable.
That’s basically it. In our case, we now have a navigation structure that not only looks cool (hopefully), but is accessible programmatically - which is a really good thing. HTML5 section tags are probably the simplest thing you can do to make your page more semantic. To get
started, simply replacedivtags where appropriate with HTML5 sections tag that correspond
to the type of data you’re showing.
We will cover some of the other new tags in HTML5 that apply to semantics as we go further into the chapter. Covering the entirety of the Semantic Web is way beyond the scope of this
course, but if you want to find out more information, start at the Wikipediapageand watch