Skip to content

Introduction to HTML

What is HTML

HTML (HyperText Markup Language) is a relatively simple markup language designed to describe data/content in a web application.

Using markup such as

<!-- paragraph -->
<p>test</p>

<!-- link -->
<p>Text with <a href="...">link</a></p>

<!-- image -->
<img src="..." />

it can describe elements like

  • text
  • links
  • images
  • forms

HTML does not in any way describe design, which is handled by CSS (Cascading Style Sheets), or dynamics, which are managed by ES (JavaScript) and WASM (WebAssembly).

Markup

Markup can consist either of data, such as

<h1>Heading</h1>
<p>text</p>

or without data

<hr />

and the markups are placed in a tree (markup within markup within markup in…)

<section>
    <div>
        <p>text</p>
        <div>
            <p>
                text
                <span>text</span>
            </p>
        </div>
    </div>
</section>

All markups can have attributes consisting of a key and a value

<div id="myDiv">text</div>
<p id="id1" class="class1 class2" style="color: red">text</p>
<img src="images/image1.png" alt="My image" />

Spaces Have No Meaning

Neither spaces nor tabs have any significance in HTML - they just make it easier to read for “us”.

Thus, the following

<p>Text Text</p>
<div>
    <p>New text</p>
</div>

is interpreted as

<p>Text Text</p>
<div><p>New text</p></div>

by the browser. It’s only a single space in texts that has significance.

W3C

HTML (HyperText Markup Language), originally created by Tim Berners-Lee and inspired by older technologies like HyperText (Ted Nelson), was standardized in 1994 (28 years ago) by the W3C. Since then, many versions have been released, and as of 2020, the latest is version 5.2.

W3C also oversees the standardization of many other web related technologies. Moreover, W3C provides various tools, particularly for validating HTML and CSS.

Semantics

You should view markups as the way to describe/define data (text, paragraphs, images, links, etc). Some developers/designers choose to be very explicit in their use of markups and utilize the entire range of HTML. They are very semantic in their approach to markups. Others are more oriented towards CSS (styling) and do not focus as much on the markups that do not have concrete functionality in browsers (like links and images, for example).

For example, a heading (h1), text (p), and a table (table, tr, td) can be written very semantically (HTML “mindset”):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
    </head>
    <body>
        <section>
            <h1>Heading</h1>

            <p>Paragraph with text</p>

            <table width="50%">
                <tr>
                    <td>Row 1 Column 1</td>
                    <td>Row 1 Column 2</td>
                </tr>
                <tr>
                    <td>Row 2 Column 1</td>
                    <td>Row 2 Column 2</td>
                </tr>
            </table>
        </section>
    </body>
</html>

The browser will use the built-in stylesheet (definition of style) called “user agent stylesheet” to display the markups.

But the same page can also be written with a CSS “mindset”:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Test</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        />
    </head>
    <body>
        <div>
            <div class="ui header">Heading</div>

            <div class="ui segment basic">Paragraph with text</div>

            <div class="ui grid" style="width: 50%">
                <div class="ui row">
                    <div class="ui eight wide column">Row 1 Column 1</div>
                    <div class="ui eight wide column">Row 1 Column 2</div>
                </div>
                <div class="ui row">
                    <div class="ui eight wide column">Row 2 Column 1</div>
                    <div class="ui eight wide column">Row 2 Column 2</div>
                </div>
            </div>
        </div>
    </body>
</html>

Here, a CSS framework called SemanticUI is used, which has defined the various class names, but it could be anything.

There is fundamentally no difference for the browser in the use of semantic markups like h1 and p compared to the use of div - it’s up to the developer. Often the two are also combined - for example:

<h1 class="ui header">Heading</h1>

Here, h1 is used together with CSS classes and could just as well be written as:

<div class="ui header">Heading</div>

or

<p class="ui header">Heading</p>

Most choose to combine the old Tim Berners-Lee markups with CSS classes - thus:

<h1 class="ui header">Heading</h1>

but it has no practical significance related to the browser.

Template

An HTML page follows a basic template with an html markup as well as a head and a body:

<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->
    </head>
    <body>
        <!-- ... -->
    </body>
</html>

Doctype

The doctype describes which version of HTML the browser can expect.

Previously, it was very specific with references to schemas, but today it is more general.

<!DOCTYPE html>

The above simply means that the page is an HTML5+ page.

