HTML

HTML, short for "Hyper Text Markup Language", is a markup language used to describe the structure of websites.

Nesting

Tags can also be nested. For example, a bullet list is made out of a parent ul element (unordered list) and one or more li elements (list items):

<ul>
    <li>I am a list item!</li>
    <li>I am the second item on the list!</li>
    <li>...and I'm the third one</li>
</ul>

Or, you might have a link inside a text:

<p>
    This is some text. If you need help, you can
    <a href="https://developer.mozilla.org/en-US/">check this guide</a> for more help.
</p>

Document Structure

To get started, create a .html file anywhere on your computer. The "main" page of your website is usually called index.html.

Each HTML document starts with the HTML declaration:

<!DOCTYPE html>

Next, it contains exactly one element, the html element:

<!DOCTYPE html>
<html>

</html>

The html elements surrounds your entire document and has the following direct children:

head: The head element contains metadata about the document. Content inside this element is not visible on the page, but used by web browsers (and also search engines) to display your page correctly.
body: That's where your content lives. Content inside the body is visible on the page and contains your actual content.

Now, that's how our HTML document looks like so far:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

The Head

As already mentioned, the head contains mostly metadata. For example, the title of your page which is shown in the browser's tab bar:

<title>My Website</title>

Another element heavily used inside the head element is the meta element. For example, you can use it to set the charset (character set, encoding) of your page:

<meta charset="utf-8">

For now, that's all we need inside the head.

The Body

The body is the actual visible content of our page. For example, we can add a heading and some text using the h1 (heading level 1) and p (paragraph) elements:

<h1>Hello world!</h1>
<p>This is some content!</p>

Now, our document looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <meta charset="utf-8">
    </head>
    <body>

        <h1>Hello world!</h1>
        <p>This is some content!</p>

    </body>
</html>

Now open the file in your browser and take a look at your first website!

(You can open the file in most operating systems by right-clicking the file, select "Open with" and choose your browser)

Comments

Before we dive deeper into the world of HTML tags, let's quickly take a look at comments.

Comments are a way to leave notes in your code without them getting displayed on your page.

Security note: Comments are not rendered, but they still exist and can be read by users! Do not put sensitive / confidential / non-public information inside of HTML comments.

You can create comments using the following syntax:

<!-- I am a comment! -->

You can also create multi-line comments:

<!--
I am a multi-line comment
spanning
multiple
lines!
-->

You can also use comments to temporarily hide elements from your page:

<ul>
    <li>I am item 1</li>
    <li>I am item 2</li>
    <li>I am item 3</li>
    <!-- <li>I am the hidden item number 4!</li> -->
</ul>

Text Formatting

Here are a few more commonly used HTML tags you can use to format text content:

<h1>Headline Level 1</h1>
<h2>Headline Level 2</h2>
<!-- headline levels range from 1 (`h1`) to 6 (`h6`)  -->

<p>I am a paragraph</p>

<ul>
    <li>I am an unordered list.</li>
    <li>This means, there are bullet-points</li>
    <li>in front of each list item</li>
</ul>

<ol>
    <li>I am an ordered list.</li>
    <li>This means, there are numbers</li>
    <li>in front of each list item</li>
</ol>

<p>
    I am a paragraph with some <strong>bold text</strong> inside.
</p>

<!-- hr stands for horizontal rule, you can think of it as a divider -->
<hr>

Keep in mind that there are a lot more HTML tags. We will cover a few more in this guide, but for a full reference the MDN webdocs are a great place to explore more HTML elements.

How File Paths Work

The next two elements on the list are the anchor tag and the image tag. But before we can link to other documents or embed images, we first need an understanding of file paths and how to navigate around.

Below is a sample filestructure for a home computer (very simplified):

Users
- YourName
  - Desktop
  - Documents
    - Coding
      - my-website
        - index.html
  - Photos
    - cat.jpg
    - dog.jpg
    - house.jpg
  - Downloads
    - random_video.mp4
    - some_file.pdf
- AnotherUser
  - Desktop
  - Documents
  - Photos
  - Downloads

At the root level, you can find only one folder: Users. This folder has two subfolders: YourName and AnotherUser. These folders belong to their corresponding user accounts on the computer. And each user has some folders: Desktop, Documents, Photos, and Downloads.

Now, we can describe the path to a file in different ways:

There is an absolute path: This path exactly describes the whole path required to access the location in the file system.
There is also a relative path which describes to location relative to the current directory.

Now, let's look at the following file path:

/Users/YourName/Downloads/some_file.pdf

This is the absolute file path to the some_file.pdf file inside your Downloads folder.

Besides the names of folders and files, there are a few rules used to describe paths:

/: A single / acts as a divider: folder_1/folder_2 means go into folder_1 first, then into folder_2.
/ (at the beginning): Start at the root of the file system
..: This means "go 1 directory up"
.: References the current directory
~ References the home directory

And: If a path doesn't start with /, ~, or ./, you can assume it start's with ./ (relative to the current directory). So index.html is the same as ./index.html.

Now, absolute paths are pretty easy, as you can just start at the root of your file system and walk you way up until you get to the destination. Relative parts however are a bit more difficult at first, so let's get used to them by translating relative paths to absolute paths:

For the following examples, let's assume our current directory is /Users/YourName/Documents/Coding/my-website and our home directory is /Users/YourName.

