What is an HTML tag and Which Ones are the Most Important?
Getting started in the world of web programming is a decision that more and more people are making, aware of the professional opportunities of having this type of knowledge so valued by today’s companies. Understanding the meaning and composition of HTML tags is one of the first steps that any professional aspiring to become a web developer or engineer should take.
What is an HTML tag?
HTML is a markup language, which means that it is written in code that can be read by a person without having to compile it first. In other words, the text on a web page is “flagged” with these codes to instruct the web browser on how to display the text. These markup tags are the HTML tags themselves.
When you write code in HTML, you are writing HTML tags. All HTML tags are made up of several specific parts, including:
- The character “less than” <
- A word or character that determines which tag is being written
- Any number of HTML attributes you want to use, written in the form name = ”value”
- The “greater than” character>
Hypertext (HTML) is a computer language that is most web pages and online platforms. HTML is not considered a programming language, as it cannot create dynamic functionality. However, web users can create and structure sections, paragraphs, and links using elements, tags, and attributes.
There are currently 142 HTML tags available that allow the creation of various elements. Although some newer computers no longer support some of these, it is important to be aware of their existence.
However, HTML has been evolving in recent years. To give us an idea, the first version had only 18 labels. Since then, each new version has brought new tags and attributes. The most important update was the 2014 introduction of HTML5. The main difference between the two is that the new one supported new types of form controls. It also included various semantic tags that better described the content, such as <article>, <headers>, and <footer>.
How do HTML tags work?
Most web pages have several different HTML pages. For example, a home page, a product page, a contact page, etc. Each of these has separate HTML. HTML documents are files that end with .html or .htm . A browser reads the file and displays its content for Internet users to see.
As we have commented previously, all HTML pages contain a series of HTML elements that at the same time have different tags and attributes. In other words, HTML elements are the basic components of a web page. A label contains a lot of information. It tells the browser where each element starts and ends, while an attribute describes the characteristics.
HTML elements are usually divided into three parts. This combination of the three creates an HTML element.
- Opening tag: Used to indicate where an element begins. It is wrapped in an opening and closing bracket. For example, you can use the start <p> tag to create a paragraph.
- Content: The content is the result that the audience sees.
- Closing tag: This is the same as the opening tag but with a forward slash in front of the element name. That is, </p> to end a paragraph.
Another fundamental part of an HTML element is the attributes. These have two sections:
- Name: The name identifies the additional information that a user wants to add.
- Attribute value: Gives more details than the previous one.
What are the basic HTML tags?
There are a series of tags that are the most used to create any HTML document, we will explain them below:
- <body> for content
- <head> for information about the document
- <div> division within content
- <a> for links
- <strong> to make text bold
- <br> for line breaks
- <H1> … <H6> for titles within content
- <img> to add images to the document
- <ol> for ordered lists, <ul> for unordered lists, <li> for elements within the list
- <p> for paragraphs
- <span> for styles of a part of the text
<body> </body>
Indicates the body part of the content of an HTML document. It is an essential tag for any document as it indicates where the visible content of the document begins.
<head> </head>
The upper part of the HTML document is where we can indicate the metadata: document title, style sheets, JavaScript, CSS …
<div> </div>
An element that is mostly used to group other elements and act as a template for other controls. The <div> tag helps us to structure the document in sections.
<a> </a>
It is a tag that helps us to create a link to a web page. The main attribute of the HTML tag is href, where we will put the link we want to connect to. Another widely used attribute is the target, which helps us to indicate if the link will open in a new window or the same one.
HTML example:
Click <a href=”https://www.webname.com/# target=”_blank”> here </a> to visit MrDomain.
<strong> </strong>
If you have a lot of text, it is important to be able to emphasize a specific part, with the strong tag we can do it.
HTML example:
I want to highlight only <strong> this word </strong>.
for
With this HTML tag, we can tell the browser that a line break is coming. It helps us to make the text more readable.
<H1> </H1>…. <H6> </H6>
There are different levels of titles, from 1 to 6. The <H + number> tags allow us to indicate the importance of the title and structure of the content, in this way we help the bots to understand the importance of the content.
<IMG> </IMG>
We use the IMG tag to display images within the content. It needs the src attribute to work since it will be where we will indicate from where it has to display the image.
<OL> <li> </li> <OL> | <UL> <li> </li> <UL>
The OL and LI labels are used to create lists, OL for ordered lists and UL for unordered lists. Within lists, items are identified with the LI tag.
HTML example:
<ul>
<li> First element </li>
<li> Second element </li>
<ul>
<P> </P>
A label that helps us to group text within a paragraph. The purpose is to be able to make the content easier to read and organized.
<SPAN> </SPAN>
With the label, we can customize the style of only a part of the text.
HTML example:
Just <span style = ”color: red;”> this word </span> in red.
Advantages and disadvantages of HTML
Like all computer languages, HTML has its advantages and disadvantages. Among the advantages, we could highlight that it is suitable for beginners, that it has a shallow learning curve, and that it is accessible. Furthermore, it is open source and completely free and runs natively in all web browsers.
On the other hand, among the disadvantages, it is found that for dynamic functionality it may be necessary to use JavaScript or a back-end language such as PHP. Additionally, users must create individual web pages for HTML, even if the elements are the same and older browsers may not display the newer tags.
What did you think of this article about HTML tags? Leave your comments and share!
