Created by Manuel Lorenz
Last Updated on February 16, 2018

# Diving Deeper into HTML

We understood how to structure an .html file, had a look at elements and added the core content to our website. That’s great, but there is more to come. Let’s have a look at the difference between block level and inline elements, understand attributes and links and also learn how we can add images to our page in the last part of this series.

# Investigating the Current State of our Website

This is the current state of our website: Current state of our website We learned how to add this content, but why is it actually displayed this way?

Specifically: Why is each element placed in a new line, although enough space would be easily available to display at least some elements next to each other?

Let’s take a look at our current code, this might help us at this stage:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Our First Webpage</title>
   </head>
   <body>
      <header>
         <h1>Mike's World</h1>
      </header>
      <nav>
         <ul>
            <li>Home</li>
            <li>Contact</li>
         </ul>
      </nav>
      <main>
         <p>My SF City Trip</p>
         <p>The California Landscape</p>
         <p>Image 1</p>
         <p>Image 2</p>
         <p>Do people like my Page</p>
      </main>
      <footer>
         <p>Image Max - Awesome page, great work, keep it up!</p>
         <p>Image Manu - Looks really nice, beautiful pictures!</p>
      </footer>
   </body>
</html>

I already introduced elements in the last part of this series. Therefore the various <p> elements (paragraphs) in the <main> and <footer> might, as the name indicates, be the reason why each of these elements is displayed in a new line on the website (and that’s indeed the case).

However, the <header> and <nav> elements do not contain any <p>, still “Mike’s World”, “Home” and “Contact” are each displayed in new lines.

What is the reason for this behaviour?

# Block Level vs Inline Elements

Let’s reopen the developer tools, go to the “Elements” ribbon and investigate the <header> first: The header element in the dev tools We immediately see that the <header> is displayed as a block, covering the entire space available in that line. Investigating the remaining elements, so <nav>, <main> and <footer> will lead to the same result: Each element on our website uses the space available in the line where it is displayed and the dev tools indicate each element as a block.
But what about the elements inside these sections, so the elements that include the actual content of our website? Let’s have a closer look at the <p> elements inside the <main> element for example: The paragraphs in the dev tools The behaviour again is the same, all <p> inside the <main> element are displayed as blocks, using the entire space available in this line.

Let’s accept that for the moment and assume that we want to position “My SF City Trip” and “The California Landscape” next to each other instead of below each other. In our code, we simply change the <p>, which is wrapping the content of these elements, to a <span> (you remember - this was one of these non-semantic elements we had a look at in the last part of this series):

      <main>
         <span>My SF City Trip</span>
         <span>The California Landscape</span>
         <p>Image 1</p>
         <p>Image 2</p>
         <p>Do people like my Page</p>
      </main>
With this change in place the position of these elements changed, the elements are now positioned next to each other: Added span to the website Investigating these elements also shows that the entire space in each line is no longer occupied. The only space required after we changed the code is the space the actual content (so the text in our case) needs to be displayed correctly: Span in the dev tools **Why is this the case? **

In HTML we have two different element types, block level elements and inline elements.

Wait, we had that already - weren’t these called semantic and non-semantic elements? Yes, but this referred to the way the elements are used and to the information they include. The differentiation we talk about now is different and not related to the one we previously learned.

Block level/ inline elements describe the way the elements behave in the so-called document flow (so the elements’ positioning on our website). Each block level element always uses the entire space available in the line where it is positioned and each block level element also starts in a new line.

In contrast to that, an inline element like the <span> doesn’t behave like that. These elements just use the space they need to display the actual content and after this content is displayed, the following inline element is placed next to it (in case the remaining space on that line is sufficient).

And how do we know which category an element belongs to? Thankfully, the MDN provides detailed lists for both block level elements and inline elements. Definitely check this out to get a first overview of the different elements available.

With that, we should have a better understanding of the current look of our website, so let’s continue working on it.

# Adding Links in HTML

Links are a typical core feature required for each website. In our case we might add links in the navigation bar of our website. Currently, “Home” and “Contact” are just plain text, links to another page on our website would probably be a better choice.

For that, the <li> elements inside our <nav> element must be adjusted. Before we continue though, we must understand the way links are created in HTML first.

The first step is creating an <a> (an “anchor”), which basically represents the actual (clickable) link on our website:

<a></a>

The problem with the plain anchor is, that it doesn’t know where it should direct us to - how would it?

What we need is an attribute. Attributes allow us to add additional information to our elements. There are lots of different attributes available which can be added to HTML elements (of course this is not limited to <a>, although not every attribute can be added to every element).

In our case we need an href, a hyper reference, so basically an attribute that allows us to add a URL to our <a>:

