HTML Tutorial
HTML Forms
HTML Graphics
HTML Media
HTML API
HTML Style Guide
A consistent, clean, and properly formatted HTML code makes it easier for others to understand your code
Here are some tips for creating good HTML code.
Always Declare Document Type
The declare the document type is used in the first line of the document.
The correct document type for HTML is:
<!DOCTYPE html>
Use Lowercase Element Names
HTML enables mixing, using lowercase element names is recommended, because:
- Mixing uppercase and lowercase names appear to be bad.
- Lowercase names are usually used by the developers.
- Lowercase looks cleaner.
- Lowercase is easier to write.
Good:
<body>
<p>This is a paragraph.</p>
</body>
Bad:
<BODY>
<P>This is a paragraph.</P>
</BODY>
Close All HTML Elements
In HTML, all the elements are not necessary to be closed (for example the <p> element).
Closing all HTML elements are recommended as below, like this:
Good
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>
Bad:
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
Use Lowercase Attribute Names
HTML enables mixing, using lowercase element names is recommended, because:
- Mixing uppercase and lowercase names appear to be bad.
- Lowercase names are usually used by the developers.
- Lowercase looks cleaner.
- Lowercase is easier to write.
Good:
<a href=”https://www.mywebhostguru.com/tutorials/html-home”>Visit our HTML tutorial</a>
Bad:
<a HREF=” https://www.mywebhostguru.com/tutorials/html-home”>Visit our HTML tutorial</a>
Always Quote Attribute Values
HTML specifies attribute values without quotes.
Quoting attribute values is recommended, because:
- Developers quote attribute values.
- Quoted values are easier to read.
- If the value contains spaces, quotes must be used.
Good:
<table class=”striped”>
Bad:
<table class=striped>
Very bad:
This will not work, because the value contains spaces:
<table class=table striped>
Always Specify alt, width, and height for Images
Always specify the alt attribute for images. This attribute is important in case the image cannot be displayed due to some reason.
Also, always specifies the width and height of images as it reduces flickering because the browser can reserve space for the image before loading.
Good:
<img src=”html5.gif” alt=”HTML5″ style=”width:128px;height:128px”>
Bad:
<img src=”html5.gif”>
Spaces and Equal Signs
HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.
Good:
<link rel=”stylesheet” href=”styles.css”>
Bad:
<link rel = “stylesheet” href = “styles.css”>
Avoid Long Code Lines
When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.
Try to avoid too-long code lines.
Blank Lines and Indentation
Do not add blank lines, spaces, or indentations without a reason.
For readability, add blank lines to separate large or logical code blocks.
For readability, add two spaces of indentation. Do not use the tab key.
Good:
<body>
<h1>Famous Cities</h1
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Bad:
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2><p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>
Good Table Example:
<table>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
<tr>
<td>A</td>
<td>Description of A</td>
</tr>
<tr>
<td>B</td>
<td>Description of B</td>
</tr>
</table>
Good List Example:
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
Never Skip the <title> Element
The <title> element is a must in HTML
The contents of a page title must be specified for search engine optimization (SEO) view. Search engine algorithms use the page title to decide the order when listing pages in search results.
The <title> element:
- Specifies the title in the browser toolbar.
- Gives the title for the page when it is added to favorites.
- displays a title for the page in search engine results.
Therefore, it is important to make title as accurate and meaningful as possible:
<title>HTML Style Guide and Coding Conventions</title>
Omitting <html> and <body>?
An HTML page will validate without the <html> and <body> tags:
Page Title
This is a heading
This is a paragraph.
Always add the and tags.
Omitting can generate errors in older browsers.
Omitting and can also crash DOM and XML software.
Omitting <head>?
The HTMLtag can also be removed.
Browsers adds all elements before, to a defaultelement.
Page Title
This is a heading
This is a paragraph.
Close Empty HTML Elements?
In HTML, it is not necessary to close empty elements.
Allowed:
<meta charset=”utf-8″>
Also Allowed:
<meta charset=”utf-8″ />
Add the lang Attribute
Including the lang attribute inside the <html> tag, allows you to declare the language of the Web page. This is done with the purpose to assist search engines and browsers.
Meta Data
Both the language and the character encoding <meta charset=”charset”> must be specified as early as possible in an HTML document, which allows proper interpretation and correct search engine indexing:
Setting The Viewport
The viewport means the user’s visible area of a web page. It fluctuates with the device – it will be smaller on a mobile phone than on a computer screen.
The followingelement must be included in all the web pages:
The width=device-width part sets the width of the page to follow the screen width of the device.
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
HTML Comments
Short comments must be written in one line, like this
<!– This is a comment –>
Comments that span more than one line must be written in this format:
<!– This is a long comment example. –>
Using Style Sheets
Use the below syntax for linking to style sheets :
<link rel=”stylesheet” href=”styles.css”>
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
Place the opening bracket on the same line as the selector
- Before opening the bracket, use one space.
- Use two spaces of indentation.
- Use a semicolon after each property-value pair, along with the last.
- If the value contains spaces, use quotes around values.
- Place the closing bracket on a new line, without spaces.
Loading JavaScript in HTML
Accessing HTML Elements with JavaScript.
The “untidy” HTML code can result in JavaScript errors.