HTML and CSS Reference
C H A P T E R 3
OK, OK, we've drudged through the available elements, and that is all well and good,
but you may be wondering how you go from knowing the HTML elements to mastering
the HTML elements. Well, after knowing what elements exist, the next step is knowing
when to use one over another. This chapter will guide you on that path, focusing on the
elements that define the structure and semantics of your web page. We'll code a simple
web page outline to learn about structural semantics and then delve into a case study to
explore the nuances of text-level semantic elements.
What are semantics and why should I care?
“Elements, attributes, and attribute values in HTML are defined (by
this specification) to have certain meanings (semantics). For example,
the ol element represents an ordered list, and the lang attribute repres-
ents the language of the content.
Authors must not use elements, attributes, or attribute values for pur-
poses other than their appropriate intended semantic purpose.”
WHATWG HTML SPECIFICATION
The word semantic can often be heard in the web development communities in such
phrases as the Semantic Web , good semantics , semantically rich HTML , and so on, but
it can feel a bit like a catchphrase being tossed about to make the speaker seem hip to
contemporary web development. What exactly does it mean? That very question is what
semantics seek to answer. Semantics is the meaning of something, especially in regard to
the components of a language. Semantic HTML is about HTML elements that describe
the type of content they contain. It is concerned with what is meant by enclosing content
in one HTML element versus another. It is also about using appropriate elements for par-
ticular pieces of content, as per the guidelines in the HTML specification.