8 - La Salle University

pogonotomygobbleAI and Robotics

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


Chapter 8 Structure and Semantics

[more on proper HTML to hold the CSS]

CSS layouts often built on poor HTML principles. Need proper use of:

<div> (division: block
level) and <span> (inline)

(HTML5 replaces most <div>s with <section> <aside> etc.)

and <span> are sort of structural only

[that's partly why there is still some debate about
their use] So

<div id="navigation"> is OK (id=identification means there's only one on the page) but
some prefer < ul class="navigation> if it's only a list of link
s and nothing else.

Make class and id names meaningful for later/other developers. Don't name them for design e.g.

Class=classification so there can be more than one on a page (e.g class="post")

id can be

CSS selector [see chap 9]

anchor to replace name=""

way to reference current W3C DOM for JavaScript [getElementByID()]

to connect to databases (also <object>??)

For use elsewhere, start id names with letter, e.g. id="item4"

Semantic Markup [again] and reusability

Plain outline
style means easier findability and screen readers

Note example (p. 155) has no <img /> no <td> and no attributes such as bgcolor=,

This also allows changes in the presentation e.g. via JavaScript [or rel="alternate" CSS links]

[We will look at
these later

see the A

choices at the
Washington Post

It's reusable [think ZenGarden] because it's free of presentation.

Still CSS presentation has common problems:


Classitis (adding class="" when it's no
t needed, e.g. on every paragraph; Dreamweaver might
do this [another reason to know how to handcode]



similarly. [e.g don't use <div> to create line breaks] don't use <div
class="headline">, use <h1>


Inline CSS <div style="">


Inline JavaScript <spa
n onclick="function();">

Do use id=""