HTML Syntax

Contents

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

Definitions

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:

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

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).

Elements

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.

<p lang="en">
   Hello World!
</p>

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.

<p>

Attributes

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.

<p lang="en">

Content

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.

</p>

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.

<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.

<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.

<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

<p language="en">Text Sample</p>

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