1. Computing

Discuss in my forum

HTML for Kids: All About Tags

The Tags and Elements that Make up a Web Page

By

Kid with Balloons

Kid with Balloons

Image courtesy iferrero from Stock.xchng

Note: This is part of a multi-page tutorial teaching kids how to use HTML and build web pages. If you haven’t read the first part, you should do so now: HTML for Kids: The Basics. These tutorials are written along with the About.com Guide to Kids’ Learning Actiivites.

So far you’ve learned some of the basics of HTML and the basics of style and grammar for web writing. You know a little bit about the tools and rules of HTML. Now it’s time to learn all about tags and how to use them to make your content stand out.

The Very Basic Tags of a Web Page

An HTML document is sort of like a strange, unbalanced monster. It’s a divided into just a head and a body and its body is much bigger than its head. There are certain tags that make up the monster that must go into every HTML page.

The monster’s head goes between the <head> and </head> tags. The body goes under the head and is between the <body> and </body> tags. The whole page including the head and body must be between <html> and </html> tags. The structure of the tags that make up the monster look like this:

<html>
<head>
</head>
<body>
</body>
</html>

The content or the words of what you want to say is inside the monster’s body. The tags you use help to make the body look the way you want it to.

Parts of a Tag

A tag is a word or abbreviation that describes some text on a web page. It may describe how you would like the text to look, like when you need some it to be in italics, or it may tell the browser more about the function of a part of a page.

Most tags are containers, meaning that they hold something else inside of them. These kinds of tags come in pairs and have a first and second part, called the opening and closing tags. Here is an example using the opening <strong> tag and its closing </strong> tag.

I want this word bolder because I’m trying to make a point. There are certain times when it’s appropriate to use bold in web writing, but you can choose to create the look anytime you want with the

The sample is made up of the following parts:

  • The opening tag. Here, the opening tag is the word “strong” in between angle brackets. (Remember, angle brackets are the less-than sign and the greater-than signs. The left angle bracket always goes first. Imagine the tag sitting in between two alligators, both with their mouths open trying to eat it.)
  • The text that you want to change the look of. In this case it is the word “bolder”.
  • The closing tag. This one looks a lot like the opening tag, but there is a forward-slash ’/’ before the word “strong”. You can imagine that the slash is like a person bringing their hand down in a diagonal direction, as if to say “I’m done.”

The Four Primary Tags

Every HTML page must include the <html>, <head>, <title> and <body> tags. They describe the four primary parts of a web page. Here is the HTML code for a very simple web page so you can what I mean.

<html>
<head>
<title>Wecome To My Page, Friends</title>
</head>
<body>
Here is where the visible text on the web page goes.
</body>
</html>

The <html> opening tag needs to be the first thing on the page and the </html> closing tag must be the last thing on the page.

Formatting the Page

Text on a web page is rarely one big block of text with no separation or spacing. It is broken up into sections, and each section is different depending on its function. In writing, groups of related sentences are called paragraphs. In HTML, they are also called paragraphs.

Paragraph Tags

To create a paragraph from a group of sentences on a web page, put an opening <p> tag before the sentence group, and a closing </p> tag after the last sentence of the group. These tags tell the browser to break up the text a little and start on a new line each time it sees a <p> tag.

You can use the paragraph tags to separate each sentence group on your web page, but when you use the paragraph tag, the browser starts the new paragraph on a new line without any empty space between paragraphs

Whitespace Tags

If you want to add a little empty space (which is called whitespace) between one element on a web page and another, place a break tag, or <br />, right at the spot where you want the blank space to appear.

The browser will move down to the next line, even if it is in the middle of a sentence or paragraph. Notice that the break tag is not a container and does not have an opening tag and closing tag. It is just <br />. It’s like saying, “I want a break right here, and I’m done. There is nothing more to say about that.”

Heading Tags

Sometimes, sections of a book or article are broken up not only just be paragraphs, but by sections, too. If notice, this page isn’t just a big bunch of paragraphs—it also has heading describing what each section is going to be about.

These are headlines and can be created by using a heading tag. Heading tags change the size and sometimes the font of the text, making it stand out from the rest. The biggest headline would be an <h1> tag and then there are varying sizes all the way to an <h6> tag.

Tags To Change the Text Style

There are a couple of other tags that you can use to change the style of the text to make something seem important or to let a reader know that they need to pay special attention to a word.

The <strong> tag is used to make text look bolder, and lets the reader know that this part is very important. The <strong> tag is a container, so the text that you want to appear bolder should start with an opening <strong> tag and end with a closing </strong> tag. Any text that is in between those tags will appear darker and bolder on a web page.

The <em> tag is used to let a reader know that they need to pay special attention to a section of text, and adds emphasis. Text formatted with the <em> tag will usually appear on a web page in italics, which makes it slightly slanted and sets it apart from the surrounding words. The <em> tag is also a container, so any text that you wish to appear in italics on a web page must start with an opening <em> tag and end with a closing </em> tag.

You can find other articles in this tutorial in the HTML for Kids section of this website.

©2014 About.com. All rights reserved.