HTML Elements – Introduction
“An HTML element is defined by a start tag, some content, and an end tag.”
HTML elements are the building blocks of HTML pages. They tell the browser how to display the content inside their tags. For example, <p> represents a paragraph while <a> defines hyperlinks.
For example:
Paragraph (<p>)Heading (<h1> to <h6>)
Anchor (<a>)
Image (<img>)
Division (<div>)
Example 1: – Paragraph (<p>)
Explanation:
Used to define a paragraph. This is typically used in conjunction with text formatting tags like <b> or <i> as well as CSS for styling.
Edit example below
Output
Example 2: – Heading (<h1> to <h6>)
Explanation:
Defines HTML headings, <h1> defines the most important heading and <h6> defines the least important heading.
Edit example below
Output
Example 3: – Anchor (<a>)
Explanation:
Defines a hyperlink that can link to another page, section within the same page, or any location on the web.
Edit example below
Output
Example 4: – Image (<img>)
Explanation:
Used to embed an image in a document, it needs the source of the image with ‘src’ attribute.
Edit example below
Output
Example 5: – Division (<div>)
Explanation:
Defines a division or a section in an HTML document and is often used as a container for other elements. It has no visual effect by itself but provides hooks for the style sheets.
Edit example below
Output
Example 6: – Multimedia Elements
Explanation:
These include <video> and <audio> tags which can be used to embed videos or audio files in a webpage. In this example, a video and an audio file are embedded in the webpage. The controls attribute is used to display control buttons (play, pause etc.) on the page for users.
Edit example below
Output
Example 7: – Iframe- Used for embedding another HTML document.
Explanation:
The src attribute specifies the URL of the page to embed. The text inside the tags will be displayed in browsers that do not support iframes.
Edit example below
Output
Example 8: – Canvas – Used for dynamic, scriptable rendering
Explanation:
The canvas tag is used to draw graphics via scripting (usually JavaScript). The text inside the tags will be displayed in browsers that do not support canvas. In this example, a rectangle with red color is drawn using script.
Edit example below
Output
Example 9: – SVG – Scalable Vector Graphics
Explanation:
SVG is used to define graphics for the web. It’s an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. In this example, a red circle is drawn using SVG.
Edit example below
Output
Example 10: – Forms with multiple inputs and validation
Explanation:
This example includes multiple input types like text, email and password. The required attribute ensures the fields are filled before submission of the form. A minimum length for a password is also set with minlength attribute.
Edit example below
Output
Example 11: – <progress> – Progress Indicator
Explanation:
This element shows the completion status of a task, like a file upload or download
– The value attribute represents the current progress (here, 40).
– The max attribute represents the total target (here, 100).
– The browser automatically renders a progress bar.
– You can update the value dynamically with JavaScript to reflect real-time progress
Edit example below
Output
Example 12: – <meter> – Measurement Gauge
Explanation:
<meter> – Measurement Gauge
This element represents a value within a known range, such as ratings, scores, or sensor readings.
– The value attribute is the current reading (0.7 = 70%).
– min and max define the range (0 to 1 here).
– low, high, and optimum define thresholds for performance.
– Browsers often display different colors depending on whether the value is low, high, or optimal.
– Perfect for visualizing ratings, health indicators, or performance stats.