For HTML4, the doctype would be more specific. An example of an HTML 4 doctype is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This doctype declaration is for HTML 4.01 Transitional, which was commonly used before HTML5 became the standard.

Describes types of metadata:

  • meta
  • css
  • javascript
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="My page consisting of ...." />
    <meta name="keywords" content="HTML, CSS, JavaScript" />
    <meta name="author" content="Michell Cronberg" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>My page</title>
</head>

Some metadata is SEO related (Search Engine Optimization) while others are related to the browser’s understanding of the page.

Body

Consists of the markups for the page which are rendered by the browser.

Basic Example of a Template

<!DOCTYPE html>
<html lang="da">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>My page</title>
    </head>

    <body></body>
</html>

Online Templates

There are several templates online that one can copy from - both in “pure” form like HTML5 Boilerplate or with CSS like HTML5Up or ThemeForest.

Basic Markups

There are several markups in HTML according to the standard.

Block and Inline

Fundamentally, markups can either be block elements which are placed one after another by the browser, and inline elements which are placed side by side. For example, the p markup is a block element

<p>text</p>
<p>text</p>
<p>text</p>

The above will render three paragraphs under each other.

The following are examples of inline elements with Lorem Picsum images:

<img src="https://picsum.photos/200" alt="Random Image" />
<img src="https://picsum.photos/200" alt="Random Image" />
<img src="https://picsum.photos/200" alt="Random Image" />

This will render three images side by side.

But remember that this can be changed through CSS.

Examples of HTML

It is beyond the scope of this module to describe the markups in detail, but here is an example of an HTML page with various markups:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>My page</title>
    </head>
    <body>
        <h1>Heading</h1>
        <p>Paragraph with text</p>

        <!-- List -->
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>

        <!-- Table -->
        <table>
            <tr>
                <td>row 1 column 1</td>
                <td>row 1 column 2</td>
            </tr>
            <tr>
                <td>row 2 column 1</td>
                <td>row 2 column 2</td>
            </tr>
        </table>

        <!-- Form -->
        <form><input type="text" /><button>Click me</button></form>
    </body>
</html>

Try It Yourself

If you want to experiment a bit with HTML, you can either use some of the many online “playgrounds” such as:

If you want to develop locally, you will need a text editor. Most developers use Visual Studio Code, which is free and works on all platforms. See a separate module on Visual Studio Code and the associated extensions.

Various Tools and Resources

Here are links to various tools and other resources related to HTML:

Texts

Images

Sounds

Favicon

Tasks

The following tasks are available:

  • Start on HTML - This is a very simple task that can help get started with HTML.

Web Components

You might come across markups that don’t seem like something from the W3C - for example:

<p>Demo of dice</p>
<cronberg-dice></cronberg-dice>

where “cronberg-dice” is clearly not a W3C standard. This is known as a web component (Web Component) and allows for the creation of custom components with encapsulated logic and design, making them easy to reuse.

You can see an example of a web component at WebComponentDemo, where the above dice is used, or download the js file directly as

<script src="https://devcronberg.github.io/WebComponentDemo/dice.js"></script>

There are plenty of libraries with web components on the internet - for example webcomponents.org or Google’s Polymer Project.

Here is another example from https://shoelace.style/. Put this in head:

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.1/cdn/themes/light.css"
    />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.19.1/cdn/shoelace-autoloader.js"
    ></script>

and try the Details component

<sl-details summary="Toggle Me">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>

HTML Pre- and Postprocessors

Preprocessors

You may come across terms such as:

These are HTML preprocessors, typically offering a simpler syntax than pure HTML. However, they require a conversion (transpilation) of this simple syntax into HTML before it can be used - as HTML is the only language browsers understand.

For example, the following markdown

# Heading
This is a paragraph

- value 1
- value 2
- value 3

can be converted to the following HTML

<h1>Heading</h1>
<p>This is a paragraph</p>
<ul>
    <li>value 1</li>
    <li>value 2</li>
    <li>value 3</li>
</ul>

So, it’s easier to write in markdown (md) than in HTML, but it requires an extra step to generate HTML.

Postprocessors

Once you have written your HTML, there are scripts/modules/applications - known as postprocessors - that can prepare HTML for deployment. This might include:

  • Checking HTML against W3C standards (linter)
  • Checking links and images
  • Minifying HTML (removing spaces and line breaks, etc.)

These scripts are typically a part of the development process in some form, perhaps executed during the build.