HTML Syntax Reference

HTML Syntax


  1. Definitions
  2. Elements
  3. Syntax Errors
  4. Code Style


HTML (Hyptertext Markup Language) is the primary language used to code web page content.

Hypertext is text that has references, or links, to other content a user can access. Figure 1 shows an example of linked documents.

Markup Language refers to the labels and rules used to identify links and other parts of text documents. The HTML language uses hidden labels called tags. They are created with angled brackets, as in the following example:

    <h1>Sample HTML Code</h1>
        <li>h1: headings element</l1>
        <li>ul: bulleted list element</l1>
        <li>li: list item element</l1>

Semantics is the study of meaning. HTML should only be used to mark up the sementics of web pages. HTML elements identify document parts and structures so web browsers and search engines can understand them (Figure 2).

The HTML language is relatively small, and is limited to marking up document parts that that require graphic design or user interactions. Web developers use other languages to code those design styles and interactive features. To organize their work, developers follow a principle called separation of concerns. Code for each type of task is placed in different locations — usually separate text files — where they can be easily found and reused (Figure 3).

CSS is the language used for applying design styles and specifying how each document part should look. JavaScript is the language used to code interative features.

The current version of the HTML language is HTML5. Version 5 removed and redefined old elements that did not have a semantic use, and added some new ones. The HTML5 specification lists all allowed elements and rules for using them.

The term HTML5 also more broadly refers other modern web browser innovations. For instance, built-in JavaScript APIs allow animations and desktop-style applications to run in the browser without plug-ins (Figure 4).

View   56 comments


HTML documents are marked up using elements. An HTML Element identifies a specific part of a document, and consists of content surrounded by an opening tag and a closing tag. The tags are interpreted by programs like web browsers and search engines, and are hidden from the user's view.

Example of HTML Element
<p lang="en">
   Hello World!

Opening Tag

Elements begin with an Opening Tag. The opening tag starts with a left-angled bracket, and is immediately followed by the name of the element being used. The opening tag may optionally include one or more attributes, and ends with a right-angled bracket.

Opening Tag


Attributes are optional name-value pairs used to define additional properties for the element. The Attribute Name is followed by an equal sign and then its Attribute Value, usually enclosed in double quotations.

Opening Tag with Attribute
<p lang="en">


The content inside an element may include text, character references, comments, and nested elements. SVG graphic definitions and MathML formulas are also allowed, but are rarely used due to poor browser support.

   Hello World!

Closing Tag

Elements end with a Closing Tag. The closing tag starts with a left-angled bracket, and is followed by a forward slash, the element name, and a right-angled bracket.

Closing Tag

Syntax Errors

A validator can be used to check if HTML syntax is written correctly.

Most errors are caused by simple typos or incorrect punctuation. Here are some common mistakes:

Unexpected Markup

The element name does not exist in the specs, or is used where it is not allowed. The following example is wrong because "highlight" is not an element in the HTML5 specification.

Unexpected Markup Error - how would you fix this?
<highlight>Text Sample</highlight>

Search the web for the real HTML5 element used to highlight text. You should find the name of the element is mark, not highlight.

Unclosed Elements

Required closing tags are missing, or typed incorrectly. In this example, what should be </p> is written with the closing slash in the wrong place.

Unclosed Element Error - how would you fix this?
<p>Text Sample<p/>

The example can be fixed by moving the closing slash from after the letter p to before the letter p.

Misnested Tags

Elements are not closed in reverse order. The first element opened should be the last element closed. The closing tags are reversed in the following example.

Misnested Tag Error - how would you fix this?
<p><strong>Text Sample</p></strong>

Swap the order of the closing paragraph and strong tags to fix this example.

Improper Attributes

The attribute name does not exist in the HTML5 specifications

Misnested Tag Error - how would you fix this?
<p language="en">Text Sample</p>

Search the web for the real HTML5 attribute used to specify the language. It is lang, not language.

Code Style

The rules for writing HTML5 are very flexible. The creators of the HTML5 language assumed the average person won’t learn a lot of technical rules.

  • Browsers ignore extra whitespace characters, and multiple spaces are reduced to one on the screen.
  • Most element and attributes names can be written in either uppercase or lowercase letters.
  • Attribute values can be written with single quotes, double quotes, and sometimes no quotes at all
  • The closing tag is optional for many elements.

The result can be valid markup that looks like a complete mess:

          <BLOCKQUOTE>    <p LANG= en>This is a     blockquote
paragraph demo <BR>Line 
            2. This is the second line of the

Since unorganized, inconsistent code can be hard to read and maintain, most recommend following a style guide with consistent rules for writing code. Different guides have different rules. Here is a common style guide:

  • Block-level elements (sections that begin on a new line in the browser) start on a new line in the code
  • Nested block-level elements should be indented.
  • All code including HTML5 element and attribute names should be lowercase.
  • Attribute values should use double quotes.
  • Optional closing tags should not be omitted.
  • Character entity references shouldn’t be used unless they are escaping the HTML characters noted above.
   <p lang="en">This is a blockquote & paragraph demo.<br>
   Line 2. This is the second line of the quote </p>

A code styling tool can be used to quickly fix formatting and style issues in code. A popular tool is Dirty Markup