Skip to content
Chai Docs

Common HTML tags

Enough of HTML that you need to know

First of all, remember we are not here to spend a month on HTML. We want to learn the basics and get out of here ASAP. HTML5 just adds a few new tags and attributes to HTML. Of course accessibility is a really long topic to be discussed but we will not be discussing it here. Accessibility is something that you will learn later, specially if you are planning to work on a web application with javascript or js frameworks.

Basic terminology

  • Tag - A tag is a piece of text that is enclosed in angle brackets. It is used to define the structure of an HTML document.
  • Attribute - An attribute is a piece of text that is placed inside the opening tag of an HTML element. It is used to provide additional information about the element.
  • Element - An element is a piece of text that is enclosed in angle brackets and can have attributes. It is used to define the content of an HTML document.

HTML tags for text

  • <p> - Paragraph
  • <span> - Span
  • <div> - Div
  • <a> - Anchor
  • <img> - Image
  • <br> - Break
  • <hr> - Horizontal rule
  • <b> - Bold
  • <i> - Italic
  • <u> - Underline
  • <strong> - Strong
  • <em> - Emphasis
  • <code> - Code
  • <pre> - Preformatted text

HTML tags for lists

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

HTML tags for tables

  • <table> - Table
  • <tr> - Table row
  • <td> - Table cell

HTML tags for forms

  • <form> - Form
  • <input> - Input field
  • <textarea> - Text area
  • <select> - Select box
  • <option> - Option
  • <button> - Button

HTML tags for images

  • <img> - Image
  • <source> - Source
  • <picture> - Picture
  • <video> - Video
  • <link> - Link
  • <meta> - Meta
  • <link rel="stylesheet"> - Stylesheet
  • <link rel="icon"> - Icon

HTML tags for scripts

  • <script> - Script
  • <script src="script.js"></script> - Script with src
  • <script async src="script.js"></script> - Script with async and src
  • <script defer src="script.js"></script> - Script with defer and src
  • <script type="module" src="script.js"></script> - Script with type module and src

HTML tags for meta tags

  • <meta charset="utf-8"> - Charset
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> - Viewport
  • <meta name="description" content="Description"> - Description
  • <meta name="author" content="Author"> - Author
  • <meta name="keywords" content="Keywords"> - Keywords
  • <meta name="robots" content="index, follow"> - Robots
  • <meta name="googlebot" content="index, follow"> - Googlebot

HTML tags for media

  • <audio> - Audio
  • <video> - Video
  • <source> - Source
  • <track> - Track
  • <iframe> - Iframe
  • <embed> - Embed
  • <object> - Object

Attributes for HTML tags

Attributes examples

<p id="my-id" class="my-class">Hello world</p>
<img src="image.jpg" alt="Image">
<a href="https://www.google.com">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.