Semantic HTML


These are just some notes for my own use, but you can use them too if they help you! I recommend viewing the page source, too. These are techniques to help your websites be more accessible to screen readers (the tools blind and low vision people use computers with) and people who navigate by keyboards. I know a lot of Neocities sites are intentionally ugly and inaccessible, but having a disability myself, that's not for me.

Many ARIA roles are already taken care of by using basic HTML5 correctly. I've found the MDN Web Docs to be useful for remembering the difference between things. (Did you know you're not supposed to use HTML just to make something bold or italic anymore? Wild!)

Major navigation sections use the nav element. If you have two or more navs, you use aria-labelledby (note the double L) to distinguish them in your code.

Example from MDN, showing header nav and footer nav:

		<header>
			<nav aria-labelledby="primary-navigation">
				<h2 id="primary-navigation">Primary navigation</h2>
				<!-- navigation items -->
			</nav>
		</header>
	
		<!-- page content -->
	
		<footer>
			<nav aria-labelledby="footer-navigation">
				<h2 id="footer-navigation">Footer navigation</h2>
				<!-- navigation items -->
			</nav>
		</footer>
		

I had to escape all the < and > characters in that so that it'd display properly.

For headers, you shouldn't jump from h1 to h3, etc. To a screen reader, it's like a numbered list where you're missing number 2 and people will wonder where it went. Just change h2 to look like you want with CSS.

A few HTML5 elements display the same way or similarly by default, but mean different things. They include em, i, cite, dfn, and var (all italic by default), as well as strong and b (both bold by default), and code, pre, samp, kbd (all monospace by default).

I'll get to the bold and monospace later, and write up some stuff about ARIA labels and the other elements I mentioned.