I recently began working with someone who wanted to learn how to build their own website, rather than simply have me build it for them. As a web developer I’d obviously appreciate the longer term relationship of building and maintaining a site, and let’s be honest, that would likely have made me more money in the long-term.
However, the process of actually teaching someone the basics of HTML turned out to be really fun. The best part about web development is not updating and maintaining a site, it’s about taking an idea and seeing it come to life. That is exciting.
This post is geared towards complete beginners yet not an in-depth tutorial that will teach you absolutely everything you need to know about HTML. It will merely help you take that first step. So, let’s take that first step together…
For the purposes of this post, we’re not looking at builders, generators, frameworks, or even styling the page. We’re looking at the absolute basics of building a web page by gaining an understanding of how HTML works within the browser.
To do this, all you will need to use your favorite text editor. Personally, I use Sublime Text 3, but you can use whichever one you would like. If you’re using Windows, first my condolences, but at least it does include Notepad, which is a good enough text editor for what we’re doing here. If you’re using a Mac, you can use TextEdit. Throughout these basic examples, we’ll be building a site for a hypothetical computer services company.
What is HTML?
HTML stands for Hyper Text Markup Language. It is not a programming language, because it does not contain logic that is processed. An HTML file is basically just a text file that is “marked up” to tell web browsers how they should display content.
What Does the Browser Do?
When a web browser opens a web page it receives data from the server in the form of HTML (usually, but that’s a whole other topic). The browser then reads that HTML and displays the page based on that processed HTML. Sometimes browsers, especially Internet Explorer, don’t display the content in the way the author intended, so it’s important to follow HTML guidelines, as well as test in the most popular browsers.
Tags are the “markup” part of HTML. Typically we add an opening tag and a closing tag around portions of text in order to give them some sort of context. A basic HTML structure might look something like this:
<!DOCTYPE html> <html> <body> This is our web page </body> </html>
In your text editor, paste the above code snippet, and save the file as
index.html. The first line,
<!DOCTYPE html> is the document type declaration. This tells the browser what sort of document you are trying to produce. In this case, it’s HTML5. This is very important because if you don’t include it, the browser will have to guess and that could cause some very unexpected results.
Getting back to tags, you will see
<html>. This is the opening tag that tells the browser that everything between here and the closing
</html> tag is, in fact, HTML. The code between
</body> is the main content of the page. This is what will appear in the browser window.
In our code sample, using
</html> closes their respective elements.
Note that not all tags have a corresponding closing tag. Tags that don’t wrap content don’t usually need a closing tag, and will actually close themselves. A line-break, for example, is represented in HTML as
<br>. Because there is no content associated with this tag, it doesn’t have a closing counterpart. The rule of thumb is, “if it wraps content, it needs a closing tag”. Strictly speaking, closing tags are not always required, but it’s good practice, and makes code much easier to read.
You might come across “self-closing” tags, where the
br tag might appear as
<br /> rather than simply
<br>. This is because older versions of HTML that was based on another language called XML. HTML5 no longer requires this format and will simply ignore them. Some developers have a preference one way or the other, often just out of habit. Personally, I prefer the simpler format.
At this point, if you save the above code and open that file with a web browser, you should see something like this.
Tags can also have attributes, which are extra pieces of information the browser can use to render the element. Attributes appear inside the opening tag and their values are surrounded by quotes (usually doubles). They appear something like:
Tags essentially do little more than mark the beginning and ending of an element. For example,
</body are tags, and everything between these, and including them, is what makes up the body element. Another example is the
</title> tags, and
<title>Page Title</title> is the title element.
To add a title to your page that will appear at the top of your browser window, change our code to look like this:
<!DOCTYPE html> <html> <head> <title>Computer Service Company</title> </head> <body> This is our web page </body> </html>
We have added 2 new elements,
title. The first starts with
<head> and ends with
</head>. The second is inside of the
head element and starts with
<title> and ends with
head element is located above the
body element and contains information about the page. This content is not displayed in the browser window. There are a number of elements that can appear inside the
head, but for now we’ll just include the most important, the
Now, after saving your code, and refreshing, our page should look like this.
Let’s add a line of text.
<!DOCTYPE html> <html> <head> <title>Computer Service Company</title> </head> <body> This is our web page. We offer virus scan and removal, full system clean, upgrades, diagnosis, and all general repairs. </body> </html>
If you preview the code in your browser you will most likely have some unexpected results. You might expect the text to appear on 2 lines, just the way you typed it, however, you will see something like this.
This is because the browser doesn’t pay any attention to what line your code is on. It doesn’t care about extra spaces either. If you want to have your code on two different lines, or in two distinct blocks of text, you need to explicitly tell the browser that. Remember, HTML is about meaning, not actual presentation.
To change this to what we actually want, we need to add
p tags to our text. This is used to define paragraphs in HTML.
<!DOCTYPE html> <html> <head> <title>Computer Service Company</title> </head> <body> <p>This is our web page.</p> <p>We offer virus scan and removal, full system clean, upgrades, diagnosis, and all general repairs.</p> </body> </html>
Now, our page should look much better. Remember that fonts, colours, positioning, etc. will all be handled later with CSS.
p tag is just the beginning of text formatting. A key piece to keeping a document organised are headings. These are also valuable for Search Engine Optimization (SEO).
The heading tags are
h5, and, you guessed it,
h1 tag is the most important, while
h6 is very low on the totem pole. For SEO reasons, we should only have one
h1 element on a page. This should be the most important item in the context of that page.
For example, on my home page, my
<h1 class="page-head__text">Mark Rabey<br>Full-Stack Web Developer</h1></code>
class attribute is used for styling, and not needed here, and the
<br> is only for display purposes. On this page, that is the content that is the most important. It is exactly what the page is about. It’s about me, and the fact that I am a full-stack web developer.
On my blog posts, however, this is no longer what the page is about. So, my
h1 contains the title of that particular post. All my other heading tags depend on how they might relate to my
h1. You can have many
h6 tags without affecting your SEO at all, but again, only one
h1. The others should be used in order of intended relevance in relation to the
Let’s add some headings to our page.
<!DOCTYPE html> <html> <head> <title>Computer Service Company</title> </head> <body> <h1>Computer Service Company</h1> <h2><b>What this is</b></h2> <p>This is our web page.</p> <h2><b>What we do</b></h2> <p>We offer virus scan and removal, full system clean, upgrades, diagnosis, and all general repairs.</p> </body> </html>
Notice when we look at our page now, headings are rendered quite differently. Although we’re not using HTML to style our document, the browser still renders the different headings with different font sizes and weights. Browsers do this so that if something somehow went horribly wrong with your CSS, your users will still have a somewhat valuable experience reading you page.
Continuing on, there are a few directions I can take. We could look into all the tags, but who has time for that? We could look at a few more common tags, but we might not need them right away. So, we’re going to continue just building our basic site, and as we hit tags we haven’t used yet, I’ll explain them as needed.
Adding navigation to your page is obviously key to allowing your users to move around your site easily. We also want our navigation to allow screen readers (for the visually impaired) and web crawlers (for search engines like Google) to be able to move around your site easily. In our case, we’re going to add our navigation right at the top of the page. Let’s add the navigation to our
<!DOCTYPE html> <html> ... <body> <nav> <ul> <li> <a href="services.html"> Services </a> </li> <li> <a href="products.html"> Products </a> </li> <li> <a href="about.html"> About Us </a> </li> <li> <a href="contact.html"> Contact Us </a> </li> </ul> </nav> ... </body> </html>
We can see what we’ve built here.
First we added a
nav element. This is used to tell the browser that the contents are used for navigation purposes. Inside of that, we have a
ul element. This is an unordered list. Had I used an
ol (ordered list) we would see the numbers 1-4 instead of the bullets. I chose to use an unordered list, because although I want them to display in a particular order, the items in the list have no less meaning if they are in any other order.
Inside of our
ul we have several
li elements. These are our list items. Finally, nested inside our
li elements, we see
a tags. These are anchors and represent links to other pages or content. We are currently using only one attribute with our anchor tags. This is the
href attribute. This is the hyperlink reference, and tell the browser the destination of the link. Again, you’ll see here that the browser has added some default styling to our links in order to give them some context until we are able to style them ourselves.
Just the Beginning
We’re going to end things here. This is just the very basic beginnings of an HTML document, but hopefully this short introduction to HTML will give you at least some understanding of how HTML is structured.