HTML Coding Style Guidelines
@INCOMPLETE
Where HTML Started and Why It’s Janky
In the early days of the web, HTML only had a few different tags, and almost all of them were primarily used to change how a document looked. For example, <br> for line breaks, <p> for paragraph breaks, <center> to center align, <b> for bold, and <i> for italic. In HTML5, styling is handled using almost exclusively using CSS. There are still a lot of different tags, including <caption>, <dialog>, <footer>, and <section>, but most of them show structure and purpose rather than visual style.
<style> and <script> in-file vs importing external files.
How Tags Work
Open/Close tags, attributes inside them
Styles
Where CSS comes in, class vs id, don’t use inline styles unless absolutely necessary
Tag-Specific Guidelines
Setting Up Your Document
<DOCTYPE>, <html>, <head>, <title>, <link>, <body>, <header>, <nav>, <main>, <footer>
Divs and Spans
Inline vs block content. Don’t use <div>s and <span>s if a more specific, semantic option is available.
Figures (Images)
Using <figure> and <figcaption> to give images (or tables, charts, or graphs) context. Do we need a section on <map> and <area> tags to set up image maps?
Forms
<form>, <label>, <input>, <textarea>, <select> + <option>, <fieldset>, <legend> and different types of inputs.
Headings
Proper “nesting”
Links
<link>, <a>, <img>, and <source> all work a bit differently.
Media
<audio>, <video>, <source>
Tables
<table>, <caption>, <thead>, <tbody>, <tfoot>, <tr>, <th>, and <td> tags; scope, colspan, and rowspan attributes.
HTML Cheat Sheet
Required HTML Tags
The following tags are required in the Web Content Accessibility Guidelines, an international standard created and adopted by the World Wide Web Consortium (W3C). They outline a wide variety of ways to ensure that web content is accessible to as many users as possible. Using them properly makes sites much more easy to navigate using screen readers and keyboards.
| HTML Tag | Rule | Example | More Info |
|---|---|---|---|
<html> | MUST contain language attribute | <html lang="en"> | <html> Info |
<head> | MUST exist, MUST contain title | <head><title>...</title></head> | <head> Info |
<title> | MUST exist, MUST contain text | <title>Page Title \| Site Title</title> | <title> Info |
<body> | Everything visible on the page | <body> Info | |
<header> | MUST exist exactly once | <header>Site Title, Logo, etc.</header> | <header> Info |
<nav> | MUST exist (can have multiples) | <nav><ul><li>Home</li><li>Contact</li></ul></nav> | <nav> Info |
<main> | MUST exist, contains everything but header, nav, and footer | <main>ALL page-specific site content</main> | <main> Info |
<h1> | MUST exist exactly once, should be equivalent to <title> text | <main><h1>Page Title</h1>...</main> | Heading Info |
<h2> - <h6> | MUST nest appropriately when used | <h1>... <h2>... <h3>... <h3>... <h2>... <h3>... | Heading Info |
<footer> | MUST exist exactly once | <footer>Site Info, Social and Other Links</footer> | <footer> Info |
Additional HTML Tags
There are dozens of other additional semantic HTML tags that should be used instead of <div>s or <span>s, wherever appropriate. The most useful ones are listed here:
| HTML Tag | Use Case | More Info |
|---|---|---|
<article> | An area of independent, self-contained content** | <article> Info |
<aside> | An area like a sidebar with content distinct from the main article or page content | <aside> Info |
<blockquote> | A quote from an specific source | <blockquote> Info |
<button> | ALL buttons should be in <button> tags, not just styled as buttons | <button> Info |
<dialog> | A dialog box or subwindow | <dialog> Info |
<map> | An image map (an image with clickable areas) | <map> Info |
<meter> | A progress bar or gauge that isn’t interactive. | <meter> Info |
<picture> | Used similar to <video> or <audio>, and can have multiple sources. | <picture> Info |
<section> | An area of a dependent section of a larger document** | <section> Info |
**Note: <article>s and <section>s are defined in a really confusing way, and are used in whatever makes sense to the developer. It is very common in practice to find an <article> with several <section>s inside, as well as <section>s with several <article>s inside. Neither way is wrong; just try to stay consistent within your own project.
Deprecated Tags (Don’t Use)
| HTML Tag | Explanation |
|---|---|
<b> | Used to be used for bold text. See note below. |
<center> | Used to be allowed to center text. Use CSS instead. |
<dir> | Used to be used for a directory list. Use <ol> instead. |
<font> | Used to define font, color, and size. Use CSS instead. |
<frame> | <frameset>, <frame>, and <noframes> all deprecated. |
<i> | Used to be used for italics. See note below. |
<strike> | Used to be used for strikethrough. Use <del> or <s> instead. |
**Note: Instead of <b> or <i> for bold and italic text, it is better to use specific tags for specific purposes, then style each one in CSS to be bold, italic, underlined, or use different fonts or colors as needed.
<em>for emphasis (usually italicized)<strong>for important (usually bold)<mark>for highlighted text<cite>for the title of a work<dfn>for term definitions