Skip to content
Chai aur Docs

Common HTML Tags

Basic Terminology

  • Tag – A piece of text enclosed in angle brackets (e.g., <p>) that defines an HTML element.
  • Attribute – Extra information provided inside an opening tag to modify an element (e.g., id="main").
  • Element – A complete HTML structure, typically including an opening tag, content, and a closing tag.

HTML Tags for Text Content

  • <p> – Paragraph
  • <span> – Inline container for text
  • <div> – Generic container (block-level element)
  • <a> – Anchor (hyperlink)
  • <img> – Image
  • <br> – Line break
  • <hr> – Horizontal rule
  • <b> – Bold text
  • <i> – Italic text
  • <u> – Underlined text
  • <strong> – Strong importance (semantically bold)
  • <em> – Emphasized text (typically italicized)
  • <code> – Code snippet
  • <pre> – Preformatted text

HTML Tags for Lists

  • <ul> – Unordered list
  • <ol> – Ordered list
  • <li> – List item

HTML Tags for Tables

  • <table> – Table container
  • <tr> – Table row
  • <td> – Table cell

HTML Tags for Forms

  • <form> – Form container
  • <input> – Input field
  • <textarea> – Multi-line text input
  • <select> – Drop-down list
  • <option> – Option within a drop-down
  • <button> – Button

HTML Tags for Media

  • <img> – Image element
  • <source> – Media resource (used within <picture> or <video>)
  • <picture> – Container for multiple image sources
  • <video> – Video element
  • <audio> – Audio element

HTML Tags for Linking and Metadata

  • <link> – Links external resources (e.g., CSS files, favicons)
  • <meta> – Provides metadata about the document
  • <script> – Embeds or references executable scripts

Script Tag Variations

  • <script src="script.js"></script> – External script
  • <script async src="script.js"></script> – Asynchronously loaded script
  • <script defer src="script.js"></script> – Deferred script execution
  • <script type="module" src="script.js"></script> – JavaScript module

HTML Tags for Semantic and Meta Content

Modern HTML (HTML5) introduces several semantic tags that enhance the meaning and structure of your document:

  • <header> – Defines a header for a document or section
  • <footer> – Defines a footer for a document or section
  • <nav> – Defines navigation links
  • <main> – Specifies the main content of a document
  • <article> – Encloses self-contained content
  • <section> – Groups related content together
  • <aside> – Represents content aside from the main content
  • <details> – Defines additional details the user can view or hide
  • <summary> – Provides a summary for the <details> element
  • <time> – Represents a specific period in time

Additionally, standard meta tags include:

  • <meta charset="utf-8"> – Sets the character encoding
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> – Ensures responsiveness
  • <meta name="description" content="Description"> – Provides a page description
  • <meta name="author" content="Author"> – Identifies the author
  • <meta name="keywords" content="Keywords"> – Supplies SEO keywords
  • <meta name="robots" content="index, follow"> – Guides search engine indexing
  • <meta name="googlebot" content="index, follow"> – Specific for Googlebot

Attributes for HTML Tags

Attributes provide additional information for HTML elements. Here are some common examples:

<p id="my-id" class="my-class">Hello World</p>
<img src="image.jpg" alt="Descriptive image text">
<a href="https://www.google.com">Visit Google</a>
<input type="text" placeholder="Enter your name">
<button>Click me</button>
  • id="my-id" - Adds an id attribute with the value my-id
  • .my-class - Adds a class attribute with the value my-class
  • src="image.jpg" - Adds a src attribute with the value image.jpg
  • alt="Image" - Adds an alt attribute with the value Image
  • href="https://www.google.com" - Adds a href attribute with the value https://www.google.com
  • type="text" - Adds a type attribute with the value text
  • placeholder="Enter your name" - Adds a placeholder attribute with the value Enter your name

Some attributes are global attributes and can be used on any HTML tag. Some attributes are specific to certain tags and can only be used with that tag. For example, the href attribute is a specific attribute for the <a> tag, and the title attribute is a global attribute that can be used on any HTML tag.

HTML5 attributes

Some examples of HTML5 attributes are:

  • autofocus - Adds an autofocus attribute to an input field
  • required - Adds a required attribute to an input field
  • readonly - Adds a readonly attribute to an input field
  • section - Adds a section attribute to a section element
  • footer - Adds a footer attribute to a footer element

footer, section, and header are new HTML5 attributes. They are used to define the structure of a web page. Fundamentally, they are used to group related content together, just like the <div> tag is used to group related content together.

HTML5 tags

  • <header> - Header
  • <footer> - Footer
  • <nav> - Navigation
  • <main> - Main
  • <article> - Article
  • <section> - Section
  • <aside> - Aside
  • <details> - Details
  • <summary> - Summary
  • <time> - Time
  • <mark> - Mark
  • <meter> - Meter
  • <progress> - Progress
  • <video> - Video
  • <audio> - Audio
  • <source> - Source

Conclusion

You don’t need to do a PhD in HTML to be a web developer. You just need to know the basics and get out of here ASAP. HTML5 just adds a few new tags and attributes to HTML. Rest all the stuff like Web APIs (local storage, session storage, etc.) are just JavaScript stuff. You can learn them later.

Start your journey with ChaiCode

All of our courses are available on chaicode.com. Feel free to check them out.