A more advanced example
Since there are so many different HTML elements, it will be hard to remember them all if I just explain what they do. So I'm going to show you another example, and then explain what it does afterwards. You can start by creating a new file and writing this code inside.
In my opinion, I would write all of this code in the editor each time until it sits in your fingers. The more you write, the more you remember. So please write this code, instead of just copying it.
<!DOCTYPE html>
<html>
<head>
<title>Site name</title>
</head>
<body>
</body>
<html>As you can see, we have the basic HTML elements we need on all pages. Inside the body, I'm going to add a couple of comments. Like those you typically see on a blog. Add the following code inside the <body> element.
<article class="comment">
<figure class="avatar">
<img src="image.jpg">
</figure>
<div class="content">
<div class="person">
<p><strong>John Doe</strong> at <time>31m ago</time></p>
</div>
<div class="body">
<p>This is the comment body.</p>
</div>
</div>
</article>Here's a couple of new elements like figure and time. The time-element is quite self describing, this is an element for time and dates. The figure-element is an element typical used to wrap around images. The figure element can contain caption text too.
If you try to view the HTML file in your browser now, you will see a unstyled comment. It doesn't look good and that's because we're lacking CSS. It's not easy to create beautiful websites without styling (CSS). In a upcomming part or series, we will start to look at CSS.
Summary
Up until now, we've learned some basic HTML. But without knowing any CSS, it's hard to make things look nice. In the next part of this series, we are going to start learning CSS.