Essential front-end development

Introduction to HTML

1
2
3

How do we use HTML?

All we need to get started with our own HTML pages, is a file that ends with .html or .htm. We can then open this file in our favorite web browser and see what our page looks like.

An HTML page consists of elements created by opening and closing tags. The next lesson, elements, will cover the various elements we have available and how to use them.

Template

Below is a starting HTML5 template we can use as a starting point when creating new HTML pages.

The <doctype> tag tells the browser that it's looking at an HTML document. This is a way of future proofing our document in case browsers in the future defaults to a completely different type of document.

We specify the language of the document (English) next in the <html> tag.

The <head> element contains information about the current document, also known as metadata. We set the document character set here as well as setting the title of the page.

The <body> element defines the document's main body; what we can see. This is mainly where we will be making changes while we are learning HTML.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Original title</title>
    </head>
    <body>
    </body>
</html>

Using elements

The code block below shows how to use an element with the tag <tag>. HTML is hierarchical in nature which means that we can put elements inside other elements, as demonstrated below where we have put <tag2> inside the parent element.

<tag>
    <tag2></tag2>
</tag>
PrevNext Lesson