HTML Style Guide

There’s an element that’s used to contain the other markup for an HTML document. It’s also known as the “root” element because it’s the parent of the other HTML elements and the content of a page.

The Best HTML and HTML5 Tutorials

An HTML document has two aspects to it. It contains structured information (Markup), and text-links (HyperText) to other documents. We structure our pages using HTML elements. They are constructs of the language providing structure and meaning in our document for the browser and the element links to other documents across the internet.

The internet was originally created to store and present static (unchanging) documents. The aspects of HTML discussed above were seen perfectly in these documents which lacked all design and styling. They presented structured information that contained links to other documents.

HTML5 is the latest version, or specification, of HTML. The World Wide Web Consortium (W3C) is the organization responsible for developing standards for the World Wide Web, including those for HTML. As web pages and web applications grow more complex, W3C updates HTML’s standards.

HTML5 introduces a host of semantic elements. Though we discussed how HTML helped to provided meaning to our document, it wasn’t until HTML5s’ introduction of semantic elements that its potential was realized.

A simple example of HTML Document

     
My First Heading
 
My first paragraph.
  

!DOCTYPE html: Defines this document to be HTML5

html: The root element of an HTML page

head: The element contains meta information about the document

title: The element specifies a title for the document

body: The element contains the visible page content

h1: The element defines a large heading

p: The element defines a paragraph

Tutorials for starting with HTML and HTML5

The best place to start learning HTML is with freeCodeCamp’s 2-hour intro to HTML tutorial.

Then, if you’re feeling more adventurous, we have an entire 12-hour course that covers HTML, HTML5, and CSS in detail.

Page Structure

To create your pages in HTML , you need to know how to structure a page in HTML . Basically, the structuring of a page follows the order below:

1 – The statement must always be the first to appear on an HTML page and tells the browser which version of the language is being used. In this case, we are working with HTML5 .

2 – The and tags tell the web browser where the HTML code starts and ends.

3 – The and tags contains information about the web site, for example: style, meta-tags, scripts, etc…

4 – The tags tell the browser what the page title is. The title can be seen by identifying the tab in your internet browser. The text that is defined between these tags is also the text that is used as title by the search engines when they present the pages in the results of a search.

5 – Between the and tags the page content is placed, which is what is displayed in the browser.

Changes in HTML5

Introduction of semantic tags

Instead of using for every other container, there are several semantic (these tags help screenreaders which are used by visually impaired) tags such as . So it is advisable to use these tags instead of the generic .

HTML Elements

Elements are the building blocks of HTML that describe the structure and content of a web page. They are the “Markup” part of HyperText Markup Language (HTML).

HTML syntax uses the angle brackets (””) to hold the name of an HTML element. Elements usually have an opening tag and a closing tag, and give information about the content they contain. The difference between the two is that the closing tag has a forward slash.

Here’s an example using the p element (

) to tell the browser that a group of text is a paragraph:

This is a paragraph.

Opening and closing tags should match, otherwise the browser may display content in an unexpected way.

Self-closing Elements

Some HTML elements are self-closing, meaning they don’t have a separate closing tag. Self-closing elements typically insert something into your document.

An example is the br element (
), which inserts a line break in text. Formerly, self-closing tags had the forward slash inside them (
), however, HTML5 specification no longer requires this.

HTML Element Functionality

There are many available HTML elements. Here’s a list of some of the functions they perform:

• give information about the web page itself (the metadata)
• structure the content of the page into sections
• embed images, videos, audio clips, or other multimedia
• create lists, tables, and forms
• give more information about certain text content
• link to stylesheets which have rules about how the browser should display the page
• add scripts to make a page more interactive and dynamic

Nesting HTML Elements

You can nest elements within other elements in an HTML document. This helps define the structure of the page. Just make sure the tags close from the inside-most element first.

Correct:

This is a paragraph that contains a span element.

Incorrect:

This is a paragraph that contains a span element.

Block-level and Inline Elements

Elements come in two general categories, known as block-level and inline. Block-level elements automatically start on a new line while inline elements sit within surrounding content.

Elements that help structure the page into sections, such as a navigation bar, headings, and paragraphs, are typically block-level elements. Elements that insert or give more information about content are generally inline, such as links or images.

The HTML Element

There’s an element that’s used to contain the other markup for an HTML document. It’s also known as the “root” element because it’s the parent of the other HTML elements and the content of a page.

Here’s an example of a page with a head element, a body element, and one paragraph:

   
I'm a paragraph
  

The HEAD Element

This is the container for processing information and metadata for an HTML document.

The BODY Element

This is a container for the displayable content of an HTML document.

The P Element

Creates a paragraph, perhaps the most common block level element.

The A(Link) Element

Creates a hyperlink to direct visitors to another page or resource.

Images in HTML

You can define images by using the tag. It does not have a closing tag since it can contain only attributes. To insert an image you define the source and an alternative text which is displayed when the image can not be rendered.

