What is an HTML element?
If you want to know about HTML element then this lesson is very special for you.
Because in this lesson, the HTML element has been discussed in detail with examples.
HTML element definition
The HTML element is a component of an HTML document that contains Start Tag, if the element contains Some Content and End Tag.
Understand this with the following example:
Example Explanation:
From <Start Tag> to <End Tag> including text is an element.
An HTML element consists of a start tag, content and a last tag.
HTML element as a heading tag
The element used for the heading of the article will look like this:
HTML element as a paragraph tag
The element used for the paragraph will look like this:
When we start writing a paragraph, we must first write the start tag <p>, write the article of the paragraph after the start tag, </p>
Close the element with an end tag.
HTML element's components
Understand this further with the following example:
| Start tag | Element content | End tag |
|---|---|---|
| <h1> | My First Heading | </h1> |
| <p> | My first paragraph. | </p> |
| <br> | none | none |
Note:
Some HTML elements do not have content, as can be seen <br> in the example above, these are empty elements, Empty element does not have an end tag.
List of HTML elements
Structural Elements
| Element | Description |
|---|---|
| <html> | Root element |
| <head> | Document metadata |
| <title> | Document title |
| <body> | Document body |
| <header> | Header section |
| <nav> | Navigation section |
| <main> | Main content section |
| <section> | Section divider |
| <article> | Article content |
| <aside> | Sidebar content |
| <footer> | Footer section |
Headings
| Element | Description |
|---|---|
| <h1> | Heading level 1 |
| <h2> | Heading level 2 |
| <h3> | Heading level 3 |
| <h4> | Heading level 4 |
| <h5> | Heading level 5 |
| <h6> | Heading level 6 |
Text Elements
| Element | Description |
|---|---|
| <p> | Paragraph |
| <span> | Inline text container |
| <br> | Line break |
| <hr> | Horizontal rule |
| <pre> | Preformatted text |
| <code> | Code snippet |
| <kbd> | Keyboard input |
| <samp> | Sample output |
| <var> | Variable |
| <abbr> | Abbreviation |
Lists
| Element | Description |
|---|---|
| <ul> | Unordered list |
| <ol> | Ordered list |
| <li> | List item |
| <dl> | Definition list |
| <dt> | Definition term |
| <dd> | Definition description |
Tables
| Element | Description |
|---|---|
| <table> | Table |
| <tr> | Table row |
| <td> | Table data |
| <th> | Table header |
| <caption> | Table caption |
| <col> | Table column |
| <colgroup> | Table column group |
Forms
| Element | Description |
|---|---|
| <form> | Form |
| <input> | Input field |
| <textarea> | Text area |
| <select> | Dropdown menu |
| <option> | Option |
| <button> | Button |
| <label> | Label |
| <legend> | Legend |
Multimedia
| Element | Description |
|---|---|
| <img> | Image |
| <audio> | Audio |
| <video> | Video |
| <source> | Media source |
| <track> | Media track |
| <canvas> | Canvas |
Links
| Element | Description |
|---|---|
| <a> | Hyperlink |
| <link> | External resource link |
Semantic Elements
| Element | Description |
|---|---|
| <em> | Emphasis |
| <strong> | Strong emphasis |
| <mark> | Highlighted text |
| <small> | Small text |
| <time> | Date/time |
| <data> | Data value |
Interactive Elements
| Element | Description |
|---|---|
| <details> | Details |
| <summary> | Summary |
| <dialog> | Dialog box |