When building an HTML page, the availability of HTML tags is almost limitless. There is an entire world of HTML tags waiting to be used to build your perfect website. For this tutorial, you will learn a wide variety of HTML tags that are specific to categories within the HTML world, all of which are used to enhance your website.
This tutorial will explore the creative effects of HTML (Hypertext Markup Language). All you need to start with is a simple code editor such as Notepad ++.
The Essentials of HTML Tags
If you are brand new to HTML, please review the blog HTML for Dummies before going further into this article.
Within the world of HTML, there are categories and many tags within each. Since there are too many HTML tags to review within this article, the focus will be on specific tags in certain categories to provide insight into these areas. HTML tags are containers for the contents within the web page. Each tag holds specific content which will be explored further.
The following are categories with the HTML element tag options that will be explored in this document.
HTML Categories
Sections
Tags: body, h1, h2
Grouping
Tags: p, ul, li
Text
Tags: b, u
Embedded Content
Tag: img
Tables
Tags: table, th, tr, td
HTML Tags in Action
Now it’s time to see what these tags actually do.
Sections
Tags: body, h1, h2
Tags explained:
- body: all content displayed on the web site goes within these tags
- h1: heading level 1
- h2: heading level 2
For the tags in the Sections category, you will see the body tag. This is where all of your web content goes.
<!DOCTYPE html>
<html>
<body>
</body>
</html>
You can add headings to your page content using the h1 and h2 tag.
<!DOCTYPE html>
<html>
<body>
<h1>This is the Top Level Heading</h1>
<h2>This is the 2nd Level Heading</h2>
</body>
</html>
Grouping
Tags: p, ul, li
Tags explained:
- p: used for placing text within this area
- ul: stands for unordered list – used for bullet lists
- li: used in association with ul for bullet lists
For the tags in the Grouping category, you will see the body tag. This is where you place text using the p tag.
<!DOCTYPE html>
<html>
<body>
<p>I can write and display my text within this area</p>
</body>
</html>
You can also display a bullet list using the ul and li tags.
<!DOCTYPE html>
<html>
<body>
<p>I can write and display my text within this area</p>
<ul>
<li>this is the first bullet in the list</li>
<li>this is the 2nd bullet in the list</li>
<li>this is the third bullet in the list</li>
</ul>
</body>
</html>
Text
Tags: b, u
Tags explained:
- b: bold text
- u: underlining text
For the tags in the Text category, you will see the b and u tags. The b tag simply makes your text bold.
<!DOCTYPE html>
<html>
<body>
<p><b>My text now has a bold face</b></p>
</body>
</html>
The u tag on the other hand, provides an underline for your designated text.
<!DOCTYPE html>
<html>
<body>
<p><u>My text is now underlined</u></p>
</body>
</html>
You can of course combine these two tags to create bold and underline.
<!DOCTYPE html>
<html>
<body>
<p><u><b>My text is now underlined</b></u></p>
</body>
</html>
Embedded Content
Tag: img
Tags explained:
- img: used for placement of images into your web page
For this tag in the Embedded Content category, you will see the img tag. The img tag simply allows you to add an image into your web page. You must designate the source of the image so that your web site knows where to pull the image from.
<!DOCTYPE html>
<html>
<body>
<img src=”wave.jpg” alt=”blue ocean wave”>
</body>
</html>
Side Note: The alt tag shown in this illustration helps you as you code, to remember what this image is, and it also becomes apparent for the sight impared in case they are listening to the web page. The image description will be called out.
Tables
Tags: table, th, tr, td
Tags explained:
- table: designates a table layout
- th: used for the top heading row of the table
- tr: used for the table row
- td: used for the table columns
For the tags in the Tables category, you will see the table, th, tr, and td tags. These tags simply allow you to define and create a table in your web page.
<!DOCTYPE html>
<html>
<body>
<table border=”1″ width=”600px”>
<tr>
<th>Column 1 heading</th>
<th>Column 2 heading</th>
</tr>
<tr>
<td>second row – column 1</td>
<td>second row – column 2</td>
</tr>
</table>
</body>
</html>
Final Note
There are so many HTML tags to choose from and only you will know which tags are necessary as you build your custom web page. As you dig deeper into the design of the page, you will find that exploring more of these tags will assist you in ways you never thought possible.
Where to Next?
This World of HTML Tags introduction should provide a starting point for further inquiry into website design, layout and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest and inspires you to explore further and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
