Hey everybody, and welcome to our mega-guide to HTML for absolute beginners!
This is where we’ll be starting at the very beginning to explain how HTML works, what it’s for and how you can start using it right now.
I hope you’re excited because I can’t wait to get started 🙂
So, like I said, this is a guide for absolute beginners. If you already know what HTML is, please jump straight to our explanation of HTML tags, or even to the HTML Tags for Page Structure section.
If you’re here for the latest on HTML5, I’m afraid this is not the article for you – we’ll be covering only the most fundamental (but crucial!) tags we need to get started making HTML web pages (but watch this space – we’ll be including an advanced HTML guide in the near future!).
Otherwise, this is the article for you – you don’t know anything about HTML yet, but you can’t wait to get started making your own web pages and building up the knowledge you need to take control of your own awesome web site.
So there’s a lot of detail in HTML and how the web works. In this article we’re going to start at a very high level and work down to the level of detail you need to start building web pages.
If you’re worried because we’re not covering something you’ve heard about – don’t worry! It’s something we’ll either get to in this article, or in a later article in this series. If I’ve left something out, it’s because it’s not necessary to get started.
As I mentioned already, we’re going to be looking at the fundamental HTML we need to get started making web pages. We’ll start with looking at what HTML is and how it works first, to make sure you have some context for the rest of the article. After that, we’ll go into how we can use HTML to structure web pages, web page content and the appearance of our content.
To keep the amount you have to take on at a sensible volume, we won’t be looking at responsive or interactive features (like those included in HTML5) or at forms.
Well, you wouldn’t want to show up, read an article and then not have anything to show for it, right?
I’ll be including a few little tests and exercises (not compulsory, but highly recommended!) to make sure that by the time you get to the end you can:
Let’s get started!
Let’s find out what HTML’s all about before we get in to actually using it.
Waaaay back in 1989, a guy called Tim Berners-Lee came up with the idea of HTML as a way of linking documents together across the Internet. Yes, the Internet actually existed back then, but it was all text, and there was no WWW :).
As Berners-Lee published his ideas in the early 90’s the Internet started to adopt HTML more widely. He showed off a prototype in ’92, then early web browsers like Mosaic and Netscape implemented Berners-Lee’s ideas and the World Wide Web was born!
Since then, HTML has been moving through different standardized versions – we’re up to version 5 now, written as HTML5.
HTML stands for HyperText Markup Language. That’s hyper as in super – think hyper speed on Star Trek, or hyperactive after your kids have had a little too much sugar 🙂
Markup Language already existed in other forms when Tim Berners-Lee was inventing HTML, and it’s a way of adding extra information to plain text so that a computer program knows what to do with it, like displaying a heading in large, bold text.
HTML gives us a way of adding structure and meaning to a document, so a computer program (like your browser) can take some text and change its appearance, or add functionality to it.
HTML was created to link together academic documents that were spread all over the world.
Berners-Lee wanted to make life easier for academics to share information over the internet. So he created a way of structuring information in a document and adding hyperlinks to it to connect them across a network.
Hyperlinks (usually represented with an underline and a highlight colour) are what we click in a web page to go to a new web page.
When we talk about the World Wide Web, hyperlinks are the strands that link the web together.
Since you’re going to start taking control of the web, we should find out what happens when you load an HTML web page in your Internet browser (like Chrome, Firefox, Safari or Internet Explorer).
Note: this is one of the sections where we gloss over a lot of detail for the sake understanding this quickly!
First, we type the name of the web site we want in an internet browser (note here re googling a site v typing it in address bar). Or, we might click on a bookmark we saved earlier. So what happens then?
(A server is a large, powerful computer whose job it is to send data to other computers).
So the server says “Sure, here it is” and sends the web page across the internet to your computer, and what it sends is HTML.
“Thanks,” says your browser, and interprets and displays the HTML page on your screen so you see what you’re looking at now.
We’ve covered a lot without even getting down to the nuts and bolts of HTML! But the important things to remember are:
Tags are the building blocks of HTML, and are used to enclose something to give it some meaning.
What does that mean?
Let’s take a look at an example. We’ll invent a new tag called example. It’s not a part of HTML, so don’t try to use it! 🙂
So here’s some text we want to consider as an example:
<example>This is text that’s had a fake markup tag called ‘example’ applied to it.</example>
We’ve enclosed the above text with ‘example’ tags. Why would we do that? Maybe because in a fictional version of HTML ‘example’ text should be formatted differently.
The main point is, we’ve indicated to a browser that the text “This is text that’s had a fake markup tag called ‘example’ applied to it” is an example.
We saw in the tag example above, that to enclose the text we mentioned the tag name twice:
There’s a few things to notice here. We’ve used the tag name twice which is normal for all except a couple of tags, which we’ll mention later.
Each time we use the tag, it’s surrounded by what we call ‘angle brackets’, but are actually the ‘greater-than’ and the ‘less-than’ symbols. Here they are on a standard, English-language keyboard:
You’ll need to hold the ’shift’ key while you press the angle bracket keys.
Finally, you’ll see that the second tag (or the closing tag, the first is the opening tag) starts with a forward slash (it’s right next to your ‘shift’ key on the right-hand side of the keyboard’). This tells your browser that you’ve finished the tag, rather than start a new one.
Yeah, why does HTML make us use these weird characters anyway?
It’s a good question, and the answer is that it’s for the benefit of the browser you use to look at the Internet.
The browser, of course, isn’t as smart as you are, and what this means is that when we use an HTML tag like ‘head’ or ‘strong’, we show the browser it has a special meaning by putting angle brackets around it.
Otherwise the browser would get confused when we wrote a document about someone’s ‘strong’ arms or hard ‘head’. So we write like this instead:
This brings us to an important point.
One of them is you, and the other is the browser. Once again, when we talk about a browser, we’re talking about an application like Chrome, Firefox, Safari, or Microsoft’s Internet Explorer or Edge applications.
HTML is a series of codes we use to give instructions to the browser, so it’s designed to be interpreted by a machine.
But it uses normal English words or abbreviations, so it’s for you too.
Computers don’t need that, and it would be more efficient (from the computer’s point of view) to give it a string of 1’s and 0’s. But we’re not very good at interpreting binary strings that look like this: ‘100010011’.
So HTML represents a middle ground.
But: I encourage you to always think of things from the point of view from the browser.
As we move further into learning actual HTML, imagine how a browser would interpret the tags. This will help you when things don’t work the way you expect them too!
The last thing we should look at with tags, is tag attributes.
An attribute is an extra piece of information we attach to a tag. Going back to our example tag, we could add an attribute like this:
In this case, we’ve added an imaginary attribute called ‘ofwhat’ to the example tag. We can’t just make up attributes for HTML tags, but I’ve used a pretend one in this case to demonstrate:
After all that, what we need to keep in mind about tags is:
OK! Finally we get to look at some HTML 🙂
We’ve been saying all along that HTML is used to defined the structure of a web page, so here it is:
You can see that it uses a series of tags I haven’t mentioned yet: html, head, title, and body. Let’s look at them now to see how they’re used.
So sorry to do this to you, but the first tag to appear in an HTML file…isn’t even an HTML tag!
No, it’s the !DOCTYPE tag, and it’s the first thing to appear in an HTML document and is a heads-up! for the browser: you’re getting an HTML document, so get ready to interpret it that way.
None of the rules I’ve laid out so far here apply – it doesn’t have a closing tag, and it’s one attribute isn’t defined in the name=“value” style. As I said, that’s because it’s not actually an HTML tag.
As mentioned, it needs to be the first thing in the document so our browser knows what to do with it. We can put it there and forget about it!
Let’s talk about a real HTML tag.
The <html> tag
And what could be more HTML-ish than an <html> tag?
The html tag defines the entire document, so the two html tags (opening and closing tags) surround the entire document.
The second html tag is also a signal to the browser – the document’s finished now, you can get on with rendering it (actually displaying the document contents in your browser window).
The <html> tag can have a few attributes, but there’s only one we really need to pay attention to at this stage: the ‘lang’ attribute.
The ‘lang’ attribute tells our browser what the predominant language of the web page is. This accessibility for people who use screen-readers to experience the World Wide Web. If our page is in English, our opening <html> tag would appear as follows:
You can find a list of HTML lang language definition codes here.
The <head> tag is a place to put information about your entire document and to refer to other resources it may use. It’s not usual to give the <head> tag an attribute, and it’ll be used only once in your document.
As shown in above, it’s expected that the <head> tag will have at least on other tag in it, the title tag.
We’ll talk about the <title> tag here.
Take a look at the text in the tab at the top of this page:
It’s the job of the <title> tag to define that text. In this case, the text would look like this:
<title>Tutorial: HTML for Absolute Beginners</title>
The <body> tag
The body tag is where you finally get to put your content – whatever appears in here is what we’ll see in a browser when we look at your web page:
<body> [The rest of your page content] </body>
Once again, there aren’t any attributes we’d use for the <body> tag at this stage, it’s just important to remember it encloses the entirety of the content that’ll appear in a web page, and it’s only used once in an HTML document.
Now that we’ve covered the basics of how a web page is structured, let’s do a little exercise.
You know how I said earlier that when we request a web page, we get it from a server – well the server can be your own computer! So if you’re up for it, you’re going to make a little web page, save it to your computer, and look at it in your browser.
On Windows, use the Notepad application (press your Windows key, and type ‘Notepad’, then press Enter).
On an Apple computer, you can use the ’TextEdit’ application (it’s in your Applications folder). Before you type anything into TextEdit, you’ll need to tell it to use plain text – go to the Format menu and select ‘Make Plain Text’. For once life seems much simpler on a Windows computer!
Enter the following into your text editor. You can copy and paste if you want, but I suggest you type it out – it’s a great way to learn:
<!DOCTYPE html> <html lang=“en-US”> <head> <title>This is my web page exercise</title> </head> <body> Hello, and welcome to my web page. </body> </html>
(That’s not quite valid HTML, but we’ll fix that in the next section).
Save the file as ‘example.html’ (make sure you use that ‘.html’ extension on the end of the file).
Now, in your browser, open the file by pressing ctrl-O (on Windows) or command-O (on Mac), navigate to where you saved your text file, and you should see the following:
In the next section we’ll start putting some proper content into our web page.
So finally we get to work on some actual content for our web page.
We’ve looked at the fundamental outline of a HTML document – the <html>, <head> and <body> tags so far. Now we’ll look at the tags we can use inside the <body> section to structure our content.
And just a note – all the tags we look at from here on are designed to be used only within the <body> section of a web page.
The tags we’re about to look at are to give information about our web page’s content to the browser. It’s to tell our browser how we want the content to be structured and laid out.
(We don’t really have much control over the finer points of appearance in HTML – that’s CSS’s job. We’ll look at what HTML does have for defining appearance in the next section.)
That’s P for Paragraph. We use the <p> tag to house our content, usually written. A browser will put a small amount of space between <p> tags to give some definition to our paragraphs, like when you press Return or Enter in a word processor program.
When you made you example web page and displayed it in your browser, I told you the HTML wasn’t quite valid. That’s because content like text should always appear in another tag, not just on its own in the body. Otherwise, the browser doesn’t really know how to display it.
(Notice the browser displayed it anyway – they’re very tolerant of poor HTML)
It could appear in an HTML document like this:
<body> <p> Even though this is example text, notice how we’re using indentation here. Which is to say that the p tag is a couple of spaces in from the body tag, and this text is a couple spaces in from the p tag. </p> <p> We use indentation in this way to make the document easier to read for humans. The browser doesn’t care about indentation at all. </p> </body>
(Note – since we’re only dealing with tags that appear inside the <body> tag, I won’t include the <html>, <head> and <title> tags for clarity. But remember we should always have them!)
Short for division. It’s really just a section of a web page to hold some other content. We use the <div> tag to break up sections of a document, and as containers for different kinds of content.
We could use it like this:
<body> <div> <p>This content has no point to make.</p> <p>Nor does this.</p> </div> </body>
That may not seem very useful to you, until we talk about the <span> tag, and how it and <div> differ.
A <span> is also another holder of content. For example:
<body> <span> Text doesn’t have to appear inside a p tag! </span> </body>
So why have two tags – <div> and <span> – for holding content with different names?
Because one of them is classed as being a ‘block’ tag, and the other as ‘inline’. We should talk about that:
So all tags that appear within the <body> of an HTML document can be classed as either inline or block.
What does that mean?
It means that when displayed one after the other, block tags stack up on top of each other. Inline tags are displayed next to each other (hence ‘in-line’).
Additionally, inline tags can only contain other inline tags, but block tags can contain both block and inline tags.
Now, if you do put block tags inside inline tags, the browser police won’t show up at your door. What will happen though, is that you can’t predict how a browser will display it. They’ll all guess, but they guess differently!
From now on, I’ll indicate whether a tag is classed block or inline, and you’ll know what I mean 🙂
The <a> tag is inline, and is used to put a link in a web page. Once upon a time the ‘a’ stood for ‘anchor’ – a way of marking (or anchoring) a place in a document. As of HTML5, it’s only used for defining links to a web page. Sometimes, the changing nature of HTML standards leads to tags having a name that doesn’t make much sense!
Until now, we haven’t really discussed attributes for our HTML tags. The <a> tag isn’t much use unless we use the ‘href’ attribute. ‘href’ stands for ‘hypertext reference’ and is the address we want our link to take us if we click it. For example:
<body> <div> <a href="http://www.google.com”>Do a google search.</a> </div> </body>
Would appear as follows:
Notice that the text between the opening and closing tags is the text we click to go to the page we link to.
Also notice that the link target includes the protocol ‘http://’ as well as the web page ‘www.google.com’. The link would probably still work if we left off the protocol portion of it, but it’s best not to let the browser guess our intentions. If we’re more specific, our results will be more certain.
(And what’s a protocol? It’s an agreed method of exchanging information. By having an agreed protocol in place, computers all over the world can exchange information in a predictable way.)
What’s with all the h’s? These tags represent different levels of headings in a web page, and they’re all block tags.
When you make a web page, you probably want a big bold title at the top – that’d be <h1>. Each section would start with an <h2>, and sub-headings would have <h3> and so-on.
<body> <h1>Why Dogs Are Better Than Cats</h1> <div>Introductory text making the dogs v cats case</div> <h2>The Smell Factor</h2> <div>I just like the way dogs smell, etc</div> <h2>Cat food is gross</h2> <div>It smells funny, and so on</div> <h3>The cat food caveat</h3> <div>Unless it's dried food, but the vet says...</div> <h2>Conclusion</h2> <div>Argument summation...</div> </body>
* For the record, I love both dogs AND cats 🙂 Got any spare??
Finally, a tag with a name that makes sense! The <img> tag is used to display images. It’s officially an inline element, but it’s also a little blocky.
I’ll explain why in a moment but I also have to point out something else odd about it – the <img> tag doesn’t have opening and closing tags. It only appears once per image. If that sounds weird, check out the examples below!
The <img> tag has two ‘required’ attributes. One is src, which tells the browser where to find the image to be displayed. The other is alt, meaning ‘alternative text’. This is the text to display if the browser, for some reason, can’t display the image. Most browsers will still display an image if it doesn’t have a value for alt, but as always it’s better to use it.
So here’s our example:
<body> <img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Margaret_Hamilton.gif" alt="The amazing Margaret Hamilton with her Apollo code printout." /> </body>
Note the single appearance of ‘img’ – it ends like this: “/>” and has a lot of attribute information. Here’s how it will appear in our browser:
(No, that’s not Amy from the Big Bang Theory, it’s Margaret Hamilton, responsible for the on-board flight software for the Apollo space program at NASA. She’s awesome.)
Now, I said earlier in this section that the inline <img> is also a little blocky. That’s because it supports two attributes normally only associated with block elements: height and width.
I think it’s great that we can change the height and width of an image on a web page, but it begs the question – how do we measure height and width on a screen?
Lots of way, but we’ll stick to two that’ll get you the furtherest fastest: percentage, and pixels.
First, let’s look at percentage. If we wanted to show the above image at half it’s original size, we’d set width and height to 50%, like this:
<body> <img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Margaret_Hamilton.gif" alt="The amazing Margaret Hamilton with her Apollo code printout." width="10%" height="10%"/> </body>
And here’s how it looks:
And now pixels – funny name, let’s find out what they are.
A pixel is the smallest space on your computer screen that can be lit up. You can imagine your screen as a tightly packed grid of teeny tiny light bulbs that can be lit in different colours.
When we light them up in the right pattern, we get a picture on the screen. So a pixel is like a tiny light-bulb, and it takes up space on your screen. We can then measure anything on a web page (not just images) in pixels.
The original photo of Margaret Hamilton is 566 pixels wide and 719 pixels tall. So we can specify the original dimension like this (‘px’ is short for ‘pixels’):
<body> <img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Margaret_Hamilton.gif" alt=“The amazing Margaret Hamilton with her Apollo code printout.” width=“566px” height=“719px”/> </body>
And if we changed the width attribute to 100px (100 pixels):
<body> <img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Margaret_Hamilton.gif" alt=“The amazing Margaret Hamilton with her Apollo code printout.” width=“100px” height=“719px”/> </body>
We’d get this:
Uh, she looks kind of squashy, doesn’t she? That’s because we kept the image height the same, but narrowed the width. If for some reason, we insist the image be 200px but scaled (to ‘scale’ an image is to alter its size) without distortion, we can just put in the width dimension and leave out height. The browser will work out the correct height for us – isn’t that nice? 🙂
<body> <img src="https://upload.wikimedia.org/wikipedia/commons/2/2e/Margaret_Hamilton.gif" alt=“The amazing Margaret Hamilton with her Apollo code printout.” width=“100px” /> </body>
These tags are all about lists, and we use them to make either a bullet-point list, or a numbered list. We’ll check out some examples below .
<ol> is short for ‘ordered list’, meaning a numbered list. We use the <ol> opening and closing tags to contain an entire list, and the <li> (list item) tag to define individual items in the list, like this:
<body> <p>My shopping list (I always buy things in the correct order):</p> <ol> <li>Eggs</li> <li>Milk</li> <li>Dog food</li> </ol> </body>
Note that we’re using opening a closing tags for <li>. You’ll see lots of examples where only the opening tag is used. As usual, if you do that the browser will understand your intention well-enough and give you a nice list, but there’s no guarantee it’ll work in the future. So close your <li> tags! 🙂
<ul> is short for ‘unordered list’, which is a fancy way of saying a list with bullet points instead of numbers, and we use it in the same way as <ol>:
<body> <p>My shopping list (I buy stuff any old how): </p> <ul> <li>Eggs</li> <li>Milk</li> <li>Dog food</li> </ul> </body>
Finally, <ul>, <ol> and <li> are all block tags.
Wow, there’s a lot of information in this section. I think it’s time to put what you’ve learnt to use!
Your talon-like mind not-withstanding, I know this is an awful lot of information. I think the key things to remember are that HTML gives us tags to:
If you forget which does what, you can always come back to this page to check again 🙂
All the tags we’ve discussed previously have added meaning to the content they enclose – they tell the browser they represent a certain kind of content – titles, images, text etc, or how that content should be arranged on a web page.
The following tags are mostly for changing the appearance of text in the browser. Let’s take a look at them now.
<em> is used to add emphasis. That emphasis almost always translates into italic text.
<em> is an inline style tag, because we may want to have several sections of italic text in a paragraph, and not have them stacking up on top of each other.
<body> <p> Allow me to <em> emphasize my point.</em> </p> </body>
Not much to it, hey?
Like <em>, <strong> is an inline tag. In this case, it will make text appear in bold.
A quick example:
<body> <p> This time, I shall make my point with <strong>strength</strong>. </p> </body>
Well that didn’t take long did it. Let’s test out our new tags in your example.html file.
Once again, even if you don’t remember the details, I think our main points this time around are:
Now we truly have covered an awful lot of information, but it’s a decent grounding in HTML fundamentals.
It’s telling how much of fundamental HTML is devoted to structure and meaning, compared to styling. I think that tells us very clearly what the priorities of HTML are: adding semantic meaning to web page content. Text styling? Not so much.
If you’d like to know more about changing the appearance of a web page, watch this space for our CSS For Absolute Beginners article 🙂
In addition to that, you’ve also learnt:
I mentioned our upcoming CSS article that will teach you about applying styling to web pages.
We’ll also be covering more in-depth information on HTML, that will build on the information covered in this article.
So we hope to see you again in the future!
In the meantime, please leave a comment to let us know how you went with your HTML experiments!