attributes to attach to them a specific semantic meaning, and CSS to make them look
any way they want. For example, you can use the <d iv> elem ent to divide a page into
logical pieces like headers, footers, banners, sidenotes, and so forth. Later, you can
design and position each piece to create page layouts to your liking using CSS.
Say you want to inc lude in your website a copyright notice, which usually c omes
at th e bottom of every page of you r w ebsite. In typography, a piece of information
that is separated from the main body of text and appears at the bottom of th e page is
called a footer. Using the <div> element, the code for a copyright notice could look
something like this:
<div class="footer">
(C) ACME 2015 All Rights Reserved
</div>
With the help of a <div> element with the class attribute set to footer, I have
clearly marked the copyr ight text as belonging to the footer of a page. The same
class attribute could help m e later to access and visually desig n the element by CSS.
The generic <div> and <span> elements are useful for giving parts of a do cument
an arbitrary, user-defined meaning. However, one of the a mbitions of HTML5 is to
bring into play other, more semantic elements to e nable authors to easily and more
accurately d escribe the content of their documents. For example, there actually exists
the <footer> element and you can rewrite the above code as:
<footer>
(C) ACME 2015 All Rights Reserved
</footer>
Maria: I see. And now the browser will already know tha t this is a footer and will
render it smaller, won’t it?
Professor: Actually, no. The <footer> element doesn’t do anythin g on its own
except render its content as a separate block. As a matter of fact, none of the new
semantic elements w ill do anything special except displa y themselves as a block of
text. Apart from that, the four sectioning elements that we are going to meet shor tly,
<article>, <aside>, <nav>, and <section> make their headings smaller and that’s
about it.
Maria: What’s the use, then?
Professor: There are m any reasons, actually. One of them is code read ability. The
limitation of the generic <div> and <s pan> elements is that they don’t carry any in-
formation about the structure of the page. OK, autho rs label their generic elements
using class and id attributes, but the values given to them are quite a rbitrary. Some-
times it takes a lot of digging through HTML and CSS files to unscramble what the
author actually had in mind. Even if a human can do that unscrambling, a sear ch bot
or a scr een r eader surely ca n’t. The page structure remains a complete mystery to
them.
22 Meeting 2. Building a Sound Structure