HTML Elements And Attributes

Complete HTML Course (Free)

About Lesson

In this lesson, you will learn what HTML elements and attributes are, how they function, and how to use them to define the structure and behavior of your web pages. By the end of this module, you’ll be able to confidently use elements and attributes to create more detailed and meaningful HTML documents.

1. What Are HTML Elements?

An HTML element is the building block of an HTML document. It consists of an opening tag, content (optional), and a closing tag.

Example of an HTML Element:

<p>This is a paragraph.</p>

<p>: Opening tag
This is a paragraph.: Content
</p>: Closing tag

Key Points:

Some elements are self-closing and do not have content or a closing tag.
- Example: <img src="image.jpg" alt="An image">
Elements can be nested, but they must be properly closed in the order they were opened.

2. Common HTML Elements

Here are some commonly used HTML elements and their purposes:

Headings: Define titles or headings on the page.
```
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
Paragraphs: Group blocks of text.
```
<p>This is a paragraph of text.</p>
```

Links: Create clickable hyperlinks.

<a href="https://example.com">Visit Example</a>

Images: Display images on a webpage.

<img src="image.jpg" alt="Description of the image">

Lists: Organize content into ordered or unordered lists.

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First item</li>
    <li>Second item</li>
</ol>

Div and Span: Used for grouping and styling content.

<div>This is a block-level container.</div>
<span>This is an inline container.</span>

3. What Are HTML Attributes?

An attribute provides additional information about an HTML element. Attributes are always written inside the opening tag, and they typically consist of a name and a value.

Syntax:

<element attribute="value">Content</element>

Example with Attributes:

<a href="https://example.com" target="_blank">Visit Example</a>

href="https://example.com": Specifies the link destination.
target="_blank": Specifies to open the link in a new tab.

4. Common HTML Attributes

id Attribute:
- Provides a unique identifier for an element.
```
<h1 id="main-title">This is the main title</h1>
```
class Attribute:
- Groups elements for styling or JavaScript functionality.
```
<p class="intro-text">This is an introduction.</p>
```
style Attribute:
- Adds inline CSS styling directly to an element.
```
<p style="color: red;">This text is red.</p>
```
src Attribute:
- Specifies the source of an image or external file.
```
<img src="photo.jpg" alt="Photo of a sunset">
```
alt Attribute:
- Provides alternative text for images.
```
<img src="photo.jpg" alt="Photo of a sunset">
```

href Attribute:

Defines the URL for a link.

<a href="https://example.com">Visit Example</a>

target Attribute:
- Specifies how a link should be opened (e.g., in a new tab).
```
<a href="https://example.com" target="_blank">Open in a new tab</a>
```

5. Nesting HTML Elements

HTML elements can be nested within one another. When nesting, make sure that the tags are properly closed in the order they were opened (this is known as proper nesting).

Example of Proper Nesting:

<p>This is a <strong>bold</strong> word in a paragraph.</p>

Example of Improper Nesting:

<p>This is a <strong>bold word</p></strong> <!-- Incorrect -->

6. Hands-On Activity: Using Elements and Attributes

Open your text editor and create a new HTML file called elements_and_attributes.html.

Write the following code:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Elements and Attributes</title>
</head>
<body>
    <h1 id="main-heading">Welcome to HTML Elements</h1>
    <p class="intro">This is a paragraph with a <a href="https://example.com" target="_blank">link</a>.</p>
    <img src="photo.jpg" alt="A beautiful scenery" style="width:300px;">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Save the file and open it in your browser to see how the elements and attributes work.

7. Best Practices for Using Elements and Attributes

Always use semantic HTML elements (e.g., <header>, <article>) where possible for better readability and SEO.
Use the alt attribute for images to improve accessibility.
Avoid inline styling (style attribute); use external CSS files instead for maintainability.
Use unique id attributes but avoid overusing them. Instead, prefer class attributes for shared styling.

8. Summary

HTML elements are the building blocks of a webpage, consisting of tags, content, and optional attributes.
Attributes provide additional information or functionality to elements.
Proper nesting and meaningful use of attributes improve the readability and functionality of your HTML.

This lesson has equipped you with the tools to use HTML elements and attributes effectively. In the next module, we will explore working with text and formatting in HTML to add more style and structure to your pages!