<a href="https://yourwebsite.com"></a>

What’s missing now is the link name, so the text that should be visible on the website. This should be “Contact” in our case, so let’s also add this after the opening tag <a> as the content of this element:

<a href="https://yourwebsite.com">Contact</a>

With that we created a working link, very cool.

A quick sidenote:

Creating links this way will open the URL in the same browser tab. Adding target="_blank" as additional attribute will change this behaviour and open the link in a new tab.

Just in case you need that functionality, this would be the adjusted code:

<a href="https://yourwebsite.com" target="_blank">Contact</a>

We won’t need that function on our website, but how do we implement that code into our code now? It’s quite simple actually, we online need to paste the link we created into our list item:

      <nav>
         <ul>
            <li>Home</li>
            <li><a href="https://yourwebsite.com" target="_blank">Contact</a></li>
         </ul>
      </nav>

The problem still is, that we don’t want “yourwebsite.com” as a link, instead it should redirect us to another page on our website. Time to learn how to achieve this.

# Creating a Second Page

Adding a second page to our website first of all requires us to create a new folder. As the second page will be the “Contact” page, we should name this folder accordingly to represent the actual structure of our website.

In this folder, we create a second index.html file: Creating a second index.html file Sidenote:

The file could be called differently (not again index.html), but most web servers will typically serve index.html files by default if the browser just visits a folder (e.g. my-url.com/contacts - most servers would try to return an index.html file).

Following this approach is therefore not the worst idea. Generally, recreating the structure of your website, so creating a new folder according to the different pages on your website like “Contact” in our example, with each folder containing an index.html file is not a bad practice at all.

Copying the first lines of our primary index.html file up to </nav> and adding the </body> and </html> tags, let’s us create the content for this page quickly. We will not add additional information at this stage, so the new page is created - mission complete:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Our First Webpage</title>
   </head>
   <body>
      <header>
         <h1>Mike's World</h1>
      </header>
      <nav>
         <ul>
            <li>Home</li>
            <li><a href="https://yourwebsite.com" target="_blank">Contact</a></li>
         </ul>
      </nav>
   </body>
</html>

Important: Make sure to always save each file separately in your code editor whenever you add/change code. That’s crucial, otherwise any updated content won’t be visible in the browser.

# Absolute and Relative Paths

We created a link, we added a second page, how can we now bring these things together? What we need are paths, specifically we could use absolute and relative paths. What’s the difference and which one will we use?

Absolute paths simply include the entire URL and the folder and files you want to refer to. In our project, this would be an absolute path:

<a href="www.example.com/contact/index.html"></a>

“www.example.com” stands for the URL of our website, “contact/index.html” represents the folder structure we just created. The important thing about absolute paths is that they always include this entire information, so URL + folder + file.

In contrast to that, a relative path starts the navigation based on its actual position within the folder structure. If we reconsider our current situation, we have the contact folder and the first index.html file we created on the same level, whereas the index.html file in the “contact” folder is one level below that:

Different levels of our files and folders As we need to navigate from our current position (the first index.html file) to the index.html file in the “contact” folder to create that link, we can simply follow the relative path contact/index.html.

That’s it, no URL is required as we simply define our position within the folder structure, starting from our current position - that’s a relative path. Navigating from the index.html file in the “contacts” folder back to the “Home” page on our website, requires us to go one level up though.

This can be achieved with the following code: ../index.html

With the two dots we jump one level up, starting from our current position. In our case this means we navigate from the index.html file in the “contacts” folder to the level where the “contacts” folder itself and the first index.html file are located.

Now that we are on the same level, we only have to add index.html to our code to be redirected to the “Home” page on our website.

As written before, we will stick to absolute paths and therefore we have to add the following code to our links.

This is the code for the <ul> in the second index.html file in the “contact” folder:

<li><a href=".../index.html">Home</a></li>
<li>Contact</li>```
This allows us to be redirected to the starting page on our website once we click the "Home" button. "Contact" will remain plain text, as we are already on the "Contact" page, so adding a link here is not required.

For the main index.html file, we use the following code:
```xml
<li>Home</li>
<li><a href="contacts/index.html">Contact</a></li>```
Here we are on the starting page, therefore "Home" is plain text, while clicking onto the second `<li>` will redirect us to the "Contact" page.

With this being added, this is what our entire code for the first/ main index.html file looks like at this stage:

```xml
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Our First Webpage</title>
   </head>
   <body>
      <header>
         <h1>Mike's World</h1>
      </header>
      <nav>
         <ul>
           <li>Home<li>
           <li><a href="contacts/index.html">Contact</a></li>
         </ul>
      </nav>
      <main>
         <span>My SF City Trip</span>
         <span>The California Landscape</span>
         <p>Image 1</p>
         <p>Image 2</p>
         <p>Do people like my Page</p>
      </main>
      <footer>
         <p>Image Max - Awesome page, great work, keep it up!</p>
         <p>Image Manu - Looks really nice, beautiful pictures!</p>
      </footer>
   </body>
