Semantic HTML and page architecture
Posted on
This article’s purpose is to serve as a reference guide for myself and developers/agencies I work with. Defining best practices and a consistent workflow/thought process is always worth its time creating.
Typically speaking, here’s a few basic guidelines I follow:
- Use HTML5 element tags for semantically defining blocks of content
- Attach classes for layout and styling purposes
- Only use id’s for js
- Add aria-role’s for better accessibility
- Accompany this with a scss fold of partials that make sense for the project
OK, pretty basic but let’s break that down real quick
Use HTML5 element tags for semantically defining blocks of content
I prefer to create a basic frame for the site that uses a consistent methodology for structure and naming conventions, for example: header class="main-header" and nav class="main-nav" will most likely be found near the top of the document, representing the main-header and main navigation of the site. I use the prefix main- to further define that elements role, and style based off class.
As an aside (pun intended), I’ve seen some themes that will wrap the sites footer in footer tags, which is perfecto, then reference it in the css just by .footer {}. This is a bad practice for a couple reasons:
- It’s actually less performant to style elements based on element than by class. This basically just has to do with the way the browser scans the page.
- Now anywhere else you add
footerin your site, you’ll see those styles added to it.
Here’s a basic frame:
|*|-html-|*|
<body>
<header class="main-header" role="banner">
<nav class="main-nav" role="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Content</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Site Title</h1>
<p>Site Description</p>
</header>
<main class="container" role="main">
<article class="content" role="article">
<h1>Article Title</h1>
<p></p>
<p></p>
</article>
<aside class="main-sidebar" role="complementary">
<h3>Widget Title</h3>
<p></p>
<h3>Social Nav</h3>
<ul>
<li><a href="#">F</a></li>
<li><a href="#">T</a></li>
<li><a href="#">G</a></li>
</ul>
</aside>
</main>
<footer class="main-footer" role="contentinfo">
<div class="footer-container">
<section>
<p>Footer Content</p>
</section>
<aside>
<p>Footer Aside</p>
</aside>
<div class="legal">
<p>Site Title©</p>
</div>
</div>
</footer>
</body>
Quite basic and maybe more geared towards a WP single.php post, but a starting point. We use main HTML5 elements for outlining the page, and use divs for more nondescript blocks of content.
I also like a particular scss set-up as well. Some authors either have too many files, folders and sub-folders for me, or just not enough. Here’s my flow:
- global (folder)
- _wp.scss
- _reset.scss
- _global.scss
- _header.scss
- _nav.scss
- _type.scss
- _fonts.scss
- _footer.scss
- modules (folder)
- _icons.scss
- _animations.scss
- _helpers.scss
- _modules.scss
- _variations.scss
- templates (folder)
- _home.scss
- _template-name.scss (x?)
- style.scss (compiler)
