Anatomy of HTML Tags
If you followed along in our previous article “Beginner HTML 5 Tutorial” you learned how to make a basic web page from scratch using a plain text editor. We also showed you how to make changes to your web page through the text editor. While this is a good start it doesn’t really resemble a web page just yet because we just placed some text into the document and did not add any code. Before we dive right into coding up our web page its important to understand what HTML tags are and how they make up the web.
HTML Tags
HTML stands for hyper text markup language and is used to structure a webpage.
You might be wondering, what are HTML tags? Quite plainly an HTML tag is an instruction given to the web browser that say how to format or structure the content of the webpage. These tags can also be referred to as elements. Multiple elements or tags on a page is known as markup.
If you open the index.html file that we made in our last tutorial in a browser you will see the paragraphs that you added have very little formatting, this is because we have not added any tags yet.
Note: Some web browsers will automatically add a “p” tag to a webpage if no tags are declared.
So what if you want to add some large headings, bold or italicized text? To do that we would need to add some HTML tags to our file.
There are hundreds of HTML tags so we will not be covering all of them in this lesson, no need to worry, you do not have to memorize every sing element. Understanding how they work is more important right now then being able to recite them all from memory. For a full list of HTML elements check out W3schoools reference page.
How tags are written
The way that the tags are written is quite simple once you understand how they work. There are some things that every HTML tag has in common. For example, all tags will start with an opening bracket, then the tag name, and then a closing bracket. You might remember the opening and closing brackets from good old elementary math class. The opening bracket is represented by the less than sign “<” (do not include the quotes) and the closing bracket is represented by the greater than sign”>”. All together the tag will look like this, “<tagname>” and this tag would be the opening tag. Most HTML tags have an opening tag and a closing tag. A closing tag is identical to the opening tag with one exception, the closing tag will have a forward slash “/” right before the tag name. The closing tag would look like this, “</tagname>”. You now have an opening tag “<tagname>” and a closing tag “</tagname>” in between the two tags is where you would put your web page content. Like so:
<tagname>web page content</tagname>
Not all HTML tags have a closing tag, some of the tags are self closing such as the image tag. We will cover self closing tags in more detail later on in this series.
The tag “tagname” is not a real HTML tag so it wont have any effect on your web page we just used this for informational purposes but continue reading and we will show you some actual, useful HTML tags and you will be well on your way to making a well formatted web page.
Tags will usually have HTML attributes, which are used to control aspects of the tag such as height, width, color etc…
Attributes should always go in the opening tag, after the tag name. We will cover attributes in more detail later.
Real HTML tags
The first tag I would like to show you is a boring tag however it is quite essential to making your web pages behave correctly. This take is known as the document declaration tag or doctype. The doctype tag for HTML5 is written:
<!DOCTYPE html>
You might be wondering, why is this doctype tag so important. HTML has gone through several different versions, the doctype tag tells the browser that we are using HTML and what version we are using. The doctype tag should be the very first tag in your web page.
While the doctype tag is an important one and should be included in every web page that you make it doesn’t really make a visual difference (unless you are using and older version of html or a different markup such as xhtml). If you add the doctype tag to the index.html file that we made in the previous tutorial (don’t forget to click save and refresh the browser) you will see that everything still looks the same. Next we will be showing you how to nest elements, then we will show you a few tags that will help format your text.
Nesting Elements
HTML elements, can be nested. Nesting is simply placing one element inside of another. For example the title tag is nested inside of the head tag, content, like header tags go inside the body tag and everything is nested inside the html tag.
<!DOCTYPE html>
<html>
<head>
<title>Title of Webpage</title>
</head>
<body>
<h1>Head tag nested in body</h1>
</body>
</html>
It is important to nest your tags correctly otherwise you will get unexpected results. Make sure you close your inside tags before the end of the outer tag closes.
<head>
<title>Improperly nested title
</head>
</title>
Heading tags
In our index.html we should now have the doctype tag and a few paragraphs of text, it is not much but it’s a start. Now let us give our web page a heading, some nice big bold words that will let your readers know what your web page is about. To start we will need an opening tag, this one is called a heading 1 tag and it is written like “<h1>” next we will need to add our heading text something like “My First Webpage” will suffice (don’t include the quotation marks). And finally we will add our closing tag “</h1>”, so all together it should look like this:
<!DOCTYPE html> <h1>My First Webpage</h1> a few lines of text following the heading 1 tag.
There are six different heading tags, h1 through h6, each heading tag has a different size of text, the heading 1 tag being the largest heading and the heading 6 tag being the smallest heading. All you have to do is change the number in the opening and the closing tag, so if you wanted to make a heading 2 tag you would simply write:
<h2>This is a heading 2 tag</h2>
Final Thoughts
Before we call this tutorial to an end I want to show you one more HTML tag to help spice up your web page, this one is called the paragraph tag. Until now your index.html file has a couple of headings and a few lines of text but no HTML tags to control how those paragraphs are formatted. In fact if you edit your file and put a lot of blank space between two paragraphs you will notice that no matter how many blank spaces you put between the paragraphs there will be no effect on the final result. In order for the browser to know that the text is a paragraph we have to tell it. We do this by placing an opening paragraph tag before each paragraph and a closing paragraph tag at the end of each paragraph. The paragraph tag is quite simple the all you need to do is place the letter p in place of the tag name like this:
<P>This is a paragraph</p>
Try adding several paragraphs, each one separated with “p” tags and take a look at how each paragraph is formatted.
A great way to practice is by writing a letter, you cant just make something up, grab something out of a book or even use an old homework assignment, anything that you have lying around will work. Try using all 6 of the heading tags and use a paragraph take for each new paragraph.
Your HTML file should now look something like this:
<!DOCTYPE html> <h1>My First Webpage</h1> <p>a few paragraphs of texts following the heading 1 tag.</p> <p>You can put anything you want here.</p> <h2>A heading 2 tag</h2> <p>another paragraph of text following the heading 2 tag.</p> <p>You can put anything you want here.</P> <h3>A heading 3 tag</h3> <p>another paragraph of text following the heading 3 tag.</p> <p>You can put anything you want here.</p> <h4>A heading 4 tag</h4> <p>another paragraph of text following the heading 4 tag.</p> <p>You can put anything you want here.</p> <h5>A heading 5 tag</h5> <p>another paragraph of text following the heading 5 tag.</P> <p>You can put anything you want here.</p> <h6>A heading 6 tag</h6> <p>another paragraph of text following the heading 6 tag.</p> <p>You can put anything you want here.</p>
Now that you have a good understanding of how tags are written we can really start to fly through them, in our next tutorial we will cover the head tag. We will show you what it is what it does and how it is used.
-
Previous:
-
Next: