Most essential HTML tags you must work with

< tags />

Publication date: 01-31-2022

HTML tags and their functions

As its name indicates, an HTML tag is the name of a structure that will be part of an HTML document. All websites have this document or file (usually called index.html) in order to build the basis of a website. You will find in many places the following analogy: Web pages are like the human body where HTML is the bones, CSS is how the human being is going to look like and JavaScript is the nervous system.

Yes, this definition may make it clear but I offer you this other analogy: A web page is a building where the HTML is the structure that forms it, such as the columns, walls, ceilings, lighting, first floor, windows or the roof; the CSS will define the color of the walls, what paint will be used, the type of leather of the furniture and even if the light bulb is LED; JavaScript will determine the behavior of the electricity of the building, the correct operation of the elevators, the hydraulic system or the automatic doors.

The building's condominium is hosting. πŸ˜†

Now you see each element of the building structure as a tag. We have the door tag, the window tag, the floor tag.... And so on. With an HTML document the very same thing happens, now why is the analogy made with the human body in many cases? πŸ€” because HTML tags use a syntax identical to the way to identify a human body: header, body, footer. But it only happens with the base structure, the rest of the HTML tags do not make analogy with the human body and have almost specific functions.

So... How many HTML tags are there?

More than 100 tags and I'm not going to name them all. πŸ˜‚ It's a lie that to build a website you need all of them, if you use 20 or so, they are enough. Some tags are simply no longer used thanks to the generic div tag (which we will see later) or because they are already deprecated. Don't worry about learning all of them either, as you develop your projects you will discover which ones you need.

List of the most commonly used HTML tags in web development

Here is a list of the most important HTML tags, you will literally breathe these tags, they will be your eternal companions during all your career... And mine too! Take note:

HTML tags for the basic structure of the document

  • DOCTYPE

  • Indicates the HTML version we are going to use. Currently we are working with version 5 of the language.

  • html

  • It is the root tag of the whole file, this tag will encompass the rest of the tags of the web page.

  • head

  • It is used to declare the metadata that you are going to use for your project. An example can be whether the page is indexable or not. At this point there are more specific examples that we will see later.

  • title

  • Determines the title of the tab in the browser. It is also useful for SEO.

  • link

  • Allows linking to other files (such as CSS). The attributes of this tag also have interesting functionalities. Calm down! πŸ–πŸ» Below I explain the attribute of an HTML tag.

  • style

  • Writes css code inside the HTML document.

  • script

  • Binds a JavaScript file to the HTML document.

  • body

  • It is the main tag that encompasses all the elements that are visible on a page.

πŸ“’Note: If you noticed it, the tags are written in lowercase; it is a good practice to do it this way and the IDE you use will help you to autocomplete their opening and closing. They can also be written in uppercase but it would generate certain inconveniences. The only exception is the DOCTYPE tag.

HTML tags for text writing

These tags are the easiest to remember as they use the first letter of what they are designed to do.

  • h1, h2, h3, h4, h5 and h6

  • H of Heading for the titles and subtitles of the texts. They have a hierarchy from 1 to 6 where 1 is the most important and the most relevant when writing headings.

  • p

  • P for Paragraph. Simple, it is the tag that will contain the paragraphs.

  • b

  • B for Bold, it transforms the text into bold.

  • i

  • I for Italic. Transforms the text into italics

  • u

  • U for Underline. Underline the text.

  • a

  • A for Anchor. Adds a link to another part of a website or to another website.

  • strong

  • Strong from... Super Saijan? πŸ˜† This tag looks visually the same as bold but is used to highlight important text on a page. While bold is for aesthetic use, the HTML strong tag is for SEO use. πŸ˜‰

  • blockquote

  • Tag used for quoting.

    "HTML is not a programming language."
  • br

  • Br from Break. This tag creates a line break.

HTML tags for multimedia content

  • img

  • Inserts an image to the HTML document, using its src (source) attribute.

  • video

  • Inserts a video into the HTML document, also using the src attribute.

  • iframe

  • Inserts multimedia content from other web pages. Like the GIF above. ☝🏻

  • audio

  • Inserts an audio file to the page. Through its attributes you can add controllers and other parameters.

