Every website you visit, from a college portal to a digital library catalogue, is built on a foundation you rarely see: HTML. Short for HyperText Markup Language, HTML is the standard language used to structure content on the web. If you are studying information processing or simply curious about how web pages work, understanding HTML tags is the first practical step. Tags are the small instructions that tell a browser how to arrange and display text, images, and links. This guide breaks down what tags are, the essential ones you must know, and how to format text effectively.
Table of Contents
- What are HTML tags and why they matter
- The difference between a tag and an element
- Paired tags and empty tags
- The essential structural tags
- The DOCTYPE declaration
- The html tag
- The head and title tags
- The body tag
- The paragraph tag
- Formatting text with tags
- Heading tags
- Bold text: b and strong
- Italic text: i and em
- A note on modern practice
- Bringing it together
What are HTML tags and why they matter
HTML tags are the building blocks of every web page. They are keywords or letters enclosed within angle brackets, the less-than (<) and greater-than (>) symbols. When a browser reads an HTML file, it does not display the tags themselves. Instead, it reads them as instructions and shows the content accordingly. For example, when text is wrapped inside a paragraph tag, the browser displays it as a separate block of text.
Most tags work in pairs. There is an opening tag that signals where something begins and a closing tag that signals where it ends. The closing tag looks identical to the opening tag but includes a forward slash. So a paragraph starts with <p> and ends with </p>. This pairing tells the browser exactly which portion of content the instruction applies to.
It is worth noting that tags in HTML are not case-sensitive, meaning a title tag could technically be written in uppercase or lowercase and still work. However, the recommended practice is to write all tags in lowercase for consistency and readability.
The difference between a tag and an element
Students often use the words “tag” and “element” interchangeably, but there is a subtle distinction worth knowing. A tag is a single markup instruction enclosed in angle brackets. An element is the complete unit, which includes the opening tag, the content inside, and the closing tag together. For instance, in <h1>Welcome</h1>, the <h1> and </h1> are tags, while the entire structure is the heading element. In everyday conversation, developers treat them as the same thing, so do not worry too much about the distinction at this stage.
Paired tags and empty tags
There are broadly two types of tags. Paired tags have both an opening and a closing part, like the paragraph and heading tags. Empty tags, also called self-closing or void tags, do not wrap around any content and therefore do not need a closing tag. The line break tag, written as <br>, is a common example. It simply forces the content after it onto the next line without starting a new paragraph.
The essential structural tags
Certain tags are required for a web page to display correctly. These form the skeleton of every HTML document. Understanding how they nest inside one another is the key to building a valid page.
The DOCTYPE declaration
Before any tags begin, every HTML document starts with a single line: <!DOCTYPE html>. This is technically a declaration rather than a tag. It tells the browser that the document is written in the latest version of HTML, known as HTML5. It has no closing part and must always sit at the very top of the file.
The html tag
The <html> tag is known as the root element. It marks the beginning and end of the entire document, and every other tag on the page must sit inside it. Think of it as the container that holds everything else. It usually carries a language attribute, such as lang="en", which tells the browser the page is written in English.
The head and title tags
Inside the html element, the <head> section contains information about the page that is not displayed on the screen itself. This includes metadata, character settings, and links to styling files. Within the head, the <title> tag defines the text that appears on the browser tab. Although the title does not show up in the main page body, it is important for both users and search engines, making it a small but significant detail.
The body tag
The <body> tag defines the part of the document that visitors actually see. It contains all the visible content such as headings, paragraphs, images, hyperlinks, tables, and lists. There can only be one body element in a document. Everything you want a reader to view goes between the opening and closing body tags.
The paragraph tag
The <p> tag defines a paragraph of text. Browsers automatically add a little space before and after each paragraph, which separates blocks of text neatly. This is one of the most frequently used tags because most web content is, at its core, written text.
When you put these tags together, the basic structure of an HTML document looks like this in plain terms: the DOCTYPE comes first, then the html tag opens, containing a head section with a title, followed by a body section with headings and paragraphs, and finally the html tag closes. This nesting order, where the tag opened first is closed last, is a rule worth remembering. Tags must close in the reverse order they were opened, much like a set of nested boxes.
Formatting text with tags
Once the structure is in place, the next step is shaping how text appears. HTML offers several tags to make words stand out, whether through size, weight, or emphasis. There is an important principle here: modern HTML separates meaning from appearance. Some tags exist purely to change how text looks, while others carry semantic meaning that helps browsers, search engines, and screen readers understand the content.
Heading tags
HTML provides six levels of headings, ranging from <h1> down to <h6>. The <h1> tag represents the most important heading, usually the main title of a page, while <h6> is the least prominent. Browsers display higher-level headings in larger, bolder text. These tags do more than change size. They create a logical hierarchy of information that helps readers and search engines grasp how a page is organised. For this reason, you should use headings to structure content, not simply to make text bigger.
Bold text: b and strong
HTML gives two ways to make text bold, and the difference between them matters. The <b> tag makes text bold for visual purposes only, without adding any extra importance. The <strong> tag also displays text in bold, but it carries semantic weight, signalling that the content is genuinely important or urgent.
While the two look identical on screen, they are read differently by assistive technology. Screen readers announce strong text with added emphasis, whereas bold text gets no special treatment. This is why using strong for important warnings or key terms is considered better for accessibility and search engine optimisation. A good rule is to ask whether the text needs special meaning or just special styling. If it needs meaning, choose strong.
Italic text: i and em
The same logic applies to italics. The <i> tag styles text in italics for visual reasons, often used for technical terms, foreign words, or names. The <em> tag, short for emphasis, also produces italic text but indicates that the word should be stressed or emphasised in tone, changing the meaning of a sentence. As with bold tags, the emphasis tag is the semantic choice that conveys intent to browsers and screen readers.
These tags can also be combined. You can place an emphasis tag inside a strong tag to make text that is both bold and italicised while still carrying meaning. The key advice is to use emphasis sparingly. If too many words are highlighted, the emphasis loses its effect and the content becomes harder to read.
A note on modern practice
You will still encounter the <b> and <i> tags in older code, and they remain valid. However, modern HTML encourages beginners to focus on semantic tags first. There is also a broader shift in web development where visual styling, such as colours, font sizes, and spacing, is increasingly handled by CSS rather than HTML tags. HTML decides what content means, while CSS decides how it looks. Keeping these two responsibilities separate makes web pages cleaner, more accessible, and easier to maintain as they grow.
Bringing it together
Learning HTML tags is less about memorising a long list and more about understanding a few patterns. Tags come in angle brackets, usually in pairs, and they nest inside one another in a clear order. A handful of structural tags, namely html, head, title, and body, form the skeleton of every page. Within that skeleton, paragraph and heading tags organise text, while formatting tags shape how individual words appear. Once these basics feel familiar, building or reading a simple web page becomes far less intimidating, and you will have a solid base for exploring more advanced topics like attributes, links, and styling.
What do you think? Now that you understand the difference between visual tags like <b> and semantic tags like <strong>, which approach do you think serves readers better in the long run? And how might thinking about HTML structure change the way you organise information in a digital catalogue or repository?
References
- https://www.tutorialspoint.com/html/html_basic_tags.htm
- https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax
- https://www.geeksforgeeks.org/html/tags-vs-elements-vs-attributes-in-html/
- http://www.w3schools.com/TAGs/tag_body.asp
- https://www.engr.colostate.edu/ets/html-structure/
- https://www.geeksforgeeks.org/html/html-course-structure-of-an-html-document/
- https://libguides.utk.edu/libguide-accessibility/strong-emphasis
- https://www.how.dev/learn/html/text-formatting-tags/
- https://www.w3schools.com/html/html_formatting.asp
Leave a Reply