HTML basics

3/10/2020
Maxime Moreillon
TutorialsHTMLWeb

HTML basics

HTML stands for HyperText Markup Language. It is used to describe the content of a webpage to web browsers. Originally, web browsers were designed to display text documents and so HTML was used to define the various parts making up those documents.

Tags

HTML uses tags to define the attributes of content such as:

<p>This is a pararaph</a>

In this example, the text "This is a paragraph" is defined as a paragraph because it is surrounded by <p> and </p> tags. Note the "/" for the tag after the content, which implies that it is a closing tag.

Links

The web takes its name from how web pages are interconnected together: A user can navigate from one page to another using hypertext links. To define a portion of text as a link, the <a> tag is used:

<a href='maximemoreillon.com'>This is a link to maximemoreillon.com</a>

Note that the target of the link is defined within the dag using the "href" attribute.

Nested tags

Tagged content can be placed inside tagged content. For example, a link can be put inside a paragraph:

<p>
  This is a paragraph and it contains <a href='maximemoreillon.com'>link to maximemoreillon.com</a>
</p>

Note that HTML is insensitive to line breaks.

HTML document structure

In fact, the content is displayed on the body of the document and as such, must be nested in the <body> tag. Moreover, the body is part of an HTML document and, consequently, is nested within the <html> tag:

<html> 
    <body> 
        <p> 
            This is a paragraph and it contains <a href='maximemoreillon.com'>link to maximemoreillon.com</a> 
        </p> 
    </body> 
</html>

At this point, it may seem trivial that content should appear on the body of the page and as such, the <body> tag should not need to exist. However, the page can carry information that does not necessarily appear in its body. Namely, the text is shown in the browser tab, i.e. title (tag: <title>)of the document, does not appear on the page. This sort of information is written in the head of the document, which is nested in the <html> tag just like the body. This yields the following document structure, which constitutes somewhat of a bare minimum for a web page:

<html> 
    <head> 
        <title> 
            Document title 
        </title> 
    </head> 
    <body> 
        <p> 
            This is a paragraph and it contains <a href='maximemoreillon.com'>link to maximemoreillon.com</a> 
        </p> 
    </body> 
</html>

Key takeaways

HTML describes the content of a web page using tags.

More on the subject

The content of this page constitutes a very rudimentary introduction to HTML for a more thorough study of the subject, W3Schools offers detailed tutorials on web development.