6a. Short list of HTML Tags

Pictorial Representation of Tags.png

HTML Tags

An HTML tag acts as a container for content or other HTML tags.
Tags are words enclosed within < and > angle brackets. They serve as keywords that instruct the web browser on how to format and display the content.

In HTML, tags can be broadly categorized into two types:

1. Paired Tags (container Tags)

These are tags that come in pairs, consisting of an opening tag and a corresponding closing tag.
The content goes between these two tags.

  • Opening Tag: The opening tag starts with < and ends with >. For example, <p>.
  • Closing Tag: The closing tag also starts with < but includes a forward slash / before the tag name, and ends with >. For example, </p>.

Example:

  • Paragraphs: <p>This is a paragraph.</p>
  • Headings: <h1>This is a heading.</h1> 

2. Unpaired Tags (Self-Closing Tag)

  • These are tags that don't require a closing tag. They are self-contained, encapsulating all the information within a single tag.
  • A self-closing tag starts with < and ends with /> (though the / is optional in HTML5). For example, <img /> or <br>.

Example:

  • Line Break: <br/>
  • Horizontal Rule: <hr/>
  • Image: <img src="image.jpg" alt="An example image"/>

Commonly used tags in HTML:

Here are some commonly used tags in HTML. These are the only tags used 70% of the time:

Document Structure Tags

  1. <!DOCTYPE html>: Specifies the document type.
  2. <html>: Encloses the entire HTML document.
  3. <head>: Contains meta-information and links to scripts and stylesheets.
  4. <body>: Contains the content of the web page.

Metadata Tags

  1. <title>: Sets the title of the web page.
  2. <meta>: Provides metadata such as character set, author, and viewport settings.
  3. <link>: Links external resources like stylesheets.

Semantic Tags

  1. <header>: Header section.
  2. <footer>: Footer section.
  3. <article>: Article.
  4. <section>: Section.
  5. <nav>: Navigation.
  6. <aside>: Sidebar content.

Text Formatting Tags

  1. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings
  2. <p>: Paragraph.
  3. <pre>: Pre-defined text.
  4. <b>: Bold Text.
  5. <i>: Italics Text.
  6. <u>: Underline Text.
  7. <strike>: Strike-through text.
  8. <big>: Big Text.
  9. <small>: Small Text.
  10. <sup>: Superscript [ A2] Text.
  11. <sub>: Subscript [O 2 ] Text.
  12. <marquee>: Scrolling piece of text or an image.
  13. <br>: Single Line-break.
  14. <hr>: Horizontal rule.
  1. <a>: Anchor (used for links).
  2. <img>: Image.
  3. <audio>: Audio content.
  4. <video>: Video content.
  5. <iframe>: inline frames in webpage.

List Tags

  1. <ul>: Unordered list.
  2. <ol>: Ordered list.
  3. <li>: List item.
  4. <dl>: Description list
    1. <dt>: Defines the term (name)
    2. <dd>: Describes each term.

Table Tags

<table>: Table.

  • <thead>: Table header group.
  • <tr>: Table row.
  • <th>: Table header cell.
  • <td>: Table data cell.
  • <tbody>: Table body group.
  • <tfoot>: Table footer group.

Form Tags

  1. <form>: Form.
  2. <input>: Input field.
  3. <textarea>: Text area.
  4. <button>: Button.
  5. <select>: Dropdown list.
  6. <option>: Options within a <select> or <datalist>.

Next Chapter>>