# Diving into HTML
We installed the IDE, we set the basics so let’s start creating our first website with HTML. For that, we need to understand the general structure of an .html file and the key concept of HTML: Elements Before we dive into these, we should create a new folder. In this folder we need content, so adding an index.html file might be a good starting point: With the file being added. we can now continue and have a closer look at the general structure such an .html file should have.
# The .html File Stucture
The great thing about .html is that each .html file basically starts (at least it should) with the same code:
Why is this important? You remember the first video of this series when we had a look at the way the web works (so basically by sending requests and receiving information in the browser)?
A browser has different viewing modes and as soon as we receive the requested information, which is an .html file in our case, we want to make sure that the user’s browser is set to the standards mode. That’s basically the mode we use all day, but in case the browser is set to a special mode (“quirks” mode), displaying a webpage correctly might become difficult. Therefore,
<!DOCTYPE html> should be set correctly whenever you start writing your .html code.
The next element required is the
<!DOCTYPE html> <html> </html>
This element is really important, as the opening (
<html>) and closing (
/html) tags wrap the entire code inside our .html file. In short words: The entire HTML code you write, must be written between these two tags.
# The “head”
Time for another element -
<!DOCTYPE html> <html> <head> </head> </html>
Make sure to also have a look at the indented style we created. As written before, the code of the entire file is wrapped between the
<html> tags, therefore
<head> should be indented to improve readability and to reflect the previously explained file structure.
<head> element is a very important one, although its content is actually not visible on the website. How can it be important then? It includes metadata - information about your web app required by the browser.
This might be unclear a this stage, right? Let’s have look and add a
<!DOCTYPE html> <html> <head> <meta> </head> </html>
The first thing you might notice, is that this element is different when comparing it to the other elements we created so far. The closing tag (e.g.
</html>) is missing, as
<meta> is an empty element, and therefore does not require such a closing tag. That’s just a sidenote, we’ll have a closer look at that later throughout this series. Let’s focus onto the actual content of such a
<meta> element now.
A general example would be this one, the charset:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> </html>
This charset adds the character encoding to our code and therefore ensures that the content, so the letters, numbers and symbols, can be displayed correctly on our website. A very common charset is UTF-8, so adding this to our code is not the worst idea.
In addition to the
<meta> element, we could also add a
<title> element to our
<head> and add some content to it, “Our First Webpage” for example:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Our First Webpage</title> </head> </html>
Let’s open our index.html file to see why this
<title> element is pretty cool:
That was easy right? Just by adding the
<title> element, we added this text as our tab name- pretty cool. And we also understand why the element is added in the
<head> and not part of the actual content of the page (it is just the tab name, nothing is displayed on our actual website so far).
With that, we also added some core elements to our
<head>. Of course we could add additional elements, and we’ll also do that throughout this series, but let’s now move on to the actual content of our website.
# The “body”;
Just as the
<head> wraps all elements which include meta information,
<body> is the wrapping element for the entire content in our .html file:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Our First Webpage</title> </head> <body> </body> </html>
As we continously add elements to our code, without really understanding what elements are and how they work, we should dive into the theory before we continue.
Generally, we can distinguish between semantic and non-semantic elements in HTML. While semantic elements include information for the browser - e.g.
<p> indicates that we want to add a paragraph at this position - non-semantic elements do not include such additional information. Therefore, the latter are only meant to add additional structure to the code in case the existing semantic elements do not suffice.
Some very common semantic and non-semantic elements are the ones right here: This is one core difference between the elements we have. We’ll dive deeper into another very important one in the next part of this series. Right now, we need to understand how we can apply these elements on our website.
Having a look at the website we want to bring some light into the dark:
Although this structure should just give you a general idea of the way websites are created, it already covers a lot of the core concepts we have to understand. Just as the
<html> element wraps the
<head> and the
<body> elements, the
<body> element wraps the different sections on website.
As indicated on the slide, these sections could be a
<header>, a navigation bar (
<main> section and a
<footer> at the end of the page. These elements do not contain any information that will be displayed on our website - they just add structure and semantic information to our code.
For the content, each of these elements also wraps additional elements, which then include the actual content of our website. This could be headers (
<h1>), lists (
<ul>), paragraphs (
<p>), images (
<img>) and more.
Make sure to have a look at the MDN to find out more about the different elements available in HTML.
# Creating Our First Website
Puh, that was a lot of theory and information about the structure and elements in HTML. However, with these basics set, we are now ready to apply this knowledge to create the first parts of our website.
Let’s start with the
<header>. As explained in the last section of this article, we will add this element just for the semantics, for the content we should add another element, for example
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Our First Webpage</title> </head> <body> <header> <h1>Mike's World</h1> </header> </body> </html>
<h1> element comes with a default, special style (bold and increased font-size), the styling of our website should not be based on HTML elements. For this purpose, we will use CSS (Cascading Style Sheets). Feel free to dive into that in the corresponding series on our website.
For us, the
<h1> element, just helps to quickly identify the actual headline of our code as
<h6> are typically used to indicate the different headlines on a website.
The next thing we need is our navigation bar. As wrapping elements, we will use
<nav>, the navigation items will be created by an unordered list (
<ul>). An alternative would be an ordered list (
<ul> will add bullet points to each item,
<ol> will order the items from 1-x, that’s actually the main difference.
Using lists is pretty common for creating such navigation bars, therefore we will follow this approach. Make sure to wrap each list item between the opening tag
<li> and closing tag
From a code perspective, we should be at the following state right now:
<!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> </body> </html>
Our website should look like this:
Time to move on and to create the
<main> section. Following our previously applied structure, we will use
<main> to indicate the core section of our website. For the actual content, we will use some paragraphs:
<!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> </body> </html>
“Image 1” and “Image 2” are placeholders and will be replaced with real images in the next part of this series, just as a sidenote.
Besides these placeholders, our website keeps growing and growing:
<footer> will finish the actual content of our website. The final footer will contain both images and text, so as in the
<main> part we will again use placeholders for our images:
<!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>
With that, the basic content is done and although the website still contains placeholders and is far from being finished, the basics are set:
# We Finished the Basics!
The basics are finished, but the journey goes on. In the next (and last) part of this series, we’ll dive deeper into the structure of our code, have a closer look at additional elements and add these to our website. What’s also missing at this stage are images, another area we will take care of in the next part. And finally, we’ll learn more about attributes, what they are and how we can use them on our website.
As you can see, a lot of work to do, but we made good progress so far, so let’s continue!