HTML Syntax: Elements, Attributes, Comments, and Document Structure

HTML

HTML syntax defines how elements, tags, attributes, text, and comments are written in an HTML document. Most elements use a start tag and an end tag, attributes belong in the start tag, and nested elements must close in the reverse order in which they were opened.

Basic syntax of HTML elements and tags

An HTML element is commonly written with a start tag, content, and an end tag.

<tagname>Content</tagname>

<tagname> is the start tag that marks where the element begins.
Content is the text or other content contained by the element.
</tagname> is the end tag that marks where the element ends.

The following code creates one p element. The start tag is <p>, the content is HTML syntax, and the end tag is </p>.

<p>HTML syntax</p>

Tag names in HTML syntax are ASCII case-insensitive. Lowercase names are nevertheless the usual convention because they keep the markup consistent and easy to read.

Void elements do not have end tags

Not every HTML element uses an end tag. A void element cannot contain content and must not have an end tag.

<br>
<img src="image.webp" alt="Sunrise over a blue ocean">
<input type="text" name="username">
<meta charset="utf-8">

br, img, input, and meta are common void elements. Do not write nonexistent end tags such as </br> or </img>.

A trailing slash, as in <br />, is permitted in an HTML start tag for a void element, but it has no self-closing function in HTML and is unnecessary.

How to write HTML attributes

Attributes configure an element or provide additional information. They are written inside the start tag, with the attribute name and value separated by an equals sign (=).

<tagname attribute="value">Content</tagname>

For example, this code gives a blockquote element an id attribute whose value is quote-01.

<blockquote id="quote-01">
  Quoted text
</blockquote>

HTML supports double-quoted, single-quoted, and—in restricted cases—unquoted attribute values. Consistently using double quotes is a practical convention because spaces and several special characters are not allowed in unquoted values.

<p style="color: red;">Red text</p>

In the following incorrect example, the space ends the unquoted style value after color:. The browser therefore does not interpret the attribute as intended.

<p style=color: red;>Red text</p>

Boolean attributes such as disabled, checked, and required are true when present. They can be written using the attribute name alone.

<input type="text" disabled>

Close nested elements in the correct order

When one element is placed inside another, close the inner element before the outer element. The following markup is correctly nested because the strong element is entirely contained by the p element.

<p>This sentence contains <strong>important text</strong>.</p>

The next example is incorrectly nested because the ranges of the two elements overlap.

<p>This sentence contains <strong>important text</p></strong>

A browser may repair malformed markup while parsing it, but the resulting Document Object Model (DOM) can differ from the structure you intended. Do not rely on browser error recovery as a substitute for valid markup.

How to write HTML comments

An HTML comment begins with . Comments are not displayed as page content, so they can document the purpose of markup or leave a temporary note for developers.

<!-- This comment is not displayed on the page. -->

A comment may span multiple lines.

<!--
  This is a multiline
  HTML comment.
-->

Do not nest one HTML comment inside another. Nested comment delimiters can cause the comment to end somewhere other than where you expect.

<!--
  <!-- Do not nest comments. -->
-->

A comment is hidden from the rendered page, but it remains visible in the page source. Never place passwords, API keys, personal information, or other secrets in HTML comments.

Basic HTML document structure

The following example shows a minimal, practical structure for an English-language HTML document.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document title</title>
  </head>
  <body>
    <h1>Page heading</h1>
    <p>Page content goes here.</p>
  </body>
</html>

<!doctype html> selects the standards-oriented rendering mode used for modern HTML documents.
<html lang="en"> is the document element, and lang="en" identifies English as the primary language.
<head> contains document metadata such as character encoding, viewport configuration, and the document title.
<body> contains the headings, paragraphs, images, links, and other content presented on the page.

How to check HTML syntax

Browsers attempt to display a document even when its markup contains errors. A page appearing on screen therefore does not prove that its syntax is correct. Review the nesting and attributes, and use the Nu Html Checker to identify markup errors and warnings.

For the precise rules covering tags, attributes, void elements, and comments, consult the HTML syntax section of the WHATWG Living Standard.

HTML syntax checklist

Include <!doctype html> at the start of a complete HTML document.
Use lowercase tag and attribute names consistently.
Quote attribute values, preferably with double quotes for consistency.
Do not add end tags to void elements.
Close nested elements from the inside out.
Use lang to identify the document language.
Keep confidential data out of comments and page source.
Validate the final document instead of relying only on its visual appearance.

HTML