src – This attribute provides the url to the image present either on your P.C./Laptop or to be included from some other website. Remember the link provided should not be broken otherwise the image will not be produced on your webpage.

alt – This attribute is used to overcome the problem of broken image or incapability of your browser to produce image on webpage. This attribute, as the name suggests, provides an “Alternative” to an image which is some ‘TEXT’ describing the image.

Example

To define height and width of an image you can use the height and width attribute:

You can also define border thickness (0 means no border):

Align an image:

You are also able to use styles within a style attribute:

How to use links in HTML

Links are found in nearly all web pages. Links allow users to click their way from page to page.

HTML links are hyperlinks. You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. It can be an image or any other HTML element.

In HTML, links are defined with the tag:

The link text is the visible part (Visit our site for tutorials).

Clicking on the link text will send you to the specified address.

How to Use Lists in HTML

Lists are used to specify a set of consecutive items or related information in a well formed and semantic way, such as a list of ingredients or a list of procedural steps.

HTML markup has three different types of lists – ordered, unordered and description lists.

Ordered Lists

tag. Each list item is surrounded with
tag.

Code

1. Mix ingredients
2. Bake in oven for an hour
3. Allow to stand for ten minutes

Example

1. Mix ingredients
2. Bake in oven for an hour
3. Allow to stand for ten minutes

Unordered Lists

tag. Each list item is surrounded with
tag.

Code

• Chocolate Cake
• Black Forest Cake
• Pineapple Cake

Example

• Chocolate Cake
• Black Forest Cake
• Pineapple Cake

Description Lists

A description list is used to specify a list of terms and their descriptions. This list is created with tag. Each list item is surrounded with tag.

Code

 
Bread
 
A baked food made of flour.
 
Coffee
 
A drink made from roasted coffee beans.
 

Output

Bread A baked food made of flour. Coffee A drink made from roasted coffee beans.

Styling List

You can also control the style of the list. You can use list-style property of lists. Your list can be bullets, squares, in Roman numerals, or can be images if you want.

list-style property is shorthand for list-style-type , list-style-position , list-style-image .

HTML Style Guide

A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.

Here are some guidelines and tips for creating good HTML code.

Always Declare Document Type

Always declare the document type as the first line in your document.

The correct document type for HTML is:

Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to write

Good:

Bad:

Close All HTML Elements

In HTML, you do not have to close all elements (for example the

element).

However, we strongly recommend closing all HTML elements, like this:

Good:

Bad:

This is a paragraph.

This is a paragraph.

Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute names.

However, we recommend using lowercase attribute names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to write

Good:

Bad:

Always Quote Attribute Values

HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

• Developers normally quote attribute values
• Quoted values are easier to read
• You MUST use quotes if the value contains spaces

Good:

This will not work, because the value contains spaces:

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Good:

Bad:

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Good:

Bad:

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:

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

Bad:

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

Good Table Example:

Name	Description
A	Description of A
B	Description of B

Good List Example:

Never Skip the Element

The element is required in HTML.

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results

So, try to make the title as accurate and meaningful as possible:

Omitting and ?

An HTML page will validate without the and tags:

Example

This is a heading

This is a paragraph.

However, we strongly recommend to always add the and tags!

Omitting can produce errors in older browsers.

Omitting and can also crash DOM and XML software.

Omitting ?

The HTML tag can also be omitted.

Browsers will add all elements before , to a default element.

Example

This is a heading

This is a paragraph.

However, we recommend using the tag.

Close Empty HTML Elements?

In HTML, it is optional to close empty elements.

Allowed:

Also Allowed:

If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.

Add the lang Attribute

You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

Example

This is a heading

This is a paragraph.

Meta Data

To ensure proper interpretation and correct search engine indexing, both the language and the character encoding charset“> should be defined as early as possible in an HTML document:

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device – it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

HTML5 Introduction

HTML5 is not only a new version of HTML language enriched with new elements and attributes, but a set of technologies for building more powerful and diverse web sites and applications, that support multimedia, interact with software interfaces, etc.

HTML5 Benefits

The main benefits of HTML5 are listed below:

• HTML5 is supported by all modern browsers.
• HTML5 is more device friendly. It is easy for use.
• HTML5 can help creating attractive websites with CSS, JavaScript, etc.
• HTML5 supports SVG (Scalable Vector Graphics – Wikipedia) and other virtual graphics. In earlier versions, the use of vector graphics was possible only in combination with such technologies as Flash, VML, etc.
• The code becomes cleaner mainly due to replacing div tags with Semantic elements, which help better structure content of the web page and improve readability.
• HTML5 supports geolocation, which makes it possible to determine the users’ location.
• The new standards were specified for playing multimedia (animation, audio, video) directly in the browser without having to install additional plug-ins.
• Support for web storage introduced in HTML5 makes it possible to store large amounts of application data locally, without affecting your web application’s performance. The data in local storage will persist even when the user’s browser is closed and reopened.

Disadvantages of HTML5:

• It is supported only by modern browsers.
• You must write long codes which is time-consuming.

HTML5 Content Models

