A guide to writing and maintaining good markup.
Probably, as @davexunit says, we should stop writing all this by hand and make it programmatic.
- Keep HTML structure as simple as possible.
- Structure markup to create meaningful hierarchical relationships.
- Stick to proper semantics.
- Use 2 spaces for indentation.
- Lowercase all element and attribute names.
- Use a slash in self-closing tags.
- Don't omit closing tags.
- Order of elements in the HEAD.
- Give your document a useful title.
- Include all stylesheet links in the HEAD.
- Keep content, presentation, and behavior separate.
- Use ARIA roles and labels when appropriate.
- Use HTML5 input types when applicable
- Links, Buttons & Anchors
Ideally, if you view your document with all styles turned off, a page should resemble a sensible outline. Among other things, this is a foundation for good accessibility.
- Don't use a
<div>or<span>when a more meaningful element is available.<ul>for lists<a>for links<input type="button">or<button>for buttons- etc.
- Never add a
<div>or<span>with no attributes.
Set your editor to use spaces, not tabs.
For "empty" elements, use XHTML-style closing syntax: <br />, <link rel="..." />.
Although HTML5 allows omitting certain closing tags, like </p> and </li>, DON'T. It just makes your markup harder to comprehend.
Keep <head> section in the following order:
<meta>elements<title>element- Style sheet
<link>s
They should start loading & rendering as soon as possible.
- No inline styles.
- No inline JavaScript or event handlers.
If you must use a non-semantic element, add an ARIA role to give hints to user agents/assistive technology. [Link to ARIA Roles]
For an element that has click behavior attached, but isn't a sensible
clickable element (not that you're EVER going to do this):
Bad: no semantics
<span class="buttony">
Grok
</span>
Good: Semantics via ARIA role
<span class="buttony" role="button">
Grok
</span>
Better: Use the right element in the first place
<button class="buttony">
Grok
</button>E.g., url, email, etc.
Full list of HTML5 input types
Doing this communicates semantics to user agents and assistive tech. For example, using type="numeric" might trigger the appropriate keyboard state on mobile.
<a href="www.google.com">Search Google</a>
Use this style of anchor tag to create links to other pages.
If using a link anchor tag as a placeholder (<a href="#">Not a real link</a>), then be sure to add ev.preventDefault() to your JS click event heandler. Alternatively, use href="#0" to prevent the default link action. #0 works because ids cannot start with a number. Otherwise, the page will jump to the top every time a user clicks your placeholder.
Note: This is NOT the same thing as <link rel="">.
<button type="submit">Text</button>
<button type="button">Text</button>
<input type="submit">Text</input>
<input type="button>Text</input>
A button is by default a submit button, and will trigger the action of a form if it's inside one. Add type="button" to make it a non-submit button.
The advantage of <button> is that you can put other elements inside it, whereas you can only use plain text labels for <input>-style buttons.
<a name="#some-text">Text</a>
Anchors are great for jumping to information farther down a page.
| Buttons | Links | Anchors | |
|---|---|---|---|
| Action | A button invokes an action: Save, Cancel, Exterminate. | A link takes you somewhere (navigates). | No action; Identifies a page fragment that can be the destination of a link. |
| Activation key | Activated with the Space or Enter key. | Activated with the Enter key. | No. |
| Screen readers | Identified in screen readers as a button, and included in the list of form controls. | Identified in screen readers as a link, and included in the list of page links. | Screen reader reads this like a regular text. |
| Focusable by default? | Yes. | Varies (user Pref). | No. |
<input>elements belong inside a<form>.
- One common pattern is to present the primary action as a button and the secondary action as a link (e.g., Save button and Cancel link).
- If the button/link is meant to reveal hidden information, such as an info modal, use
<a href="#0">Show Me Stuff!</a>.
As with everything, it's not simply a matter of style -- the semantics are important, and have real consequences for keyboard and screen reader users.