HTML tags for content structure

  • ul

  • Unordered List. Creates an unordered list, like the one shown in this article and is characterized by "bullet points".

  • ol

  • Ordered List. The counterpart of the ul tag. It creates an ordered list of several elements and these are characterized by a numerical hierarchy.

  • li

  • List. Creates the elements of the lists, the li must be inside the tag ol or ul.

  • div

  • The most common of all tags and the container par excellence. It is a generic tag that encloses other HTML elements. Div can replace any other structure tag such as a header, nav or section. Aesthetically it will not make changes to a web page but for code reading, semantic and SEO reasons, it is not recommended to use it for everything.

  • nav

  • Contains the navigation bar menu of a website.

  • header

  • Defines the header of the HTML document.

  • section

  • Sections and marks new content on the website.

  • footer

  • Defines the footer of a web page.

HTML tags to create forms

  • form

  • It is the HTML tag that encompasses the content of a form.

  • input

  • A tag used to fill information fields and obtain data from a user.

  • label

  • It is used to give a title or specification to an input, for example: "Enter your name".

  • textarea

  • It is the input to enter a longer text if required by the form.

  • button

  • It is a tag that inserts a button to a page, it can be of generic use such as to indicate navigation to another part of the website or, in this case for forms, as a "submit" button.

    What are HTML tag attributes?

    Finally, what the heck are attributes?πŸ™†πŸ»

    They are properties that some HTML tags possess that allow certain behavior of the tag, for example, in an img tag by itself you cannot insert an image, for that you need its src attribute to be able to look for the location of the content that should show that tag.

    Some tags have attributes that are unique to them, such as the button with its type attribute that indicates what kind of behavior that button will have.

    On the other hand all tags can have the class attribute that assigns a class that is used to style an HTML tag.

    To make all this writing clear let's see the syntax of an HTML tag in the next point.

    Structure of an HTML tag

    A tag consists of the following elements:

    1. Opening ( <> ) and closing ( < / > ) angle brackets.

    2. The name of the tag. (h1, p, nav, etc.)

    3. An attribute, if required, and its value.

    4. The content inside the tag

    Now all this in HTML code. πŸ‘‡πŸ»

    < ! -- As pseudocode -- >
    < tag-name attribute = "Attribute value" > Tag content, it could include other tags < / tag-name >

    < ! -- As HTML code -- >
    < h1 class = "text-center" > h1 tag example < / h1 >

    πŸ“’Note: Not all HTML tags have opening and closing tags.

    Now an example of tag embedding.

    < body >

    < header >
    < / header >

    < section >
    < / section >

    < div >
    < footer > < / footer >
    < / div >

    < / body >

    In the code above we can see that we have 5 tags (body, header, section, div and footer). The body tag is the main container of the rest of the tags and in an HTML document it is going to be like that. Then there are the header, section and div and this last one has as content a footer tag.

    You can see that each tag has a margin to the left and this is a visual indicator to know which tags are containing other tags; usually the tags that are with less margin or that encompass other tags are called "parent tag".

    You can see that each tag has a margin to the left and this is a visual indicator to know which tags are containing other tags; usually the tags that are with less margin or that encompass other tags are called "parent tag".

    To make it easier to visualize it, imagine that each HTML tag is a box, where the body of this example is the biggest box that will contain the smaller boxes (tags) and the div contains a smaller box inside it than the footer box. For something similar to this the "box model" is born, but it is an issue that is seen in CSS. πŸ˜†

    The importance of semantics in HTML tags for website structure and search engines

    At this point I will explain the importance of using tags correctly as briefly as possible.

    There are many tags to create the structure of a website, the most used ones were named above but due to ignorance or mere laziness we fall into "Div Hell" and this is nothing more than using the div tag to build the entire structure of a website.

    A code written like this becomes unreadable.

    < div >

    < div >
    < / div >

    < div >
    < / div >

    < div >
    < div > < / div >
    < / div >

    < / div >

    And this is a simple example. ☝🏻 The identations (margins) help to read it but no web has so few tags.

    One solution could be to use class or id attributes to better identify them.

    < div id = "body" >

    < div class = "header" >
    < / div >

    < div class = "section" >
    < / div >

    < div class = "footer-container" >
    < div class = "footer" > < / div >
    < / div >

    < / div >

    It will work 🀷🏻 but you will have specificity issues with CSS, which is the least of it really. If you work in a team a code like that is complicated to interpret and last and most important is that your tags are read by the browser and search engine crawlers will interpret everything as generic boxes with little context.