Mike: I think I will study this when it’s quiet and do som e experimenting to see how
things b ehave.
Professor: I just wanted to suggest the same. There’s really not muc h to explain,
you’ll simply have to try it out by yourselves. However, before y ou start pulling your
hair out figurin g ou t why I used an o bsolete border attribute, let m e tell you that I
haven’t had any other choice.
Maria: That’s true. Border is a matter of presentation, not content.
Professor: Precisely. However, browsers by default don’t draw any table borders and
the above table wou ld be completely illegible without them. The o nly way to draw
borders properly according to HTML5 standard is to use CSS. In the a bove example, I
resorted to the possibility of limited use of the border attribute in the case of absence
of CSS. W3C allows that but you can only use one of th e two possible values fo r this
purpose: the empty string or the value 1.
Maria: What about rows pan and colspan? Aren’t they also a matter of presentation?
Professor: Think again.
Maria: O ops! I get it. We stretched a header acro ss many colum ns because they share
the same meaning. For example, there are four columns ab out export.
Professor: Exactly!
2.3 Generic <div> and <span> Elements
Professor: By now, you already understand tha t writing HTML code is thinking pri-
marily about meaning and structure.
Equally important is that you use the right element for assign ing a part of a d ocument
the right meaning. For example, it would be wrong to use any of the six hea dings
elements <h1> to <h6> for a table caption. For that purpose, yo u should use the
<caption> element and nothing else.
The difficulty with the older HTML standards was that there really weren’t many se-
mantic elements available and authors had to resort to the generic <div> and <span>
elements. In this sense, the HTML5 standard has made a significant step forward by
introdu cing many n ew semantic elements.
Before I in troduce you those newbies, I think it’s imp ortant that you understand the
role of the <d iv> and <span> elements. There are two good reasons for that: First,
designers have used them in th e past very often to organize their documents, which
will continue to live on the Web for years to come. Second, they are still very useful
in special cases when you don’t find a more appropriate element.
<div> and <span> are called generic elements. That means there really isn’t any
inherent meaning attached to them no r is there provid ed any default browser render-
ing for them ( except that <div> h as block display while < span> has inline disp la y).
Rather, they can be used generally wherever needed. Authors use the class or id
2.3. Generic <div> and <sp an> Elements 21
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
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.