HTML document

1

Every HTML document starts with a special doctype tag:

<!DOCTYPE html>

HTML document consists of HTML elements which are marked up with HTML tags. Every HTML element is marked up with a pair of an opening and closing tag, either a single empty tag which is a short version of such a pair. Also, HTML elements can be nested.

<p>
    This is a normal text
</p>

<p>
    <b>This text is bold</b>
</p>

<p>
    <i>And this one is italic</i>
</p>

<p>
    <b>This text is bold, <i>and this is bold and italic</i></b>
</p>

<p>
    <img src="/images/sam.jpg" /> <!-- This is a short version of HTML element -->
    <!-- And by the way, this is an HTML comment -->
</p>

A mandatory part of an HTML document structure consists of thee HTML elements: html, head and body. html is a root element of every HTML document. The purpose of head is to keep a document metadata there, like document title, meta description, web page icon, CSS or RSS URLs, etc. body is a visual part of the document, its body. Here is an example of very simple yet complete HTML document:

<!DOCTYPE html>
<html>
    <head>
        <!-- Web page title -->
        <title>My First Web Page</title>
    </head>
    <body>
        <!-- Web page content -->
        Mommy, look! I'm a web developer!
    </body>
</html>

There are about a hundred of different HTML tags total, however you don't have to learn all of them right away. In fact you need just a dozen of them to start.

head

title is a web page title, and this is all we need to learn about head elements at this point.

body

h1h6 are six levels of headlines. Just as in a newspaper.

p is a text paragraph.

img is a picture.

div is a general-purpose block, a division.

a is a hyper reference, the essence of an HTML document.

b is a bold text.

i is an italic text.

And that's it for now. Some of HTML elements have attributes. Those are additional element properties. For example, if you put img element you want to specify where should this picture come from. If you put a element you want to set where should that hyper reference link to.

<p>
    This is a nasty car:
    <img src="https://img1.stcrm.it/images/19846680/HOR_STD/400x/bugatti-centodieci-5.jpg" />
</p>

<p>
    Google it yourself <a href="https://google.com">here</a>
</p>

Note that line breaks inside the document don't break lines in the rendered HTML. To break lines you should use paragraphs, divs, and other elements which we'll discuss later.

OK, that's it for this lesson. At the end let's create a bigger web page and put there all we've learned so far. To view how's it look just create a file page.html, put there your HTML and open it in your web browser or just doubleclick it in your file manager.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <h1>My first big web page</h1>
        <p>
            Hello there. My name is Sam and I'm a junior web developer
        </p>
        <p>
            One day I will get rich and buy
            <a href="https://www.bugatti.com/one-off/centodieci/">this</a> car:
        </p>
        <p>
            <img src="https://img1.stcrm.it/images/19846680/HOR_STD/400x/bugatti-centodieci-5.jpg" />
        </p>
    </body>
</html>
Lesson 1
Share this page:

Learning plan

What you're going to deal with
2. HTML document
HTML elements and the basic document structure
There are a couple of SEO tips you should learn about right away
Pure HTML is boring, so let's add some styles

Cross related lessons

Embedding PHP script into HTML — Lesson 2