Chapter 1.2.4 - HTML Syntax

An HTML document is a text file that holds the layout of a website. To do so, it has a set of elements that it can use (buttons, generic containers, text containers, etc). Each element has a start tag, content, and a closing tag. The start tag starts with < and ends with >. The end tag starts with < and ends with />. Everything that's between the start and the end tag is the content of the element. For example, here is how a button would look like: <button>Press me!</button>

Some elements are so-called self-closing tags. They don't have a closing tag, but their starting tag ends with />. There are not many of them, but, for example, <img> is a self-closing tag, and an image would like: <img src="img/ostrich.png" alt="Ostrich Picture">

As you may have noted in the example above, elements may also have attributes—meta parameters. The most popular attributes are id, used to identify unique elements, and class, features that are shared among many elements. Don't worry about class yet—we will get back to it in the CSS section. In the example above, we used src and alt, which are unique to <img />: src contains a link to the image file, and alt contains a description of the image for accessibility purposes.

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.

Every HTML document has the following structure:

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

    <body></body>
</html>

The rest is up to you to fill in! For example, here is a sample webpage source code:

<!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 (the higher the number, the smaller the header).
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 is also a self-closing tag.
divStands for "content division". This tag is a generic container for other tags and does not have any impact without applied CSS styles.

To learn more about HTML and see a comprehensive list of available HTML tags, visit the HTML Documentation from Mozilla Foundation.