- Published on
Web Dev Essentials: Common HTML Tags (Part 1)
- Authors
- Name
- Yevhenii Airapetian
- @airapetian_dev
Web Dev Essentials: Common HTML Tags (Part 1) by Y. Airapetian
Topic: Common Tags in HTML
Author: Y. Airapetian
Estimated Read Time: 14 mins
Contents:
1. Introduction
2. H1-H6
4. Paragraphs
6. Lists
8. Summary
9. Useful Links
Introduction
An experienced web developer may have a lot of cool tools in their programming toolbox. However, the journey starts with the basics. That's why we'll focus on the building blocks of HTML. More precisely, we'll talk today about the most commonly used HTML tags that help lay down textual data.
Note: This post will focus solely on the most widely used HTML tags and will omit (almost )any code that concentrates on CSS.
H1-H6
Typically, when we write something on paper, we use certain content pieces. If it is, for example, a list of groceries, we may name it a "Grocery List" or "To buy". In HTML, we would use a heading tag for this.
There are 6 types or levels of headings in HTML, starting from level 1, or H1, and ending with H6. We write them as follows:
//other HTML tags here
<h1>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>
<h4>Level 4 Heading</h4>
<h5>Level 5 Heading</h5>
<h6>Level 6 Heading</h6>
//OTHER HTML tags here
Which will look like this:
Figure 1.1: An example of H1-H6 headings displayed in the browser.
The heading tag consists of an opening tag
<h1>
a closing tag
</h1>
and the content that goes inside these tags
<h1>Grocery List</h1>
The numbers after the h part of the tag denote what level of a heading it is. If you don't change the appearance of the heading tag, the browser you use will display it with the default styles. So, the
<h1>myFlix Movie Library</h1>
tag will have the biggest font size in the headings list. On the contrary, the
<h6>Catch me if you can, 2002</h6>
has the smallest font size. As all the other heading levels in between get a smaller number in the heading name, they get smaller and smaller and vice versa. The default browser styles vary between browsers, but usually, headings are displayed in bold text as a block-level HTML element with a top and bottom spacing (margin). The level 1 heading has a font size of 2em while the level 6 one has it at .67em
With headings, you can use common attributes like title, class, id, data-attribute, and many others and override the built-in styles by changing font sizes, font weights, colors, positioning, display, and a lot of other properties.
Practical use cases
Not only do the heading levels differ in size but they are also important for semantics. When you mark down your page content, you should use appropriate elements.
Imagine, you have an online store with a search field and laptop product listings. For this page, you'll typically use one h1 heading named "Laptops". Then, if the user decided to filter the results of the laptop search, choosing only "HP" or "Apple" brands, you could display the relevant sub-headings with the h5 tags. Then, each product could have a laptop name written with the help of the h3 or h4 tags.
By specifying your page name with the h1 tag and the more repeated pieces of content with the h4 or h6 tags, you help your app rank better in the search results and follow the logical content hierarchy. Hence, you should have only one h1 HTML element on your page, but, possibly, several throughout the whole app. I hope you get the point 😉.
Paragraphs
Remember writing boring compositions on the topic "How I spent my summer holidays"? You typically do this by writing chunks of paragraphs.
Well, an HTML paragraph tag is no different. In web development, we typically employ it to mark down a piece of textual content.
//other HTML tags here
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, commodi.
Debitis voluptatibus dolor eaque natus illum officia animi quisquam unde repellendus maiores,
distinctio accusantium ullam. Mollitia ab labore deleniti consectetur.
</p>
//OTHER HTML tags here
It looks like below:
Figure 1.2: An example of a paragraph tag rendered in the browser.
Just like the h1 tag, the p tag consists of an opening
<p>
and a closing
</p>
tags and the content in between
<p>Harry Potter and the Sorcerer's Stone is the first movie in the series of the Harry Potter movie saga..</p>
To remind you, unlike the different levels of the heading tag, there's only one p tag.
A p tag is a block-level element and typically has a top and bottom spacing.
The paragraph tag supports the same attributes and styles that a heading tag does and its styling posibilities are just limitless.
Practical use cases
Returning to our online store example, if you would like to add some laptop description, you could employ the paragraph tag. It is common to use paragraphs in HTML to mark down chunks of text, for example, for a blog post, some product descriptions, and so on.
//other code here
<div>
<h5>Inception</h5>
<img src="./img/inception.jpg" title="Inception" alt="Inception" />
<p>Inception is a thriller movie</p>
<p>The movie appeared in theaters on July 16, 2010</p>
<p>It was directed by Christopher Nolan..</p>
</div>
//other code here
Figure 1.3: An example of an HTML page with basic elements.
Lists
We use lists every day in one way or another, for example, when going for groceries or using to-do apps. It is an HTML tag designed specifically for displaying a list of related items. Given that, an HTML list tag may be unordered, ordered, or a definition list. Let's break them down one by one.
Unordered Lists
An unordered list is a list of related items that don't have any numeration or other countable markers. In other words, it doesn't matter to us in which order the items will go:
//other tags here
<h4>My grocery list</h4>
<ul>
<li>Copy books for classes</li>
<li>Sewing supplies</li>
<li>Blue and red Spandex fabric</li>
<li>Spidy web</li>
<li>Milk and eggs for aunt May</li>
</ul>
//other tags here
Figure 1.4: An example of an unordered HTML list.
See those identical round markers before the unordered list items?
An unordered list consists of a list items container (opening and closing ul tags - hence the name, unordered)
<ul>
</ul>
and the list items (opening and closing li tags) that go inside the container
<li></li>
<li></li>
<li></li>
with the textual data inside the items
<li>Red</li>
<li>Green</li>
<li>Blue</li>
Note that the unordered list consists not only of the li items itself; to be a list tag it needs the ul container, otherwise it won't render properly in the browser.
By default, the browser shows this tag with some sort of a bullet point (either a filled-in round black marker or other), but with the help of CSS styling, you can add whatever markers you see fit, even images. The supported built-in bullets are circles, disks, and squares, either hollow or filled-in. Typically there's a top and bottom spacing for the whole tag and a left spacing (padding) for the list items. The ul element is a block-level element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unordered List Styles</title>
<style>
.disc {
list-style-type: disc;
}
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.none {
list-style-type: none;
}
</style>
</head>
<body>
<h2>Unordered List Bullet Points</h2>
<h2>Disc Bullets</h2>
<ul class="disc">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Circle Bullets</h2>
<ul class="circle">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Square Bullets</h2>
<ul class="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>No Bullets</h2>
<ul class="none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
Figure 1.5: Unordered lists with and without bullet points.
Ordered Lists
On the contrary, an ordered list, ol, is employed whenever we need to specify a list of ordered list items. In this case, the items' order may or may not be important to us. Either way, the ordered list orders the items by, for instance, numbering them.
<h4>Tasks for today</h4>
<ol>
<li>Exercise</li>
<li>Read a book</li>
<li>Rest 15 minutes</li>
<li>Save the world</li>
<li>Pick up Batmobile from the repair service</li>
<li>Practice saying "I'm Batman"</li>
</ol>
As you can see, the ul list container gets replaced by the ol one here.
The typical styles of an ol tag considering spacing is identical with the ul tag, but the former gets decimal bullet points which you can override by your styles. The ol tag supports numerous bullet points, including decimal, roman, armenian, and many others. This type of list is also a block-level element.
Figure 1.6: An example of an ordered HTML list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ordered List Styles</title>
<style>
main {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
h1{
text-align: center;
}
.decimal {
list-style-type: decimal;
}
.lower-alpha {
list-style-type: lower-alpha;
}
.upper-alpha {
list-style-type: upper-alpha;
}
.lower-roman {
list-style-type: lower-roman;
}
.upper-roman {
list-style-type: upper-roman;
}
.lower-greek {
list-style-type: lower-greek;
}
.armenian {
list-style-type: armenian;
}
.georgian {
list-style-type: georgian;
}
</style>
</head>
<body>
<h1>Ordered Lists</h2>
<main>
<div>
<h2>Decimal Numbers</h2>
<ol class="decimal">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Lowercase Alphabet</h2>
<ol class="lower-alpha">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Uppercase Alphabet</h2>
<ol class="upper-alpha">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Lowercase Roman Numerals</h2>
<ol class="lower-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
<div>
<h2>Uppercase Roman Numerals</h2>
<ol class="upper-roman">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Lowercase Greek Letters</h2>
<ol class="lower-greek">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Armenian Letters</h2>
<ol class="armenian">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Georgian Letters</h2>
<ol class="georgian">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
</div>
</main>
</body>
Figure 1.7: Ordered lists.
Definition Lists
The last in our list of lists is the definition list (excuse my tautology).
It is used to create a definition term together with the definition description.
<dl>
<dt>Book</dt>
<dd>A written or printed work consisting of pages glued or sewn together along one side and bound in covers</dd>
<dt>News paper</dt>
<dd>A printed publication (usually issued daily or weekly) consisting of folded unstapled sheets and containing news, articles, advertisements, and correspondence</dd>
<dt>Copy book</dt>
<dd>A book containing models of handwriting for learners to imitate.</dd>
</dl>
Figure 1.8: An example of an HTML definition list.
A definition list consists of a definition list container
<dl>
</dl>
inside which the definition terms and definition descriptions go in pairs one after another. First is the term or what needs to be described. Then goes the term description.
<dl>
<dt>Term</dt>
<dd>Description</dd>
//other terms and descriptions go here
</dl>
As before, the list typically gets the top and bottom spacings in the most common browsers as well as the left spacing for the definition descriptions. There are no markers though. With a bit of CSS styling, you can turn it into a fancy-looking and appealing HTML list.
Lists can be styled any way you like, including specifying custom bullet points or removing them, changing fonts and colors, etc.
Lists use cases
Anything having to do with ordering and numbering items of any kind is typically done using the HTML lists. This includes creating to-do apps, listing products in an online store, or creating a website navigation. In the latter case, you would typically mark down an unordered list inside which would go the links to your website pages. Take a look at a basic example with a simple styling.
They can also nest other lists making a tree-like structure as well often used for navigations and sidebars.
<h4>Portfolio</h4>
<ul>
<li>
<a href="home.html">Home</a>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="projects.html">Projects</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
</ul>
Figure 1.9: An example of CSS styles.
Figure 1.10: An example of a styled HTML navigation.
As mentioned before:
1. Unordered lists are perfect for items whose order is not important (groceries, menu items).
2. Ordered lists are used for numbering or categorizing elements in some way (to-do lists, product specifications, step-by-step guides).
3. Definition lists should be used for the term/description pairs (word definition apps).
Summary
We touched upon the basic HTML elements today, namely headings, paragraphs, and lists. We talked about what these tags are, what tasks they perform, where and how they are mainly employed, and how they look in the browsers by default. Next time we'll resume our topic by diving into other HTML tags that deal with text, such as spans, pres, and quotes to name a few.
See you next time!
Y.A.
Useful Links
