I'm currently working on building my portfolio site, and while it's far from the first site I've developed, it *is* the first site I've developed semantically from scratch. Since learning about semantic HTML, I've grown more and more annoyed at how a lot of frameworks and guides rely almost exclusively on `div`, `span`, `class`, and `id` to apply CSS rules to the styling of content, and while I understand the practicality of that approach in the case of frameworks, I feel it does a great disservice to web developers to push those methods at the cost of exploring the increased versatility and maintainability semantic HTML provides. In particular, I feel that the versatility of the `footer` tag is underutilized. Most tutorials/guides and code examples I've seen use the `footer` tag exclusively for the footer of a page in conjunction with the `header` and `main` tags. While this is a perfectly valid way to use those tags, it is by far not the *only* way. Let's say that you have a site that includes some scientific papers. Because you're dealing with self-contained content, it makes semantic sense to enclose the entirety of the paper with the `article` tag. Scientific papers are also divided into discrete sections, which makes formatting them semantically relatively simple as you can use the `section` tag to encapsulate those respective sections, in addition to nesting `section` tags for applicable sub-sections. Scientific papers also contain numerous citations and footnotes which, before HTML 5, could be handled by 1) assigning anchoring IDs to the respective elements and hopping up/down the page and/or 2) creating a div `class="footnote"` to contain the footnote/citation and placing it after the relevant section. The `footer` tag essentially replaces the custom div option while reducing the amount of markup required: there is no need to assign a class to the `footer` as it can be accessed directly through the document tree. Additionally, because it limits the number of nested identical tags, using the `footer` tag inside of a `section` tag reduces confusion and potential errors arising from keeping track of closing `div` tags. In short, using semantic HTML helps keep your code readable and easier to maintain. ##So let's do some code comparisons! The first example uses the traditional method of div classes to organize content and apply styling selectively: ```HTML

Section Title

Section content

Section Title

Section content

More section content

Even more section content

``` Isn't it *much* easier to see which tags are paired to each other? It also doesn't hurt that the CSS to style the section's title and content text looks very similar to the first example, largely in part to sharing the same descriptive names: ```CSS section h2, section p { color: #A9A9A9; } ``` This isn't always the case, especially when you're dealing with lots of nested elements, classes, and ids. In those cases, semantic HTML makes it easier to keep track of which elements receive which formatting **without** the need to assign classes or ids; in other words, the style rules are applied based on the document's structure rather than arbitrarily assigned classes/ids, allowing you to discern how specific a style rule is simply by looking at your CSS. All of the above is to say, I think that semantic HTML is pretty awesome, and if you're not already using it, I strongly encourage you to play around and see for yourself how flexible and meaningful it is. Just remember to style your HTML 5 block elements as `display: block;` to ensure your content displays properly in browsers that don't support HTML 5! ```CSS article, aside, footer, header, nav, section { display: block; } ```

cmpickell

Some observations about semantic HTML and CSS

Join Our Newsletter. No Spam, Only the good stuff.