“Semantic” Tags

closebunkieAI and Robotics

Nov 15, 2013 (3 years and 8 months ago)


“Semantic” Tags

Semantic markup describes what the content

as opposed to what it

looks like

Examples include: div, nav, article, header,

Contrast with deprecated tags and attributes such
as font, color, u (underline), etc

Don’t confuse the

tag with the


We will learn about a few semantic tags

<header> tag

This tag doesn’t

anything. It is there for
organizational and, possibly, styling purposes.

In this section we typically place the title of
the page (not necessarily the same as the title
tag), logos, a search box, etc

Example: <header>


<img src="cats.jpg" alt="cat picture">

<h1>Cats 'R Us</h1>

<h2>All your feline needs</h2>


<nav> tag

Typically used to enclose a series of links such as a table of
contents to navigate around your site.

As with the <header> tag, this tag doesn’t do anything. It is
there for organizational and styling purposes.

While you may have multiple <nav> tags on a page, you
should typically reserve this tag for a ‘significant’ series of
links such as those to navigate to the main locations of your

Contrast with, say, a series of legal disclaimers or copyright
tags in small print at the bottom of your page. These
probably should not merit their own <nav> section.

Ultimately, placing a series of links inside a <nav> section is
a judgement call.

Example: <nav>


<a href="home.htm">Home</a>

<a href="about.htm">About Us</a>

<a href="contact.htm">Contact Us</a>


<footer> tag

Another organizational tag.

Typically includes copyright information,
citations, ‘last modified’ info, etc.

Think of it as the “small print” section of your

<div> tag

A way of grouping information together that
doesn’t fit into any of the previously described
semantic tags

eg: <div id=“rosa_parks_biography”>

<article> tag

Typically used to contain specific pieces of
content that might stand alone separately

Can also be used to divide a single page of
content that covers different topics.

Eg: Quoting someone else’s blog post

“Semantic” Tags Restated

Assigning meaning to markup.

The tags we’ve just discussed: header, nav, footer,
article, etc, are examples of “semantic” tags. They
describe the information contained inside.

We can assign styles (colors, fonts, etc) and positioning
to these sections, but there is much more too.

For example, suppose you want to format a page for a
small device such as an iPhone. You might decide to
dispense with the navigation and footer sections of your
page. You could write some Javascript that notifies small
sized browsers not to display those sections.

HTML 5 Validator

There are tools available on the web that allow you to upload
an HTML document and will give it a quick check to ensure
that it complies with HTML 5.

Try it out using first_template.htm:


Try it out again using the French Indian War file under week
#2. Experiment

e.g. remove the ‘alt’ attribute from the
image of Washington and note the error.

Note: As stated in the ‘warning’, this is not a perfect checker

there is NOT substitute for your own eyes and knowledge!

For example, it will NOT ensure that programming conventions are