Reading Time: ( Word Count: )

Understanding HTML Tags

Description: This post may contain affiliate links; this means that if you click on a link and buy something we recommend, we can get a commission. Read more about the affiliate disclosure here.

The code within an HTML file consists of text surrounded by tags. These tags indicate where the formatting should be applied, how the layout should appear, what pictures should be placed in certain locations, and more.

For example, suppose you wanted a certain word to be italicized, like this:
Everything is on sale.”
In HTML, there’s no Italics button to click, like there is in a word-processing program. Therefore, you have to “tag” the word that you want to be italicized. The code to turn on italics is <i>, and the code to turn italics off is </i>. Your HTML code would look something like this:
<i>Everything</i> is on sale.
That’s an example of a two-sided tag, which encloses text between opening and closing tags, in this case <i>, and </i>. Note the forward slash in the closing tag (</i>).

That slash differentiates an opening tag from a closing tag. With a two-sided tag, there is always a corresponding closing tag for every opening tag.

To understand how this system of tagging came about, you need to know that back in the olden days of the Internet, nearly everyone connected to it by using a dial-up modem, at speeds ranging from 2400 bps to 28.8 Kbps. That’s really slow. Text files transfer much faster than binary files, so for any type of information-sharing system to be popular, it had to be text-based. Otherwise, people would doze off while waiting for a
page to load.


People designing Web pages also wanted their pages to be attractive. They couldn’t just format pages in a word processor, though, because every word processor handled formatting differently, and it was impossible to know which one a visitor to a site might be using. Word processing files are also much larger than plain text files.

The Web’s creators developed an elegant solution. Instead of sending the formatted pages over the Internet, they created an application—a Web browser—that could interpret plain-text code (HTML tags) as formatting instructions. The text could be sent quickly and efficiently in plain-text format, and then be processed and displayed attractively
and graphically on the local PC.


HTML worked great all by itself for all kinds of text formatting, but some Web designers wanted to include graphics on their pages. To accommodate this, the <img> tag was created, which designers use to refer to a graphic stored on a server. When the Web browser gets to that tag, it requests that the image file be downloaded from the server and displayed on the page. (You’ll learn how to insert images in Chapter 9, “Displaying

The <img> tag is different in several ways from the tag. It is one-sided, meaning it does not have a closing tag, and it takes attributes.

An attribute is text within the tag that contains information about how the tag should behave. For example, for a <img> tag, you have to specify a source, abbreviated src. Here’s an example:
<img src=”yourpicture.gif”>

This tag uses the src= attribute, and specifies that the file yourpicture.gif be displayed.

With HTML, you can also create hyperlinks from one page to another. When a visitor to a Web site clicks a hyperlink, the Web browser loads the referenced page or jumps to a marked section (a “bookmark”) within the same page.

The tag for a hyperlink is <a>, a two-sided tag, but most people wouldn’t recognize it without the attribute that specifies the file or location to which to jump. For example, to create a hyperlink with the words Click Here that jumps to the file index.htm when clicked, the coding would look like this:

<a href=”index.htm”>Click Here/a>

There’s a lot more to HTML, of course, but that’s basically how it works. Plain text is marked up with tags that indicate where elements such as formatting, hyperlinks, and graphics should be applied, and a Web browser interprets those tags and displays the page in its formatted state. The trick, of course, is to know which tags to use, and where they’re appropriate, and what attributes they need. And that’s the subject of this book.

About the Author

Shayan Ahmed

Shayan is a passionate Blogger who has written technology-intensive articles since 2018, is a WordPress enthusiast, Bachelor, and also read Computer Engineering. You can find many interesting articles and help here.



Most Recent

Join Us

Follow Us

Most Related

Submit a Comment

If you have any idea please give to us. Or leave a beautiful comment to our post.


Leave your suggestion


Join us for latest deals and updates

Share This