HTML Elements and Attributes

Introduction

HTML provides the structure of a webpage.
To create that structure, developers use HTML elements.
Elements can also receive additional information through attributes.

Understanding the relationship between elements and attributes is one of the most important foundations of HTML development.

In simple terms:

• Elements define and organize content.
• Attributes provide additional information or instructions about elements.

1. What Is an HTML Element?

An HTML element is a complete piece of HTML that normally consists of an opening tag, content and a closing tag.

For example:

<p>Welcome to Dwallnet Academy.</p>

This is a paragraph element.

The element contains:

• An opening tag: <p>
• Content: Welcome to Dwallnet Academy.
• A closing tag: </p>

2. What Is an HTML Tag?

A tag is the markup notation used to identify an HTML element.

For example:

<h1>Dwallnet Academy</h1>

The opening tag is:

<h1>

The closing tag is:

</h1>

Together with the content between them, they form an HTML element.

3. Elements and Content

HTML elements tell the browser what different pieces of content represent.

For example:

<h1>Dwallnet Academy</h1>

<p>Learn practical technology skills.</p>

<strong>Important Information</strong>

Here:

• <h1> identifies a main heading.
• <p> identifies a paragraph.
• <strong> identifies content with strong importance.

4. What Is an Attribute?

An attribute provides additional information about an HTML element.

Attributes are normally written inside the opening tag.

For example:

<p class="intro">
	Welcome to Dwallnet Academy.
</p>

In this example:

• p is the element.
• class is the attribute name.
• intro is the attribute value.

5. Attribute Syntax

A common HTML attribute structure is:

attribute="value"

For example:

class="intro"

The attribute name is class, while the attribute value is intro.

A complete example is:

<p class="intro">
	Welcome to our website.
</p>

6. Attributes Belong to Elements

An attribute does not normally exist independently.
It provides information about an element.

For example:

<a href="courses.html">
	View Courses
</a>

The element is the anchor element:

<a>

The attribute is:

href="courses.html"

The href attribute tells the browser where the link should lead.

7. Multiple Attributes

An element can have more than one attribute.

For example:

<img
	src="student.jpg"
	alt="Dwallnet student"
	width="400"
>

This image element contains several attributes:

• src
• alt
• width

Each attribute provides additional information about the image.

8. The class Attribute

The class attribute assigns one or more class names to an element.

<p class="intro">
	Welcome to Dwallnet Academy.
</p>

Classes are commonly used by CSS to style elements.
They can also be used by JavaScript to identify groups of elements.

For example:

<h2 class="section-title">
	Our Courses
</h2>

9. The id Attribute

The id attribute identifies a particular element.

<section id="courses">
	...
</section>

An ID should normally be unique within the page.

IDs can be useful for:

• CSS styling.
• JavaScript.
• Page navigation.
• Identifying specific sections.

10. The title Attribute

The title attribute can provide additional advisory information about an element.

<p title="More information about our academy">
	Dwallnet Academy
</p>

The title attribute should not be used as a replacement for important visible information.

11. The lang Attribute

The lang attribute identifies the language of an element or document.

<html lang="en">

This tells browsers and assistive technologies that the primary language of the document is English.

A language attribute can also be applied to specific content when necessary.

12. The href Attribute

The href attribute is commonly used with the anchor element.

<a href="about.html">
	About Us
</a>

The value about.html specifies the destination.

13. The src Attribute

The src attribute specifies the source of an external resource.
It is commonly used with elements such as images and scripts.

Example:

<img src="logo.png" alt="Company logo">

The src attribute tells the browser where to find the image file.

14. The alt Attribute

The alt attribute provides alternative text for an image.

<img
	src="academy.jpg"
	alt="Students learning technology at an academy"
>

Alternative text can help users who cannot see the image and can also be useful when an image cannot be displayed.

The value should describe the purpose or meaningful content of the image.

15. Boolean Attributes

Some HTML attributes are boolean attributes.
Their presence can represent a true state.

For example:

<input type="text" required>

The presence of required indicates that the field is required.

Other examples include:

