Most essential HTML tags you must work with

Last update: 01 - 11 - 2023

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

📢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.

HTML tags for multimedia content

HTML tags for content structure

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 pseudo code -->
    <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.

    Back