Example #1:

./index.html

First, we can split the path at all / and get the following parts:

.
index.html

Because . references the current directory, we can start at /Users/YourName/Documents/Coding/my-website.

Next, index.html is a file inside that directory, so we can simply append it to our path and use / as divider:

/Users/YourName/Documents/Coding/my-website/index.html

And that's the absolute path to our index.html file!

Example #2:

~/Photos/cat.jpg

Again, we can split the path at all / and get the following parts:

~
Photos
cat.jpg

~ references our home directory, which is /Users/YourName. From there, we can simply append all other parts and use / as divider:

/Users/YourName/Photos/cat.jpg

Example #3

../../../Photos/dog.jpg

First: Since the path doesn't start with /, ., or ~, we can prefix it with ./:

./../../../Photos/dog.jpg

Now, we can again split it on all /:

.
..
..
..
Photos
dog.jpg

Which translates to:

. is the current directory and translates to /Users/YourName/Documents/Coding/my-website
.. means one directory up, so we're now here: /Users/YourName/Documents/Coding
.. means one directory up, so we're now here: /Users/YourName/Documents
.. means one directory up, so we're now here: /Users/YourName
Photos is a folder and can simply be appended: /Users/YourName/Photos
dog.jpg is a file and can simply be appended: /Users/YourName/Photos/dog.jpg

And so our final absolute path is:

/Users/YourName/Photos/dog.jpg

Well done! Knowing how to navigate around the file system is very important. With this knowledge, we can now continue our HTML journey!

Images

The img tag is used to display an image. In contrast to most other elements we looked at so far, this tag has no content inside and has no closing tag. You can specify the image path with the src attribute:

<img src="image.jpg">

This src attribute references an image called image.jpg in the same directory as the HTML file.

Also, images require an alt attribute: This alternative text describes the image and is

displayed if the image can't be loaded
used by screenreaders for accessibility
used by search engines

Example:

<img src="cat.jpg" alt="A white cat running on a street">

Also, it's highly recommended to add width and height attributes to the image. This tells the browser the dimensions of the image before the image is loaded. The browser receives the HTML content first and then reaches our to the image to display it. Depending on the size of the image, this may take a while. If you don't provide the image dimensions in your HTML, the browser can't "reserve" the space required for the image, which causes the layout to shift.

<img src="cat.jpg" alt="A white cat running on a street" height="400" width="700">

Bonus: A lot of images can cause huge loading times, as the browser immediately tries to load all images on your page. You can change this behavior using the loading attribute. If you set loading to lazy, the browser only downloads images as needed: So if only the top section of your website is visible on screen, images not visible on the screen won't be loaded. Only if they are about to become visible, the browser "lazily loads" them as needed.

<img src="cat.jpg" alt="A white cat running on a street" height="400" width="700" loading="lazy">

Note: If you have a big image on the top of your website, do not use lazy loading as this slows down the rendering of the first contentful paint (the first big thing the user can see). Slow rendering times for the first contentful paint can heavily impact your PageSpeed, which is one metric used by Google to rank your website.

Links

To link to other pages or files, use the a (anchor) tag. This tag takes a few attributes:

href: The destination of the link. Examples:
- https://google.com Use https:// or http:// to link to other websites
- another-page.html Use a relative or absolute file path to link to another page
- mailto:mail@example.com The mailto: protocol opens the default mail software to send an email to the given address
- tel:0123456789 The tel: protocol opens the default phone app to call the given number

Also, it's recommended to add a title attribute to links to describe them:

<a href="https://google.com" title="Visit Google">google.com</a>
<a href="mailto:mail@example.com" title"Send us an email">Write us at mail@example.com</a>

Also, if you link to another page, you can use the target="_blank" attribute to make the page open in a new tab instead of the current one (which means leaving your page):

<a href="https://google.com" title="Visit Google" target="_blank">google.com</a>

Put it all together

That's been a lot of HTML! To recap that we've learned so far, let's create the following website in HTML:

It should have any title.
It should contain a heading level 1 at the top and a short intro text.
It should contain a divider after the intro text.
It should contain an image, followed by a headline level 2 and another paragraph.
It should contain an unordered list with 3 items.
It should link to any website.

A possible result would look something like this:

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <meta charset="utf-8">
    </head>
    <body>

        <h1>Welcome to my website</h1>
        <p>Hello and welcome to this website!</p>

        <hr>

        <img src="https://wbze.de/sample-image" alt="A close up of a plant" width="650" height="400" loading="lazy">

        <h2>Lorem Ipsum dolor sit amet</h2>

        <p>Consectetur dolore tempor mollit laboris adipisicing deserunt dolor excepteur deserunt irure excepteur consectetur do aliquip. Consectetur anim consequat tempor ea velit cupidatat. Ipsum deserunt officia sit consequat eu in. Fugiat voluptate Lorem irure in enim sunt dolor velit laborum non. Laboris fugiat aliqua dolore sint eiusmod. Amet deserunt ut tempor enim ipsum dolor aute. Ullamco pariatur enim pariatur magna proident commodo labore id occaecat consequat in eiusmod. Sit id officia laboris non do do voluptate labore sunt nostrud reprehenderit cillum cillum dolore.</p>

        <a href="https://google.com" title="Go to Google" target="_blank">Visit google.com</a>

    </body>
</html>

<< Back to overview