</html>

The index.html file in the “contacts” folder uses this code:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Our First Webpage</title>
   </head>
   <body>
      <header>
         <h1>Mike's World</h1>
      </header>
      <nav>
         <ul>
           <li><a href=".../index.html">Home</a></li>
           <li>Contact</li>
         </ul>
      </nav>
   </body>
</html>

# Adding Images

Another important key feature of HTML is adding images. Currently, displaying “Image 1” and “Image 2” as text is ok, but probably not what we finally want to display in our <main> section.

Changing this first requires us to adjust the code in our <main> section as follows:

<main>
   <p>My SF City Trip</p>
   <p>Image 1</p>
   <p>The California Landscape</p>
   <p>Image 2</p>
   <p>Do people like my Page</p>
</main>```
Images are missing though, so to find these in our code editor, we could just create a new folder, give it a nice name like "images" and drag and drop the images we want to use into that folder.

Adding these images to our website is thankfully quite easy now. Changing the `<p>`, which is wrapping "Image 1" to an `<img>` (by the way an empty element, we already saw these in the previous part of this series), is the first step we have to apply:
```xml
<img src="" alt"">```
Our code editor (Visual Studio Code in my case) automatically added two attributes to the element, `src` and `alt`.

`src` (source) represents the source path of the image that we want to use. We pasted our images into the images folder, so using a relative path should be everything we need to add the image to our website.

I will use the image named "sf.png" right here (you can find the images in the source code, the links are provided below the video), so this is the code we need:
```xml
<img src="images/sf.png" alt="">```

That was `src`, but what about `alt`?

This is not just an alternative text that should be displayed in case the image cannot be loaded. It should rather describe the content that is displayed at this position on the website, for example to enable blind persons, who might be using a screenreader, to also understand the content of the website.

Therefore `alt` should describe the content of the image as good as possible:
```xml
<img src="images/sf.png" alt="Image of the San Francisco streets">```

With that code being added, we already brought our website to life a bit more:
![First image added](./website-image.png)Besides the size and formatting in general - we'll take care of that in the [CSS series](https://academind.com/learn/css/beginner-s-guide/) - the site looks fine so far. Adding another image of course works the same way and after that, we placed both images on our website.

This is the code we wrote in our main index.html file up to his point:

```xml
<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Our First Webpage</title>
   </head>
   <body>
      <header>
         <h1>Mike's World</h1>
      </header>
      <nav>
         <ul>
           <li>Home<li>
           <li><a href="contacts/index.html">Contact</a></li>
         </ul>
      </nav>
      <main>
         <p>My SF City Trip</p>
         <img src="images/sf.png" alt="Image of the San Francisco streets">
         <p>The California Landscape</p>
         <img src="images/california.png" alt="Image of the California streets">
         <p>Do people like my Page</p>
      </main>
      <footer>
         <p>Image Max - Awesome page, great work, keep it up!</p>
         <p>Image Manu - Looks really nice, beautiful pictures!</p>
      </footer>
   </body>
</html>

# Restructuring our Code

The images are on the website, but the underlying code in the <main> section could be improved. Let’s turn it into a list to have a better code structure and to ensure we can comfortably work with it in the styling section (right here).

What we need is a list containing two items. Each item should include the description of our image and of course the corresponding image. This means we have a <p> and an <img> positioned next to each other.

That’s not something we necessarily have to change, but as <p> is a block level element while <img> is an inline element, we could make our lives a bit easier in the CSS part of this series if we apply a small adjustment.

So let’s nest the <img> into a <div> (a non-semantic block level element). With that we have two block level elements positioned next to each other (<p> and <div>), which is a recommended practice at this stage.

With that in place, the code for the first index.html file changed from:

