HTML5, CSS3, and JavaScript Fourth Edition

(Ben Green) #1

CHAPTER 18. RESPONSIVE WEB DESIGN (RWD) 194


18.6 Supporting Markup


To make RWD work well, we need to mark up our content wisely. Then the
CSS can do the right thing. Without the supporting markup, we are very
limited.


The main markup we will talk about here is div and span.


Many tags, like h1 or p, have specific intended meanings that relate to the
structure of the webpage.


Thediv(

) andspan() tags, on the other hand, are generic.
They do not imply any semantic cohesiveness (although it may exist), but
they do group things together. They enclose a portion of the webpage so
you can easily apply styling to it.


meaning division, encloses a block, a vertical (rectangular) section of
a webpage, such as one or more paragraphs. A div cannot legally appear
within a paragraph. It can, however, appear within another div.

18.6.1 Divisions


Think ofdivas a super paragraph.


You can use thedivtag to identify sections of your document for special
treatment. Typically you might do this to control styling.


s can be nested.

Divs cannot appear within a paragraph, but paragraphs can appear within
a div.


Exam Question 323(p.355): What HTML markup is used to specify a
vertical block?
Acceptable Answer:

...


is like div, but is less generic. It does imply semantic cohe-
siveness: the parts enclosed go together because they are about the same
thing.

18.6.2 Spans


You can use thespantag to identify phrases of your document for special
treatment. Typically you might do this to control styling.