Chapter 1.2.4

HTML Syntax

An HTML document is all text. Because it must be able to express the structure of this text,--information about which text is a heading, which text is purple, and so on--a few characters have a special meaning.

The “less than” (<) and “greater than” (>) characters are used to create HTML tags. Most tags occure in pairs, with a start tag and an end tag, with text data between them. The start and end tag together with the enclosed text form an HTML element.

Elements provide extra information about the data in the document. They can stand on their own, for example to mark the place where a picture should appear in the page, or they can contain text and other elements, for example when they mark the start and end of a paragraph.

Here is a basic HTML document:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>A quote</title>
    </head>

    <body>
        <h1>A quote</h1>

        <blockquote>
            <p>The connection between the language in which we think/program and the
            problems and solutions we can imagine is very close.  For this reason
            restricting language features with the intent of eliminating programmer
            errors is at best dangerous.</p>

            <p>-- Bjarne Stroustrup</p>
        </blockquote>

        <p>Mr. Stroustrup is the inventor of the C++ programming language, but
        quite an insightful person nevertheless.</p>

        <p>Also, here is a picture of an ostrich:</p>

        <p><img src="img/ostrich.png" alt="ostrich picture"></p>
        
    </body>
</html>

You can see what this website looks like by clicking here.

Elements that contain text or other pages are opened with <tagname> and closed with <\tagname>. The html element always contains two children: head and body. The first holds information on the document and the second contains the document itself.

Here is a small list of tags to get you started:

tagfunction
h1Stands for "heading 1". When characters are wrapped in this tag, they become a heading. Other variations of the tag include h2, h3, ..., h6.
pStands for "paragraph". When characters are wrapped inside it, they become a new paragraph.
imgStands for "image". This tag does not contain displayable characters inside of it: it contains attributes such as src="img/ostrich.png" and alt="ostrich picture". It also does not require that you pair it with an end tag.

For a comprehensive list of HTML tags, visit this site.