<p>My SF City Trip</p>
<img src="images/sf.png" alt="Image of the San Francisco streets">````
to this one:
```xml
<ul>
   <li><p>My SF City Trip</p><div><img src="images/sf.png" alt="Image of the San Francisco streets"></div></li>
</ul>

Adjusting the code for the second image, brings us to this code:

<ul>
   <li><p>My SF City Trip</p><div><img src="images/sf.png" alt="Image of the San Francisco streets"></div></li>
   <li><p>My SF City Trip</p><div><img src="images/california.png" alt="Image of the California streets"></div></li>
</ul>

# Working on the Footer

We almost did it, but we should also take a closer look at the content of the <footer>. Two things could be adjusted: We need images and finally having a look at the code structure might be a good idea.

This is the current code:

<footer>
   <p>Image Max - Awesome page, great work, keep it up!</p>
   <p>Image Manu - Looks really nice, beautiful pictures!</p>
</footer>

Let’s add the images first, an easy exercise for us as we just learned how this works:

<footer>
   <img src="images/image-max.png" alt="Image of Max">
   <p>Max - Awesome page, great work, keep it up!</p>
   <img src="images/image-manu.png" alt="Image of Manu">
   <p>Manu - Looks really nice, beautiful pictures!</p>
</footer>```
That's the result:

![Images in the footer](./footer-images.png)A nice first step, but I would prefer having Max' image and the corresponding text next to each other in the same line. The same thing should apply to the image and the text of myself:

```xml
<footer>
   <img src="images/image-max.png" alt="Image of Max">
   <span>Max - Awesome page, great work, keep it up!</span>
   <img src="images/image-manu.png" alt="Image of Manu">
   <span>Manu - Looks really nice, beautiful pictures!</span>
</footer>```

Adding a `<span>` instead of `<p>` to the text was a good first step, but to be able to display the images and the content of each person in separate lines, we need to wrap both into a block level element.

A `<div>` would be a good choice for that:

```xml
<footer>
   <div>
      <img src="images/image-max.png" alt="Image of Max">
      <span>Max - Awesome page, great work, keep it up!</span>
   </div>
   <div>
      <img src="images/image-manu.png" alt="Image of Manu">
      <span>Manu - Looks really nice, beautiful pictures!</span>
   </div>
</footer>

This should help us, considering what we learned about inline elements (the <img> and the <span>) and block level elements.

The inline elements will position the image and the corresponding text next to each other. Wrapping these into a <div>, which occupies the entire space available in its line, should put each Max’ and my part into separate lines.

And indeed, with these changes applied, we achieved our goal: The finished footer The style is definitely not finished yet, but as mentioned before, we will take care of that in the CSS series here on our website.

# Adding a Favicon

We are coming towards the end of this beginner’s series, but before we finish you should definitely understand how to add a favicon to your website.

A favicon is this nice little symbol displayed next to the name of the website in your browser tab - something like the Academind symbol (not the big one though, just the one next to “Online Education…”): Favicon example Such a favicon is definitely nice to have, but as it is not related to the content of the page, it must be added in the <head> of our .html file, you remember?

Let’s add a link including two attributes, rel and href. The latter will include the path to our favicon.

rel stands for relationship and specifies the relationship between our index.html file and the file we refer to. As we want to add the image as a favicon, shortcut icon probably is a nice name for that.

In the end, our code should look like this:

<head>
   <link rel="shortcut icon" href="images/favicon.png">
</head>

The path and the image name of course depend on your project structure and the image you want to use, but with this line of code we also added this icon.

Important:

Don’t forget to also add this link to the second index.html file, otherwise the icon won’t be displayed on our “Contact” page. Also remember the relative path that must be adjusted to correctly navigate to the image:

<head>
   <link rel="shortcut icon" href="../images/favicon.png">

# Commenting Code Out

Before we finish, one last thing:

Creating a website normally requires a lot of code to be written. In some situations you might not want to use some code you just wrote immediately. At the same time you don’t want to delete it as it might become useful at a later stage of your project.

Wouldn’t it be great to find a way to make the code invisible on the actual website, without deleting it?

I think it would and we of course have an easy way to achieve this. We can comment out code in HTML by adding the following symbols in the beginning and at the end of the code that should be commented out: <!-- and -->.

In a code example this would look like this:

<!--<p>This is commented out</p>-->
<p>This is visible on the website</p>

Leaving out --> will comment out the entire code following the initial <!--.

This can also be very helpful when writing your code, so this is definitely something you should keep in mind.

# We Did It!

Puh, this was a lot of work, but we finished this HTML beginner’s series. With the knowledge you gained, you should now understand the basic concepts of HTML and be able to dive deeper into the web development areas of your interest.

More importantly you are now able to do your first steps in web development and create your first websites. So start your own projects, play around and practice, practice, practice!

Knowing the theory is a must, but creating your own websites is the best way to master HTML (and any other programming language)!

I hope you liked this series and that it helped you to get in touch with modern web development as smooth as possible. In case you also want to dive into other basic concepts, just visit our CSS or JavaScript section. These are the next core concepts you should learn to be able to style your website (CSS) and to add logic to it (JavaScript).