In HTML5, the content of a web page can be divided into semantic groups, which describe its content. These groups are called content models. Each of these models describes the type of elements it contains. The content model can contain text and child elements. The element can belong to one or more content categories.

HTML5 content models are listed below:

• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content
• Palpable content

Content models can overlap, and it means that elements are belonging to several categories in the meantime. For example, sectioning, heading, phrasing, embedded, interactive, and a part of metadata content refer to flow content. Metadata and interactive content in certain cases may refer to phrasing content.

There are also elements that are used for specific purposes, for example, for defining forms. Such kind of elements does not refer to any of the content mentioned above models.

Metadata content

Elements belonging to the metadata content category contain information about HTML documents, set up links to other resources, define the presentation, or the behavior of it. These elements are not displayed on the web page.

The elements of content model category are: , , , , , , and .

Example of elements belonging to the metadata content:

  8">  

Flow content

Elements belonging to the flow content category are typically those used in the body of an HTML document (enclosed inside the tags).

Example of elements belonging to the flow content:

html> html> head> title>Title of the document title> head> body> p>abbr title="Universal Resource Locator">URL abbr> - This is a special form of designating an individual resource address on the Internet p> hr/> div> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> hr/> ol type="A"> li>Coca-Cola li> li>Ice Tea li> li>Fanta li> ol> div> body> html>

The following elements belong to the flow content, but only if a specific condition is met:

Sectioning content

Elements belonging to the sectioning content are those creating independent sections in the structure of an HTML document (for example, header, footer, etc.) Note that each section could have its heading and outline.

The elements of sectioning content model are: , , and .

Example of elements belonging to the sectioning content:

html> html> head> title>Title of the document title> head> body> section> h1>Article about flower h1> article> h2>Roses h2> p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration. p> article> section> body> html>

Heading content

Elements belonging to the sectioning content model create a section in the current outline that defines the scope of elements, elements, and heading content.

The elements of heading content are: , , , , , and .

Example of elements belonging to the heading content:

html> html> head> title>Title of the document title> head> body> hgroup> h1>Welcome to W3Docs h1> h2>Here you can learn HTML Bases. h2> h3>Some text or subtitle.h3> hgroup> body> html>

Phrasing Content

The elements belonging to phrasing content define and mark-up the text. They are , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and .

Example of elements belonging to the phrasing content:

html> html> head> title>Title of the document title> head> body> h1>Example with HTML tags h1> p> Here is some text sub> with the sup tag sub>. p> p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis . p> p>Reference site about Lorem Ipsum,sup> giving information on its origins sup>, as well as a random Lipsum generator. p> p>Learn HyperText markup language (HTML) on mark>W3Docs.com mark> website. p> p>We’ve used <strong> tag to highlight strong> this important part of the text strong>. p> p>The important part of the text is highlighted by the em> in italic em>. p> body> html>

The following elements belong to the phrasing content, but only if a specific condition is met:

Embedded content

Embedded content imports another resource or inserts content from another mark-up language or namespace into the document. This content model includes the following elements: , , , , , , , , , and .

Examples of elements belonging to the embedded content:

html> html> head> title>Title of the document title> head> body> h1>Examples of the HTML elements: h1> h2>Example of the HTML<canvas> tag: h2> canvas id="canvasExample" width="400" height="200"> canvas> script> var canvas = document.getElementById('canvasExample'); var context = canvas.getContext('2d'); context.font = '30pt Calibri'; context.fillStyle = '#1c87c9'; context.fillText('Canvas Example !', 50, 100); script> h2>Example of the HTML<img> tag: h2> img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/> h2>Example of the HTML<svg> tag: h2> svg width="350" height="150"> ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" /> svg> br/> body> html>

Interactive content

Interactive content model includes elements specifically designed for user interaction. They are (if href attribute is specified), , , , , , , и .

Example of elements belonging to the interactive content:

html> html> head> title>Title of the document title> head> body> h1>Example of Interactive content h1> form> select> option value="books">Books option> option value="html">HTML option> option value="css">CSS option> option value="php">PHP option> option value="js">JavaScript option> select> br>br> textarea name="comment" rows="12" cols="35">Send your comments to the author. textarea> br> button type="button">Send button> form> body> html>

The following elements belong to the interactive content model, but only if a specific condition met:

Palpable content

Content is palpable when it’s neither empty or hidden; this is the content that is rendered and is substantive. Elements whose model is flow content or phrasing content should have at least one node which is palpable, and which has no attribute whose value is set to hidden.

This is not a required condition; there are cases when the element can be empty. For example, it can be filled after an external script executed.

The secondary content categories

The secondary content categories are those that support scripts. The script-supporting elements don’t directly contribute to the rendered output of a document, but support scripts, either by containing or specifying script code directly, or by specifying data that will be used by scripts. The script-supporting elements are and . The , , , , , and elements are called sectioning roots. Elements belonging to transparent content model are , , , , , , and . These elements inherit the type of the parent element and can contain content allowed in their parent element.