A complete HTML file
All HTML need a few elements to be present. Without these, the browser doesn't really know which version of HTML you write and so on. I'm going to show a quick example here and tell you more about it afterwards.
<!DOCTYPE html>
<html>
<head>
<title>Site name</title>
</head>
<body>
<p>All content goes here</p>
</body>
<html>The first line of this file tells the browser which version of HTML we are using. The version we are using is the newest one, and it's called HTML5. You don't need to worry too much about it, just know that it should be on top of all HTML pages.
We also need to wrap all of the other tags inside a <html>-tag. Inside <html, we added a <head>-element. The head element contains information about the page, like the <title> (The title you see on a tab in the browser) and other information like styling, scripts, etc. But we will come back to this later.
Below the <head<, we find the <body>. This is where all the content you can see on the screen has to be. I added a simple <p> just to show you that you can put content there.
If you copy and paste this in a file and then open it in your browser, you will see that there is a simple paragraph saying "All content goes here" and that the browser title says "Site name". Feel free to change these so it's easier to see what they do.
An article
Instead of just explaining what all types of elements does, I feel that it might be easier to show you an example and then explain afterwards what they do. I'm going to create a HTML page with a simple article on it.
<!DOCTYPE html>
<html>
<head>
<title>Site name</title>
</head>
<body>
<article>
<h1>This is the title</h1>
<img src="https://unsplash.com/photos/ua0dvtOVr6Q">
<p><strong>This is the introduction to the article</strong></p>
<p>This is some random text to show you what it will look like with some content</p>
<h2>This is a sub title</h2>
<p>This is some more random content.&br>This content will come on the next line.</p>
</article>
</body>
<html>First, you can try to copy this and paste it in a file. When you open it in a browser, things might be easier to understand.
We started by adding an article element. This doesn't actually do anything, it's just an element to group other elements in it. In the first part of this series, I talked a little bit about the div-element. This is essentially the same thing, but this is more semantically correct.
Inside the article we added a h1-element. This is the title of the page / article.
Below the title is a new element, an image. You might notice that this element doesn't close like the other elements and that's intended. All elements can take different attributes, but some require them.
The img-element require a src (source) attribute. This can either be a url or it can be a local path.
Below the image comes a couple of paragraphs and a sub title. Inside one of the paragraph, you can see a strong-element. This makes the text bold.
There's also another element that we don't need to close, and that is the br-element. This stands for break line and all it does is to put content on the next line.
Summary
In this part of the series we covered what all HTML pages needs to contain. We also saw a couple of new elements and what an attribute is.
In the next part, we will start with a little bit more advanced examples. Stay tuned and subscribe to the newsletter below if you want notification when I release more awesome content like this.