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.

Similar but Different Elements

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)
strong and b (both bold by default)
code, pre, samp, kbd (all monospace by default)
del, s, and deprecated strike (all struck-through by default)

Of course, with CSS you can make them look any old way you like. For example, this text renders as bold but uses em, while this text renders as italics but uses strong. This is why it's important to make sure CSS is pulling its weight for visuals, rather than relying on how you think something will probably render.

Displays as Italic

em is for EMphasis. You use it to put stress on specific words.
i is for Idiomatic. You use it when text isn't being stressed, but is different somehow, like thoughts, transliterations, or things that aren't creative works but are commonly written in italics, such as species (Homo sapiens) or the names of ships (the Titanic).
You CITE with cite; that one's easy. For example, I've been playing a lot of Hades and Animal Crossing recently.
dfn is for DeFiNing words. I don't totally get the point, but apparently it's used for marking the first use of an abstruse (difficult to understand, obscure) term, along with its definition, so readers don't feel confused for not knowing it and machines better understand the point of the text. But it's not the same as a definition, which should be in a description list? Plays well with id, title, abbr, and acronym.
var is for VARiables, like in math. (Or programming.) The equation for a straight line is y = m*x + b, for instance.

Displays as Bold

strong is for STRONG importance. This element is mainly used for warnings and other crucial information.
- Important: Sometimes this element is only used for a word or two at the beginning of a warning.
- Can be combined with em to show something is notable, serious, or very serious.
b is meant to Bring attention to particular words of a text, but that aren't otherwise different from the rest, unlike links, headers, etc. (The MDN Docs give the examples of keywords in an educational article, or product names in a review.)
And the odd one out: mark is highlighted by default, but because thicker weight and color highlights are both used to draw attention to text, it can be confused in purpose with strong or b. Its true use is displaying text of greater relevance, but not necessarily importance. For example:
- “Whereas recognition of the inherent dignity and of the equal and inalienable rights of all members of the human family is the foundation of freedom, justice and peace in the world…” — Universal Declaration of Human Rights, annotated by me
- “as the domestic cat to distinguish it from the wild members of the family. A cat can either be a house cat, a farm cat or a feral cat; the latter ranges” — Wikipedia excerpt of the page Cat as it appears in a site search for "cat"^{[note 1]}

Displays as Monospace

code is for, well, CODE! I used this element for the first word in this bullet point because it's meant for short snippets or single lines of code.
pre is PREformatted text. It outputs EXACTLY as typed, so it includes extra whitespace and indents that would otherwise be ignored. This is useful for code, ascii art, etc.

Next up is ascii art of the word Uralia with ghosts peeking out around the letters. Note that I used figure and aria-label to try to make this not murder on the ears for screen reader users. Will it work? Unfortunately, not necessarily; screen reader support is a complex issue. Skip the ascii.


                  _  .-')      ('-.                             ('-.     
                 ( \( -O )    ( OO ).-.                        ( OO ).-. 
     ,--. ,--.    ,------.    / . --. /  ,--.        ,-.-')    / . --. / 
     |  | |  |    |   /`. '   | \-.  \   |  |.-')    |  |OO)   | \-.  \  
     |  | | .-')  |  /  | | .-'-'  |  |  |  | OO )   |  |  \ .-'-'  |  | 
     |  |_|( OO ) |  |_.' |  \| |_.'  |  |  |`-' |   |  |(_/  \| |_.'  | 
     |  | | `-' / |  .  '.'   |  .-.  | (|  '---.'  ,|  |_.'   |  .-.  | 
    ('  '-'(_.-'  |  |\  \    |  | |  |  |      |  (_|  |      |  | |  | 
      `-----'     `--' '--'   `--' `--'  `------'    `--'      `--' `--'

^{[note 2]}

pre around code is used for rendering blocks of code like the one earlier.

samp is for SAMPle program output. It represents sample or quoted text made by a computer program. As in, "I'm getting this error: HTTP ERROR 404"
kbd describes exact user input, such as Up Up Down Down Left Right Left Right B A Start.
- A kbd inside a kbd signifies an individual key, like Ctrl+Z. You don't HAVE to do it that way, but it can be useful for applying styles.
- A samp inside a kbd refers to menus and onscreen buttons. (Technically the "user input" is LeftClick or Enter, but that's not the pertinent detail, so you quote the program text inside your user input.)
- A kbd inside a samp is a computer quoting your input back to you. So a program might say: You entered your birthday as 01-01-1970. Is this correct? I applied a red color to the kbd element there.

Displays as Strikethrough

del represents DELetions. It's used for document change tracking in combination with ins for INSertions. For example, showing that a document was last updated on ~~12-31-21~~ 01-01-22. The normal document would just say the date was 01-01-22.
s represents Struck information. It's used for things that were true, and may be relevant to mention, but are no longer true. For example, a shopping site may say this book costs ~~$30~~ $25. I use s in the description of Rainbow Run so that I don't have to rephrase my earlier content, but can convey revised information.
strike is the obsolete predecessor of s. ~~Does the same thing visually,~~ but as part of the move away from using HTML for visual styling, it was replaced. (Fun fact: this is the only element that returns a HTML validation error on this page!)

At some point I'll write up some stuff about ARIA labels and the other elements I mentioned.