Chapter 2. A markup primer: classic HTML, semantic HTML, and CSS
This chapter covers
- Building and reading semantic markup
- Using block and inline elements appropriately
- Styling elements using Cascading Style Sheets (CSS)
Classic markup is the HTML you’re probably familiar with already: <div> tags that have <span> tags inside them, <p> tags that define paragraphs of text, and <a> tags that mark links to other content. But classic markup isn’t semantic markup, which is a simple concept with far-reaching effects on the World Wide Web.
Think of semantic markup as a structural diagram for your pages. You can get a lot of information about a building from its structural diagrams, and the same is true with the semantic layout of a page. You can’t see that a page is laid out semantically just by looking at it, but if you take a look at the source it becomes very clear which items are menus or navigation areas and which areas contain content. This gives search engines and accessibility devices the ability to find the content on your pages and to ignore the parts that are only pointers or helpers toward that content.