HTML - Basics
This guide contains basic syntax and tips how to write HTML markup.
HTML is the main markup language for creating web pages.
You should also check out CSS guide as it is closely linked with this guide.
Architecture
Separate structure, presentation and behaviour. HTML is structure, CSS/SASS is presentation and JS is behaviour. Do not use presentational HTML tags like b, i or u. Use a lot of classes and avoid the style attribute.
<!-- bad -->
<h1 style="font-size: 3em;">HTML sucks</h1>
<p>I’ve read about this on a few sites but now I’m sure:</p>
<p>
HTML is <b>stupid!!1</b>
<center>This is centered!</center>
</p>
<!-- good -->
<h1>My first CSS-only redesign</h1>
<p>
I’ve read about this on a few sites but today I’m actually
doing it: separating concerns and avoiding anything in the HTML of
my website that is presentational.
</p>
<p>
It’s <span class="highlight">awesome<span>!
</p>
Specify document type in HTML. Helps page receiver to render it correctly.
<!-- bad -->
<title>Test</title>
<article>This is only a test.</article>
<!-- good -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<article>This is only a test.</article>
</body>
Markup Layout
Prefer indention of 4 spaces. Any indention is fine but be consistent within a project. Always consider using indention of the framework or libraries you are using. Never mix spaces and tabs.
Do not limit lines to 80 characters. HTML element with a few attributes and complex CSS properties can easily exceed 80 characters and splitting them may cause troubles in some environments. But keep lines as short as possible.
<!-- bad -->
<div class="container"><div class="all-grps"><div class="grp">Name</div></div>
<!-- good -->
<div class="container">
<div class="all-grps">
<div class="grp">
Name
</div>
</div>
</div>
Remove trailing space. Use non-breaking space in HTML if you require end of line space. Helps merging by version control software and someone in the team will remove them anyway.
<!-- bad-->
<div class="box">
What space, I see no space?_
</div>
<!-- good -->
<div class="box">
Ah, that is better.
</div>
Prefer double quotes " in HTML. Prefer single quotes ' in server language, CSS, SASS and JavaScript. Helps writing inline HTML at web server and in JavaScript.
<!-- bad -->
<a class='maia-button maia-button-secondary'>Sign in</a>
<!-- good -->
<a class="maia-button maia-button-secondary">Sign in</a>
Define elements on separate lines and indent the children. Easier to read. But always consider what way is the most readable.
<!-- good -->
<ul>
<li>Moe</li>
<li>Larry</li>
<li>Curly</li>
</ul>
<table>
<thead>
<tr>
<th scope="col">Income</th>
<th scope="col">Taxes</th>
</tr>
</thead>
<tbody>
<tr>
<td>$ 5.00</td>
<td>$ 4.50</td>
</tr>
</tbody>
</table>
<blockquote>
<p>Space, the final frontier.</p>
</blockquote>
Do not close void elements. Void elements are e.g. br, col, hr, img, input, link, meta. For consistency.
<!-- bad -->
<br />
<input type="text" />
<!-- good -->
<br>
<input type="text">
Naming
Use dashed lower case to name classes, identifiers and other values. Dashed lower case is the most widely used standard and helps to separate these names from other variables in JavaScript and server language so they are more easy to search.
<!-- bad -->
<div lc="main_header"></div>
<div id="maincontent"></div>
<div id="mainFooter"></div>
<!-- good -->
<div id="main-header"></div>
<div id="main-content"></div>
<div id="main-footer"></div>
Use only lowercase characters in tag and attributes names. It is the current standard and uppercase characters look really unprofessional.
<!-- bad -->
<IMG SRC="google.png" ALT="Google" DATA-GOZILLA="1">
<!-- good -->
<img src="google.png" alt="Google" data-gozilla="1">
Prefix custom element attributes with data-. Custom attribute names should follow normal attribute naming format.
<!-- bad -->
<div gozilla-number="1">
<!-- good -->
<div data-gozilla-number="1">
Usage
Use elements for what they are meant for. Every web developers should go through all possible elements to know what is in their arsenal.
<!-- bad -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- good -->
<a href="/recommendations">All recommendations</a>
Title element should be unique for every page. Repetitive part should come last so visitor can separate multiple open pages in different tabs. Unique part should be as concrete as possible.
<!-- bad -->
ruk.si - Blog
ruk.si - G
<!-- good -->
10 reasons why HTML programmers suck - ruk.si
Summer Photos - ruk.si
Anchor element should have unique content specifying where it leads. If link text contains a words like "click" or "press", rename them.
<!-- bad -->
<a href="/blog/how-to-do-writing">click here</a>
<!-- good -->
<a href="/blog/how-to-do-writing">How To Do Writing</a>
Avoid entity references if possible to present in UTF-8. There are few exception like <, > and .
<!-- bad -->
<p>
The currency symbol for the Euro is “&eur;”.
</p>
<!-- good -->
<p>
The currency symbol for the Euro is “€”.
</p>
Omit type attribute from style and script elements for default types. Defaults are text/css and text/javascript.
<!-- bad -->
<link rel="stylesheet" href="//www.google.com/css/m.css" type="text/css">
<script src="//www.google.com/a.js" type="text/javascript"></script>
<!-- good -->
<link rel="stylesheet" href="//www.google.com/css/m.css">
<script src="//www.google.com/a.js"></script>
Use HTML templating. Helps you to get into right mindset that HTML files are not a place for programming logic. You should not mix programming logic and website structure. Yes, especially in PHP.
# good HTML templating libraries, I personally prefer Mustache
Mustache (Multiple languages)
Handlebars (JavaScript)
Jade (Node.js)
Smarty (PHP)
Image presentation depends on their purpose. Images that are part of the layout should be background images. Images that are part of the content should be img elements. Include alternative text for images. Include text content for background images and move the text out of the way with CSS.
<style>
.logo {
background: url(/img/logo.png);
display: block;
height: 100px;
width: 200px;
text-indent: -9999px; /* move text away in render */
}
</style>
<a href="#" class="logo">What Test Is In Logo</a>
<img src="product.jpg" alt="Tennis Shoe Extreme">