Common tags
Tags 1
Tags are the building blocks of websites, and there's plenty of them to go around. Let's check them out.
Body
As we've seen, <html> contains the HTML code. We've also encountered a tag that contains text that'll be displayed on the website.
Do you remember which tag that was?
<html> <body> </body> </html>
Great job! <body> holds the content of the webpage. We'll see why we need it in a bit.
Whitespace
We'll need a few more tags, though. Why? Let's see what happens when we publish some song lyrics without any other tags.
<html> <body> My favorite things Raindrops on roses Whiskers on kittens Bright copper kettles Warm woolen mittens </body> </html>
See how they all appear in a single line? That wouldn't make for an impressive website, would it?
Makes no difference
It doesn’t make a difference if we add multiple spaces or line breaks. HTML still interprets them as a single space.
<html> <body> My favorite things Warm woolen mittens </body> </html>
We'll have to use a few different tags to display our lyrics in a way we're proud of.
Heading 1
Let's add a heading to tell visitors what the next section is about. That's easily done with heading tags, like <h1>.
<html> <body> <h1>My favorite things</h1> Raindrops on roses Whiskers on kittens Bright copper kettles </body> </html>
Whoa! Now people will surely know what they're going to read about.
Headings 2
Notice the 1 in <h1>? That's there because there are different heading types that vary in size.
Let's add a few extra heading tags in ascending order to see what happens.
<html> <body> <h1>My favorite things</h1> <h2>Raindrops on roses</h2> <h3>Whiskers on kittens</h3> Bright copper kettles </body> </html>
Great stuff! See how the <h1> is the biggest heading? The 1 means it has the highest level of importance.
Headings 3
Let's add the opening tag of this heading from scratch.
<html> <body> <h1>My favorite things</h1> Raindrops on roses Whiskers on kittens Bright copper kettles </body> </html>
Perfect! <h1>, along with its closing tag </h1>, is what we'll use to create the highest level heading in a website.
Paragraphs 1
We can also separate lines in paragraphs. This paragraph tag is short and simple.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses Whiskers on kittens Bright copper kettles </p> </body> </html>
We've just made our first paragraph!
Paragraphs 2
Paragraphs come in handy when we want to separate different lines of text in the content.
Let's make two paragraphs with two lines each.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses Whiskers on kittens </p> <p> Bright copper kettles Warm woolen mittens </p> </body> </html>
Great job! Although, we won't need more than one paragraph for the moment.
Paragraphs 2
We've added a heading and two paragraphs, but the lyrics still need some improvement.
Let's use a few line breaks and make them shine.
Line breaks 1
We'll add each lyric on a separate line with the help of the line break tag, <br>.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses<br> Whiskers on kittens </p> <p> Bright copper kettles<br> Warm woolen mittens </p> </body> </html>
Sweet! That already looks way better.
Empty tags
<br> doesn't have a closing tag because it's an empty tag. Empty tags don't have content, but they can still help structure a page.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on roses<br> Whiskers on kittens </p> <p> Bright copper kettles<br> Warm woolen mittens </p> </body> </html>
Exactly! We can use as many <br> tags as we want, but we never have to close them.
Emphasis
What if we want to emphasize things in a web page? Well, there's a tag for that, and it's called <em>.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on kittens<br> Bright copper kettles<br> Warm woolen mittens </p> </body> </html>
Great job! We've just added emphasis to this important word.
Bold
There's also a tag for making text bold: the <strong> tag.
<html> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
There! We can use the <strong> tag to make what's important stand out in our webpages.
Tags 2
We've covered tags that appear in the actual website, but there's one tag that isn't displayed in the website. It's the <head> tag.
<html> <head> </head> <body> </body> </html>
Perfect! Let's see what we'll use this tag for, shall we?
Head
The <head> tag is used to add special information like the website title or how to style the page.
Title
Let's give our website a title. For that, we need to add the <title> tag inside the <head> tag.
<html> <head> <title>My Page</title> </head> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
That's it! Our webpage now has its own title.
All together now
<html> <head> <title>My page</title> </head> </html>
Yes, that's the order that makes sense!
Doctype 1
There's an important part of a website's code that we've neglected so far: the doctype.
Doctype 2
The doctype tells the web browser which HTML version we're using.
<!doctype html> <html> <head> <title>My Page</title> </head> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
Nice! If we skip the doctype, the web browser has to guess, which is never a great idea.
Using doctype
To set the doctype, we need to wrap a ! sign and the words doctype and html inside angular brackets.
<!doctype html> <html> <head> <title>My Page</title> </head> <body> <h1>My favorite things</h1> <p> Raindrops on <em>roses</em><br> Whiskers on <strong>kittens</strong> </p> </body> </html>
Nice! Now this website is flawless.
Comments