One of my friends recently asked me to teach them how to make websites. I agreed, and I figured, why not write a blog post explaining what I taught her as well?
And besides, I feel like HTML is something that everyone should know, especially if you have a blog. WYSIWYG (what-you-see-is-what-you-get) editors aren’t renowned for their excellent ability to output clean code, so being able to go under the hood and clean up that code is a valuable skill, which can even help in SEO (I’m not an expert in this though, so if you’re here for SEO advice, sorry to disappoint 😜).
In this post, I’ll aim to give you a brief understanding of how HTML works. This will help you in writing blog posts with clean HTML, and if you’re someone who needs help customizing an HTML website template, hopefully, this guide will point you in the right direction.
I intend to write some follow-up posts in the future with more details on HTML and also teach you some CSS that you can use to style your website.
1.0. What is HTML?
It stands for Hypertext Markup Language. Basically, it’s the language that we use to display content on a website.
A basic website is made of two parts—HTML (for markup; this is the content) and CSS (this is used for styling the content, but we’ll come back to this at a later date). If you’re confused at this point, read on and hopefully seeing an example will help you understand.
2.0. Basic Syntax
2.1. Tags
HTML is made of tags, which are words or letters that go between the lesser than (<) and greater than (>) sign. For example, a paragraph tag would be <p>. These tags are used to make elements. The example of a paragraph tag before isn’t very useful; you’ve told the browser that you want a paragraph, but where does the actual paragraph text go?
The answer to this is that there are two types of tags: opening tags, and closing tags.
The opening tag is what was described previously, e.g. <p>. This basically tells the browser, “Hey, what’s about to come should be treated as a paragraph.” The closing tag tells the browser, “Okay, that’s the end of this paragraph,” and is identical to the opening tag, except for the fact that there is a slash (/) before the name of the tag. For example, the closing tag for a paragraph would be </p>.
That might be a little bit confusing, so here’s an example of how you would show 3 paragraphs containing the text “Lorem ipsum dolor sit amet…”
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
There are hundreds of different tags for all sorts of different things; images, links, telephone numbers, figures, etc. They all follow this same syntax (apart from some special snowflakes, which I’ll introduce to you later on). I won’t list every element on this page, but you can find a list of HTML tags over at the Mozilla Developer Network.
2.2. Elements
One set of these opening and closing tags makes an element, so the previous example has 3 elements and 6 tags.
2.3. Attributes
Tags can have attributes too. An attribute is something that describes the element. For example, if you want to put a link somewhere, you need to describe where the link should go. Here’s an example: A link without any attributes looks like this: <a>Link Text</a>. But this will not go anywhere; no URL has been specified. To specify a URL, we add the href attribute; <a href="www.google.com">Link Text</a>. When you click on this link, it will go to www.google.com.
3.0. The Structure of a Webpage
Okay, so I’ve walked you through the syntax of HTML, but how do you put everything together to make a webpage? Here’s an example of a simple webpage. I’ll walk you through the specifics.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<h1>Main Page Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Aenean vitae lorem euismod, sodales augue ac, finibus lectus. Aliquam at rhoncus ante. In dictum felis at orci pretium cursus. Phasellus a quam dolor. Nunc aliquet fermentum justo, id tristique purus mollis vel. Nullam suscipit in metus sed semper. Praesent luctus nulla et ipsum fringilla lobortis. Suspendisse vitae finibus nibh. Nulla cursus varius augue id tempus. Mauris rhoncus interdum magna vitae consequat. Mauris hendrerit, ligula quis tristique euismod, magna lacus molestie nibh, eget posuere ipsum lectus sit amet mi. Sed porttitor rutrum diam, nec ullamcorper elit luctus in.</p>
</body>
</html>
Let’s look at the first line: <!DOCTYPE html>. This tells the browser that this document is written in HTML5, so that it knows how to interpret the code.
The next section is the document head. You’d be forgiven for thinking that this is the page header, but this isn’t even part of the displayed page. The head contains metadata. Metadata is essentially information about the document; so none of the page content goes here. In the example above, we tell the browser that the characterset of the document is “UTF-8”, and that the title of the page is “Page Title”. The title is what is shown on the tab of a page. You can also put other information in this section. For example, there is an author meta tag, which contains information about the author—<meta name="author" content="Author Name">
After the head, is the document body. This is where all your content goes. Within the body, you can use all the elements previously described. In this example, we have a top-level heading and a paragraph of lorem ipsum underneath. You can put in many more elements than just this though.
Thanks for reading up until now! If you have any questions or notice any mistakes or typos in this post, please let me know and I’ll do my best to clarify.
In the next post, I’ll go into more details about some specific tags which you may find useful for blog posts and pages.
After that, I’ll explain how to add styling to a page, but that isn’t needed if you’re just looking to write neat posts.