YouTip-- Learning not just technology, but also dreams!
Bootstrap HTML Code Guide
Syntax
- Use two spaces instead of tabs -- this is the only way to guarantee consistent rendering across all environments.
- Nested elements should be indented once (i.e., two spaces).
- For attribute definitions, always use double quotes. Never use single quotes.
- Do not add a closing slash to self-closing elements -- the HTML5 specification clearly states this is optional.
- Do not omit optional closing tags (e.g.,
</li>or</body>).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>HTML5 doctype
Add a standard mode declaration to the first line of each HTML page to ensure consistent rendering in every browser.
Example:
<!DOCTYPE html>
<html>
<head>
</head>
</html>Language attribute
According to the HTML5 specification:
It is strongly recommended to specify the lang attribute for the html root element to set the correct language for the document. This helps speech synthesis tools determine the correct pronunciation, helps translation tools determine the rules for translation, and so on.
Here is a list of language codes.
<html lang="en">
<!-- ... -->
</html>IE compatibility mode
IE supports determining which version of IE should be used to render the current page through a specific <meta> tag. Unless there are strong special requirements, it is best to set it to edge mode, which instructs IE to use the latest mode it supports.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">Character encoding
By explicitly declaring the character encoding, you ensure the browser can quickly and easily determine how to render the page content. The benefit of this is that it avoids the use of character entity markers in HTML, making everything consistent with the document encoding (generally UTF-8 encoding).
<head>
<meta charset="UTF-8">
</head>Introducing CSS and JavaScript files
According to the HTML5 specification, it is generally not necessary to specify the type attribute when including CSS and JavaScript files, because text/css and text/javascript are their default values, respectively.
HTML5 spec links
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>Practicality is king
Strive to follow HTML standards and semantics, but never at the expense of practicality. Always use the fewest tags possible and maintain minimal complexity.
Attribute order
HTML attributes should be arranged in the following order to ensure code readability.
classid,namedata-*src,for,type,hreftitle,altaria-*,role
class is used to identify highly reusable components, so it should come first. id is used to identify specific components and should be used sparingly (e.g., for bookmarks within a page), so it comes second.
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">Boolean attributes
Boolean attributes do not need to be assigned a value when declared. The XHTML specification requires it, but the HTML5 specification does not.
For more information, refer to the WhatWG section on boolean attributes:
A boolean attribute is true if it is present, and false if it is absent.
If you must assign a value, refer to the WhatWG specification:
If the attribute is present, its value must either be the empty string or [...] the canonical name of the attribute, with no leading or trailing whitespace.
In short, you don't need to assign a value.
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>Reducing markup
When writing HTML code, try to avoid unnecessary parent elements. Often, this requires iteration and refactoring. Consider the following example:
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">JavaScript-generated markup
Markup generated by JavaScript makes content difficult to find, edit, and reduces performance. Avoid it when possible.