HTML Syntax | Rules for Writing HTML Markup

Understanding HTML Syntax

HTML syntax refers to the rules and patterns used to write HTML markup so that elements, attributes, and content are structured correctly within a document.

HTML is designed to be relatively forgiving, and browsers can often display a webpage even when the markup contains mistakes. Learning and following proper HTML syntax, however, makes your documents easier to understand, maintain, troubleshoot, and reliably interpret.

Basic HTML Syntax

Most HTML elements are written using a start tag, some content, and an end tag. Together, these parts form an HTML element.

A simple paragraph element looks like this:

<p>This is a paragraph.</p>

In this example,  is the start tag, This is a paragraph. is the content, and  is the end tag.

<p>This is a paragraph.</p>
 ↑           ↑           ↑
start     content       end
 tag                    tag

This basic pattern is used by many HTML elements. Some elements follow different syntax rules, which you will learn throughout the HTML tutorials.

Start & End Tags

A start tag begins an HTML element and is written by placing the element name between the less-than and greater-than characters.

<p>

An end tag is similar but includes a forward slash before the element name:

</p>

For elements that require an end tag, the end tag identifies where the element finishes.

<h1>Page Heading</h1>

<p>Paragraph of text.</p>

Leaving out a required end tag can change how the browser interprets the markup and may produce a document structure different from what you intended.

Element Content

The information between an element's start and end tags is its content. Depending on the element, the content may include text, other HTML elements, or a combination of both.

An element containing text might look like this:

<p>Learning HTML is fun.</p>

Elements can also contain other elements:

<p>Learning <strong>HTML</strong> is fun.</p>

Here, the strong element is part of the content of the p element. HTML elements that contain other elements create the nested structure used to organize a webpage.

HTML Attributes

Attributes provide additional information about an HTML element or affect how the element behaves. Attributes are normally written inside the start tag after the element name.

<a href="about.html">About Us</a>

In this example, href is the attribute name and about.html is its value.

An element can contain more than one attribute. Separate attributes with whitespace:

<a href="about.html" title="About Our Company">About Us</a>

You will learn much more about attributes, their values, and the different types of attributes in the upcoming Attributes and Global Attributes tutorials.

Nesting HTML

HTML elements are frequently placed inside other HTML elements. This is called nesting, and it creates relationships between the elements within the document.

When elements are nested, they should be arranged so that an inner element is completely contained within its outer element.

Correct:

<p>This text is <strong>important</strong>.</p>

Incorrect:

<p>This text is <strong>important.</p></strong>

In the incorrect example, the elements overlap because the p element is closed before the nested strong element. Properly nested elements should close in the reverse order in which they were opened.

You will explore parent, child, ancestor, descendant, and sibling relationships in greater detail in the Nesting Elements tutorial.

Empty Elements

Not every HTML element contains content or uses an end tag. Elements that cannot have child nodes are called void elements. You may also encounter the informal term empty elements when learning HTML.

For example, the br element creates a line break:

<br>

The img element is another example:

<img src="photo.jpg" alt="Mountain landscape">

Void elements do not use an end tag such as  or </img>. In HTML, a trailing slash is also unnecessary, so these tutorials use   rather than  .

The Empty Elements tutorial later in this section explains these elements and their syntax in greater detail.

Uppercase & Lowercase HTML

HTML element and attribute names are ASCII case-insensitive, so browsers generally recognize them regardless of whether uppercase or lowercase letters are used.

For example, you may encounter markup written like this:

<P>This is a paragraph.</P>

However, lowercase markup is the standard convention for modern HTML and makes source code more consistent and easier to read. These tutorials use lowercase element and attribute names throughout:

<p class="intro">This is a paragraph.</p>

Attribute Quotation Marks

Attribute values can sometimes be written without quotation marks, but quoting values consistently makes markup easier to read and avoids problems when a value contains spaces or certain special characters.

These tutorials use double quotation marks around attribute values:

<a href="about.html" title="About Us">About Us</a>

A value containing spaces must be quoted. For example:

<p class="important message">Important information.</p>

Using double quotation marks consistently also makes it easier for someone else working with your markup to recognize attribute names and values quickly.

Common Syntax Mistakes

Browsers are designed to recover from many HTML errors, which means incorrect markup may still appear to work. This does not make the markup correct, and errors can sometimes cause the browser to create a document structure you did not intend.

Common syntax mistakes include:

Forgetting a required end tag.
Incorrectly nesting elements.
Misspelling an element or attribute name.
Forgetting whitespace between attributes.
Leaving out quotation marks when an attribute value requires them.
Using an end tag with a void element.

Writing clean, consistent markup and reviewing the structure of your document makes these problems easier to identify and correct.

HTML Syntax Best Practices

Following consistent syntax and formatting conventions makes HTML easier for you and other people to read, edit, troubleshoot, and maintain.

Use lowercase element and attribute names.
Use double quotation marks around attribute values.
Include required end tags.
Nest elements correctly.
Indent nested markup consistently.
Keep elements at the same nesting level aligned.
Use whitespace between attributes.
Do not add end tags to void elements.
Use consistent formatting throughout the project.

Some of these conventions are not required for a browser to display a webpage, but using them consistently produces source code that is much easier for people to understand and maintain.

Summary

HTML syntax defines the basic rules and patterns used to write HTML markup. Many elements use a start tag, content, and an end tag, while attributes provide additional information within start tags and void elements use their own syntax without end tags.

Good HTML also depends on correctly nesting elements and using consistent formatting. Although browsers can recover from many syntax mistakes, learning to write clean and organized markup from the beginning will make your webpages easier to understand, troubleshoot, edit, and maintain.