Skip to content

Latest commit

 

History

History
173 lines (120 loc) · 3.65 KB

HTML.md

File metadata and controls

173 lines (120 loc) · 3.65 KB

Resource HTML Style Guide

The "Resource Way" of writing good Hypertext Markup.

Table of Contents

  1. Document
  2. Tags
  3. Semantics
  4. Accessibility
  5. Separation Of Concerns

Document

Use the HTML5 doctype.

<!DOCTYPE html>

Define explicit character encoding to ensure proper rendering of content.

<meta charset="utf-8">

Nest each tag.

<!-- bad -->
<ul>
	<li><a href="...">Lorem ipsum</a></li>
</ul>

<!-- good -->
<ul>
	<li>
		<a href="...">Lorem ipsum</a>
	</li>
</ul>

Use tabs to indent.

<!-- bad -->
<div>
••<div>Lorem ipsum</div>
</div>

<!-- good -->
<div>
	<div>Lorem ipsum</div>
</div>

Use proper settings for the viewport.

<meta name="viewport" content="width=device-width, initial-scale=1">

Tags

Use lowercase for tags names and attributes.

<!-- bad -->
<img SRC="images/walnut.jpg" ALT="Walnut tree">

<!-- good -->
<img src="images/walnut.jpg" alt="Walnut tree">

Use double quotes for attribute values.

<!-- bad -->
<input type=text>

<!-- good -->
<input type="text">

Avoid trailing slashes on void elements (<br>, <input>, <img>).

Don’t omit optional closing tags.

Avoid type attributes on script and stylesheet includes - text/css and text/javascript are interpreted automatically.

Don't include values for boolean attributes.

<!-- bad -->
<input type="checkbox" value="1" checked="checked">

<!-- good -->
<input type="checkbox" value="1" checked>

Semantics

Use semantic markup.

<!-- bad -->
<div>Heading</div>
<div>Paragraph copy</div>

<!-- good -->
<h1>Heading</h1>
<p>Paragraph copy</p>

Use <span> and <div> appropriately. Spans are for used for in-line styles - divs are used to build (block-level) structure.

Accessibility

Declare a language attribute on the opening <html> tag.

<html lang="en">

Use title and alt attributes on images.

<img src="images/maple.jpg" alt="Maple tree" title="Maple tree">

Use aria attributes.

<header aria-role="banner">
	<nav aria-role="navigation"></nav>
</header>

Separation of Concerns

Avoid obtrusive JavaScript. JavaScript should live in .js files. This helps keep a clear separation of concerns and aids in code scalability and maintainability.

<!-- bad -->
<button onclick="submit()">Click Me!</button>

Don't rely on markup for visual formatting. (e.g. <br>, <b>, <i>).

<!-- bad -->
<p>
	Walnut heartwood is a heavy, hard, open-grained hardwood.
	<br>
	Freshly cut live wood may be Dijon-mustard colour, darkening to brown over a few days.
</p>

<!-- good -->
<p>
	Walnut heartwood is a heavy, hard, open-grained hardwood.
</p>
<p>
	Freshly cut live wood may be Dijon-mustard colour, darkening to brown over a few days.
</p>

It's OK to use <strong> and <em> to provide semantic meaning to inline text, but ensure that the appropriate styles are defined in the stylesheet. Do not rely on <strong> or <em> for visual formatting.