HTML Tags
HTML tags are the building blocks of webpages. They define the structure, content, and functionality of a webpage.
HTML tags consist of keywords enclosed in angle brackets (< >), and most tags have an opening tag and a corresponding closing tag. For example, <p> is an opening tag for a paragraph, and </p> is the closing tag.
HTML tags are used to define elements such as headings, paragraphs, links, images, tables, forms, and more.
Basic Syntax of HTML Tags
HTML tags follow a consistent syntax. Most tags use the following structure:
</>
Copy
<tagname attribute="value">Content</tagname>Key components of HTML tags include:
- Tag Name: Specifies the type of element (e.g.,
<p>for paragraphs,<h1>for headings). - Attributes: Optional parameters that provide additional information or modify the tag’s behavior (e.g.,
class,id,style). - Content: The text or elements enclosed within the opening and closing tags.
Categories of HTML Tags
HTML tags can be broadly categorized based on their functionality:
- Structural Tags: Define the structure of a webpage.
<html>: Root element of an HTML document.<head>: Contains metadata and links to stylesheets or scripts.<body>: Contains the visible content of the page.
- Text Formatting Tags: Style and format text.
<p>: Defines a paragraph.<h1> to <h6>: Define headings of different levels.<strong>,<em>,<mark>: Apply bold, italic, or highlighted text styles.
- Link and Media Tags: Embed links and media elements.
<a>: Defines hyperlinks.<img>: Embeds images.<video>,<audio>: Embed multimedia content.
- Form and Input Tags: Create interactive forms.
<form>: Defines a form for user input.<input>: Defines input fields.<button>,<select>,<textarea>: Add buttons, dropdowns, and text areas.
- Table Tags: Organize data in tabular format.
<table>: Defines a table.<tr>,<td>,<th>: Define rows and cells.<thead>,<tbody>,<tfoot>: Define table sections.
- Semantic Tags: Provide meaningful structure.
<header>,<footer>: Define header and footer sections.<article>,<section>,<aside>: Organize content semantically.<nav>: Represents navigation links.
Void Tags vs. Paired Tags
HTML tags are classified into two types:
- Void Tags: These tags do not have a closing tag and are self-closing. Examples include:
<img>: Embeds an image.<br>: Inserts a line break.<hr>: Inserts a horizontal line.
- Paired Tags: These tags have both an opening and a closing tag. Examples include:
<p>...</p>: Defines a paragraph.<div>...</div>: Defines a container.<span>...</span>: Defines inline text.
HTML Tags Table
In the following table, we covered all the HTML tags, where each tag takes you to a dedicated tutorial on the respective tag, and also a short description is given for each tag.
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink. |
| <abbr> | Defines an abbreviation or acronym. |
| <address> | Defines contact information for the author/owner of a document. |
| <area> | Defines an area inside an image map. |
| <article> | Defines an article. |
| <aside> | Defines content aside from the page content. |
| <audio> | Defines embedded sound content. |
| <b> | Defines bold text. |
| <base> | Specifies the base URL/target for all relative URLs in a document. |
| <bdi> | Isolates a part of text that might be formatted in a different direction. |
| <bdo> | Overrides the current text direction. |
| <blockquote> | Defines a section that is quoted from another source. |
| <body> | Defines the document’s body. |
| <br> | Defines a single line break. |
| <button> | Defines a clickable button. |
| <canvas> | Used to draw graphics via scripting (usually JavaScript). |
| <caption> | Defines a table caption. |
| <cite> | Defines the title of a work. |
| <code> | Defines a piece of computer code. |
| <col> | Specifies column properties for each column within a <colgroup> element. |
| <colgroup> | Specifies a group of one or more columns in a table for formatting. |
| <data> | Links content with a machine-readable value. |
| <datalist> | Specifies a list of pre-defined options for an input element. |
| <dd> | Defines a description/value of a term in a description list. |
| <del> | Defines text that has been deleted. |
| <details> | Defines additional details that the user can view or hide. |
| <dfn> | Represents the defining instance of a term. |
| <dialog> | Defines a dialog box or interactive component. |
| <div> | Defines a division or section in a document. |
| <dl> | Defines a description list. |
| <dt> | Defines a term/name in a description list. |
| <em> | Defines emphasized text. |
| <embed> | Defines a container for an external (non-HTML) application. |
| <fieldset> | Groups related elements in a form. |
| <figcaption> | Defines a caption for a <figure> element. |
| <figure> | Specifies self-contained content. |
| <footer> | Defines a footer for a document or section. |
| <form> | Defines an HTML form for user input. |
| <h1> | Defines HTML heading: Heading 1. |
| <h2> | Defines HTML heading: Heading 2. |
| <h3> | Defines HTML heading: Heading 3. |
| <h4> | Defines HTML heading: Heading 4. |
| <h5> | Defines HTML heading: Heading 5. |
| <h6> | Defines HTML heading: Heading 6. |
| <head> | Contains metadata/information for the document. |
| <header> | Defines a header for a document or section. |
| <hr> | Defines a thematic change in the content. |
| <html> | Defines the root of an HTML document. |
| <i> | Defines a part of text in an alternate voice or mood. |
| <iframe> | Defines an inline frame. |
| <img> | Defines an image. |
| <input> | Defines an input control. |
| <ins> | Defines a text that has been inserted. |
| <kbd> | Defines keyboard input. |
| <label> | Defines a label for an input element. |
| <legend> | Defines a caption for a <fieldset> element. |
| <li> | Defines a list item. |
| <link> | Defines the relationship between a document and an external resource. |
| <main> | Specifies the main content of a document. |
| <map> | Defines a client-side image map. |
| <mark> | Defines marked/highlighted text. |
| <meta> | Defines metadata about an HTML document. |
| <meter> | Defines a scalar measurement within a known range. |
| <nav> | Defines navigation links. |
| <noscript> | Defines an alternate content for users that do not support client-side scripts. |
| <object> | Defines a container for an external resource. |
| <ol> | Defines an ordered list. |
| <optgroup> | Defines a group of related options in a drop-down list. |
| <option> | Defines an option in a drop-down list. |
| <output> | Defines the result of a calculation. |
| <p> | Defines a paragraph. |
| <picture> | Defines a container for multiple image resources. |
| <pre> | Defines preformatted text. |
| <progress> | Represents the progress of a task. |
| <q> | Defines a short quotation. |
| <rp> | Defines what to show in browsers that do not support ruby annotations. |
| <rt> | Defines an explanation/pronunciation of characters. |
| <ruby> | Defines a ruby annotation. |
| <s> | Defines text that is no longer correct. |
| <samp> | Defines sample output from a computer program. |
| <script> | Defines a client-side script. |
| <section> | Defines a section in a document. |
| <select> | Defines a drop-down list. |
| <small> | Defines smaller text. |
| <source> | Defines multiple media resources for media elements. |
| <span> | Defines an inline section in a document. |
| <strong> | Defines important text. |
| <style> | Defines style information for a document. |
| <sub> | Defines subscripted text. |
| <summary> | Defines a visible heading for a <details> element. |
| <sup> | Defines superscripted text. |
| <svg> | Defines a container for SVG graphics. |
| <table> | Defines a table. |
| <tbody> | Groups the body content in a table. |
| <td> | Defines a cell in a table. |
| <template> | Defines a container for content that should be hidden when the page loads. |
| <textarea> | Defines a multiline input control (text area). |
| <tfoot> | Groups the footer content in a table. |
| <th> | Defines a header cell in a table. |
| <thead> | Groups the header content in a table. |
| <time> | Defines a specific point in time. |
| <title> | Defines a title for the document. |
| <tr> | Defines a row in a table. |
| <track> | Defines text tracks for media elements. |
| <u> | Defines text that should be stylistically different from normal text. |
| <ul> | Defines an unordered list. |
| <var> | Defines a variable. |
| <video> | Defines embedded video content. |
| <wbr> | Defines a possible line-break. |