• disabled
• checked
• selected
• readonly
• multiple

16. Global Attributes

Some attributes can be used on many different HTML elements.
These are commonly called global attributes.

Examples include:

• id
• class
• title
• lang
• hidden
• data-*

Global attributes are useful because they provide information that can apply to many types of elements.

17. Custom Data Attributes

HTML allows developers to create custom data attributes using the data- prefix.

<button
	data-course="web-development"
	data-level="beginner"
>
	Start Course
</button>

These attributes can store custom data that can later be accessed by JavaScript.

18. Attribute Values and Quotation Marks

Attribute values are commonly placed inside quotation marks.

Recommended form:

class="course-card"

Using quotation marks consistently makes HTML easier to read and reduces errors.

19. Attribute Names Are Not Content

It is important to distinguish between the visible content of an element and its attributes.

<p class="description">
	Learn web development.
</p>

The visible content is:

Learn web development.

The attribute is:

class="description"

The class is information about the paragraph, not the paragraph’s visible content.

20. Combining Elements and Attributes

Elements and attributes become more useful when they are combined.

<article class="course-card" id="web-development">

	<h2>Web Development</h2>

	<p>
		Learn how to build modern websites.
	</p>

</article>

Here, the article element provides the structure.
The class and id attributes provide additional information that can be used for styling, identification or scripting.

21. Elements, Attributes and CSS

CSS commonly uses attributes such as class and id to identify elements that should receive specific styles.

For example:

<p class="highlight">
	This paragraph is important.
</p>

CSS could target the class:

.highlight {
	font-weight: bold;
}

The HTML provides the structure and class name, while CSS controls the visual presentation.

22. Elements, Attributes and JavaScript

JavaScript can also use element IDs, classes and data attributes to interact with webpage elements.

For example:

<button id="start-course">
	Start Course
</button>

JavaScript can locate the button using its ID and respond when the user interacts with it.

23. Common Mistakes With Attributes

• Putting an attribute outside the opening tag.
• Forgetting the equals sign.
• Forgetting quotation marks around values.
• Misspelling attribute names.
• Using an attribute that does not belong to the element.
• Giving multiple elements the same ID unnecessarily.
• Using meaningless class names.
• Using important information only inside the title attribute.

24. Incorrect Attribute Structure

Incorrect:

<p class intro>
	Hello
</p>

Correct:

<p class="intro">
	Hello
</p>

The correct structure uses the attribute name, an equals sign and an attribute value.

25. Practical Example

Consider a course card:

<article
	class="course-card"
	id="web-development"
>

	<h2>Web Development</h2>

	<p class="course-description">
		Learn practical web development.
	</p>

	<a
		href="courses/web-development.html"
		title="View Web Development Course"
	>
		View Course
	</a>

</article>

This example demonstrates how several elements and attributes work together.

• article provides a content container.
• class provides a reusable classification.
• id identifies a specific element.
• h2 provides a heading.
• p provides descriptive content.
• href defines the link destination.
• title provides additional advisory information.

26. Developer Exercise

Create a webpage section for three technology courses.
Each course should contain:

• A course container.
• A unique ID.
• A reusable class.
• A heading.
• A description.
• A link to the course.

For example, your courses could be:

• Web Development
• Data Analysis
• Cyber Security

Give each course a meaningful ID and class name.

27. Understanding the Relationship

The easiest way to remember the relationship is:

ELEMENT
   +
ATTRIBUTES
   =
MORE INFORMATIVE HTML

The element establishes what something is.
The attribute provides additional information about that element.

For example:

<img
	src="student.jpg"
	alt="Student learning web development"
>

The img element identifies an image.
The src attribute identifies the image source.
The alt attribute provides alternative text.

Conclusion

HTML elements provide the basic structure and meaning of webpage content, while attributes provide additional information about those elements.

Once you understand how elements and attributes work together, you can create HTML that is more structured, meaningful and useful for CSS, JavaScript, browsers and assistive technologies.

The next lesson will take a deeper look at HTML Elements and Tags, including opening tags, closing tags, nesting, parent and child elements, and elements that do not require closing tags.