HTML Tags
HTML tags are special keywords enclosed in angle brackets (<>), such as `<p>`, `<h1>`, or `<a>`. Tags are used to mark the beginning and end of HTML elements, telling the browser how to display or interpret the content.
Most tags come in pairs: an opening tag (e.g., `<p>`) and a closing tag (e.g., `</p>`), with the content placed between them.
Some tags, like `<img>`, `<br>`, and `<hr>`, are self-closing and do not require a closing tag.
Tags can also include attributes, which provide additional information or modify the behavior of the element.
For example,
- `<a href="https://example.com">` uses the `href` attribute to specify the link destination.
Tags are usually written in lowercase for consistency and better compatibility with modern web standards.
Example :
<h1>This is a heading</h1>
In the above example:
- `<h1>` is the opening tag.
- `This is a heading` is the content.
- `</h1>` is the closing tag.
Another example of self closing tag :
Example :
<img src="logo.png" alt="Website Logo">
Here, `<img>` is a self-closing tag with attributes.
A to Z HTML tags
| Tag | Description | Syntax Example |
|---|---|---|
| <a> | Defines a hyperlink | <a href="https://example.com">Link</a> |
| <abbr> | Abbreviation or acronym | <abbr title="World Health Organization">WHO</abbr> |
| <address> | Contact information | <address>123 Main St, City</address> |
| <area> | Area inside an image map | <area shape="rect" coords="..." href="..."> |
| <article> | Independent, self-contained content | <article>Content</article> |
| <aside> | Content aside from main content | <aside>Sidebar info</aside> |
| <audio> | Embeds sound content | <audio src="audio.mp3" controls></audio> |
| <b> | Bold text | <b>Bold</b> |
| <base> | Base URL for relative links | <base href="https://example.com/"> |
| <bdi> | Isolates text direction | <bdi>abc</bdi> |
| <bdo> | Overrides text direction | <bdo dir="rtl">Text</bdo> |
| <blockquote> | Quoted section | <blockquote>Quote</blockquote> |
| <body> | Main content of the document | <body>Content</body> |
| <br> | Line break | <br> |
| <button> | Clickable button | <button>Click</button> |
| <canvas> | Graphics drawing area | <canvas id="myCanvas"></canvas> |
| <caption> | Table caption | <caption>Table Title</caption> |
| <cite> | Citation | <cite>Book Title</cite> |
| <code> | Code snippet | <code>let x = 5;</code> |
| <col> | Table column properties | <col span="2" style="background:yellow"> |
| <colgroup> | Group of table columns | <colgroup><col></colgroup> |
| <data> | Machine-readable data | <data value="123">Product</data> |
| <datalist> | List of pre-defined options for inputs | <datalist id="browsers"><option value="Chrome"></datalist> |
| <dd> | Description of a term in a list | <dd>Definition</dd> |
| <del> | Deleted text | <del>Old text</del> |
| <details> | Disclosure widget | <details><summary>More</summary>Info</details> |
| <dfn> | Defining instance of a term | <dfn>Term</dfn> |
| <dialog> | Dialog box or window | <dialog open>Dialog text</dialog> |
| <div> | Generic container | <div>Section</div> |
| <dl> | Description list | <dl><dt>Term</dt><dd>Definition</dd></dl> |
| <dt> | Term in a description list | <dt>Term</dt> |
| <em> | Emphasized text (italic) | <em>Emphasis</em> |
| <embed> | Embeds external content | <embed src="file.swf"> |
| <fieldset> | Groups related form elements | <fieldset>Fields</fieldset> |
| <figcaption> | Caption for a figure | <figcaption>Caption</figcaption> |
| <figure> | Self-contained content | <figure>Image</figure> |
| <footer> | Footer section | <footer>Footer</footer> |
| <form> | HTML form for user input | <form>Form</form> |
| <h1>-<h6> | Headings | <h1>Heading</h1> |
| <head> | Document metadata | <head>...</head> |
| <header> | Header section | <header>Header</header> |
| <hr> | Horizontal rule | <hr> |
| <html> | Root of HTML document | <html>...</html> |
| <i> | Italic text | <i>Italic</i> |
| <iframe> | Inline frame | <iframe src="page.html"></iframe> |
| <img> | Image | <img src="img.jpg" alt="desc"> |
| <input> | Input field | <input type="text"> |
| <ins> | Inserted text | <ins>New text</ins> |
| <kbd> | Keyboard input | <kbd>Ctrl+C</kbd> |
| <label> | Label for form element | <label for="id">Label</label> |
| <legend> | Caption for <fieldset> | <legend>Legend</legend> |
| <li> | List item | <li>Item</li> |
| <link> | External resource link | <link rel="stylesheet" href="style.css"> |
| <main> | Main content | <main>Main</main> |
| <map> | Image map | <map name="map"></map> |
| <mark> | Marked/highlighted text | <mark>Highlight</mark> |
| <meta> | Metadata | <meta charset="UTF-8"> |
| <meter> | Scalar measurement | <meter value="2" min="0" max="10">2</meter> |
| <nav> | Navigation links | <nav>Links</nav> |
| <noscript> | Fallback for no JavaScript | <noscript>Enable JS</noscript> |
| <object> | Embedded object | <object data="file.swf"></object> |
| <ol> | Ordered list | <ol><li>Item</li></ol> |
| <optgroup> | Group of options in a dropdown | <optgroup label="Group"></optgroup> |
| <option> | Option in a dropdown | <option>Choice</option> |
| <output> | Output of a calculation | <output>Result</output> |
| <p> | Paragraph | <p>Paragraph</p> |
| <param> | Parameter for <object> | <param name="autoplay" value="true"> |
| <picture> | Responsive images | <picture><img src="img.jpg"></picture> |
| <pre> | Preformatted text | <pre>Text</pre> |
| <progress> | Progress bar | <progress value="70" max="100"></progress> |
| <q> | Short inline quotation | <q>Quote</q> |
| <rp> | Fallback for ruby annotation | <rp>(</rp> |
| <rt> | Ruby annotation text | <rt>Text</rt> |
| <ruby> | Ruby annotation | <ruby>漢 <rt>kan</rt></ruby> |
| <s> | Strikethrough text | <s>Old</s> |
| <samp> | Sample output | <samp>Output</samp> |
| <script> | JavaScript code | <script>alert('Hi');</script> |
| <section> | Section of content | <section>Section</section> |
| <select> | Dropdown list | <select><option>One</option></select> |
| <small> | Smaller text | <small>Note</small> |
| <source> | Media source for <audio>/<video> | <source src="audio.mp3" type="audio/mpeg"> |
| <span> | Inline container | <span>Text</span> |
| <strong> | Important text (bold) | <strong>Important</strong> |
| <style> | CSS styles | <style>p {color: red;}</style> |
| <sub> | Subscript text | <sub>sub</sub> |
| <summary> | Summary for <details> | <summary>Title</summary> |
| <sup> | Superscript text | <sup>sup</sup> |
| <svg> | Scalable Vector Graphics | <svg></svg> |
| <table> | Table | <table></table> |
| <tbody> | Table body | <tbody></tbody> |
| <td> | Table cell | <td>Cell</td> |
| <template> | Client-side content template | <template>Content</template> |
| <textarea> | Multi-line text input | <textarea></textarea> |
| <tfoot> | Table footer | <tfoot></tfoot> |
| <th> | Table header cell | <th>Header</th> |
| <thead> | Table header | <thead></thead> |
| <time> | Date/time | <time datetime="2025-06-24">June 24, 2025</time> |
| <title> | Document title | <title>Title</title> |
| <tr> | Table row | <tr></tr> |
| <track> | Text tracks for media | <track src="subtitles.vtt" kind="subtitles"> |
| <u> | Underlined text | <u>Underline</u> |
| <ul> | Unordered list | <ul><li>Item</li></ul> |
| <var> | Variable in math/physics | <var>x</var> |
| <video> | Video content | <video src="movie.mp4" controls></video> |
| <wbr> | Word break opportunity | <wbr> |
HTML Elements
HTML elements are the building blocks of web pages. An HTML element consists of a start tag, content, and an end tag. Elements define the structure and meaning of the content on a web page.
The start tag marks the beginning of the element, while the end tag marks its conclusion. The content is placed between these tags and is what the user sees or interacts with on the web page.
In summary, HTML elements are essential for defining the layout, structure, and meaning of web content. They enable web browsers to interpret and display information in a user-friendly way, forming the foundation of every website on the internet.
Example :
<p> This is paragraph </p>
Here, `<p>` is the start tag, `</p>` is the end tag, and the text in between is the content.
Note :
- An element should have a start tag and end tag.
- HTML elements are not case sensitive. i.e. <b> is equal to <B>. Both can be used to bold a text.
- However, It is the best practice to use lowercase tags for better consitency and readability.
Comments
Post a Comment