More HTML Elements and Attributes

Expand your HTML knowledge with additional elements and their attributes

Previous Lesson Next Lesson

HTML Elements with Attributes

HTML elements can have attributes that provide additional information about the element. Attributes are always specified in the start tag and usually come in name/value pairs like: name="value".

Key Insight: Attributes define characteristics of an HTML element and are used to control the element's behavior or appearance.

Common Elements and Attributes

Here are some essential HTML elements with their attributes:

Element	Attributes	Description	Example
`<h1>`	`align`	Aligns heading (left, center, right)	`<h1 align="center">Centered</h1>`
`<img>`	`src, alt, width, height`	Embeds an image with alternative text	`<img src="logo.png" alt="Logo">`
`<hr>`	`width, size, noshade`	Creates horizontal rules with custom styling	`<hr width="80%" size="4">`
`<p>`	`align`	Aligns paragraph text	`<p align="right">Text</p>`
`<strong>`	-	Defines important text (bold)	`<strong>Bold</strong>`
`<em>`	-	Defines emphasized text (italic)	`<em>Italic</em>`

Practical Examples

Let's explore practical examples of using HTML elements with attributes.

Example 3.1: Heading Alignment

<h1 align="left">Left Heading</h1>
<h1 align="center">Centered Heading</h1>
<h1 align="right">Right Heading</h1>

Result:

Left Heading

Centered Heading

Right Heading

Example 3.2: Horizontal Rules

<hr>
<hr width="50%">
<hr size="10">
<hr width="75%" size="5" noshade>

Result:

Example 3.3: Text Formatting

<p>
    <strong>Strong text</strong> and <em>emphasized text</em><br>
    H<sub>2</sub>O - Water formula<br>
    E = mc<sup>2</sup> - Einstein's equation
</p>

Result:

Strong text and emphasized text
H₂O - Water formula
E = mc² - Einstein's equation

Interactive Element Explorer

Experiment with HTML elements and attributes in real-time:

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Element Explorer</title>
</head>
<body>
    <h1 align="center">Welcome!</h1>
    <hr width="80%">
    <p align="center">Edit this code to experiment</p>
    <p>
        Try: <strong>bold</strong>, <em>italic</em>, 
        H<sub>2</sub>O, E=mc<sup>2</sup>
    </p>
</body>
</html>

Result

Welcome!

Edit this code to experiment

Try: bold, italic, H₂O, E=mc²

Complete Example: Profile Page

<!DOCTYPE html>
<html>
<head>
    <title>User Profile</title>
</head>
<body>
    <h1 align="center"><u>User Profile</u></h1>
    <hr>
    <h2 align="right">Date: <em>Jan 15, 2023</em></h2>
    <hr width="50%" size="3">
    <p> 
        <strong>Name:</strong> John Doe<br>
        <strong>Occupation:</strong> <em>Web Developer</em>
    </p>
    <p align="center"> Additional Information </p>
    <pre>
Age:      30
Location: New York
Skills:   HTML, CSS, JavaScript
    </pre>
    <hr noshade>
    <p align="center">
        Contact: <strong>[email protected]</strong>
    </p>
</body>
</html>

Result:

User Profile

Date: Jan 15, 2023

Name: John Doe
Occupation: Web Developer

Additional Information

Age:      30
Location: New York
Skills:   HTML, CSS, JavaScript

Contact: [email protected]

Previous Lesson Next Lesson