Semantic Markup

Semantic markup refers to markup elements with tag names that indicate their use. The intent is to make the HTML code more readable and easier to style. We no longer need ids on many divs used throughout a page to get the styles you want. Examples of semantic markup are:

• <main>, for presenting the main body of infromation for the current page
• <aside>, used to contain text that may not be relevant for all readers
• <nav>, to contain sets of links for navigating around a website.

Here's a complete list from w3schools.com.

This page is using: <header> <main>, <aside>, and <footer> markup elements. Also, on the previous "Introduction" page we used <figure> and <figcaption> markup. Think of these as named divs that can be individually styled without the need to mark with ids. The <aside> element has been floated to the right, which takes it out of the normal page flow. However, text from outside the float will honor the floated element's boundaries and margins.

One interesting thing: IE11 recognizes all of these except main. We needed to implement a work-around by creating an HTML element main, using JavaScript, and style it with block structure. You can see the JavaScript at the end of this page's source code.

Edge, Chrome, and Firefox all recognize the main element, so you don't need the work-around for them, but using it on the page doesn't interfere with their parsing of that element.

Two other things will be useful:
W3C CSS Selectors Documentation, and W3C Selector Recommendation

Well, one more thing: We've used a lot of CSS. Here's a nice reference: CSS Reference - w3shools.