← Back to Chapters

HTML Elements and Attributes

? HTML Elements and Attributes

⚡ Quick Overview

HTML (HyperText Markup Language) is the basic building block of every web page. It allows developers to structure content using predefined elements that can hold text, images, links, or forms. Attributes are special words used inside opening tags to provide extra information or behavior, such as identifiers, classes, or source URLs.

? Key Concepts

  • HTML Elements: An element has an opening tag, content, and a closing tag. Example: <p>This is a paragraph</p>.
  • HTML Tags: Markup enclosed in < >, like <div> or </h1>.
  • HTML Attributes: Key-value pairs inside the opening tag, such as class="header" or src="image.jpg".
  • Common Attributes: id, class, href, src, alt, title.

? Syntax and Theory

In HTML, everything is built from elements. Each element starts with an opening tag, may contain content, and ends with a closing tag. Attributes are placed inside the opening tag to configure how that element behaves or is identified.

? Block-level vs Inline Elements

Block-level elements such as <div>, <p>, and <section> stretch to take the full available width and start on a new line. Inline elements such as <span>, <a>, and <img> only take as much width as needed and flow within a line of text. Understanding this difference is essential for layout and design.

? Void Elements

Void elements are elements that do not have closing tags and cannot contain any content. Examples include <br>, <hr>, <img>, and <input>. They still can (and often do) use attributes.

? Global Attributes

  • id: Unique identifier for an element.
  • class: Used to group elements for styling or scripting.
  • style: Inline CSS styling applied directly to the element.
  • title: Shows a tooltip when the user hovers over the element.
  • hidden: Hides the element from the page layout.

❓ Why Use Attributes?

Attributes control element behavior and provide additional information. For example, href in an <a> tag sets the destination URL of a link, and src in an <img> tag sets the image source. Without attributes, HTML pages would be far less interactive and customizable.

? Code Example

The following example shows how elements and attributes work together in a simple paragraph and image:

? View Elements and Attributes Example 
<!-- Paragraph with class and title attribute -->
<p class="intro" title="Introductory text">
Welcome to the world of HTML!
</p>

<!-- Image with src and alt attributes -->
<img src="https://via.placeholder.com/150" alt="Placeholder Image" />

? Live Output and Explanation

?️ Rendered Result

Welcome to the world of HTML!

Placeholder Image

In the browser, you see the paragraph text and the image. The class="intro" attribute can be used by CSS or JavaScript to style or select the paragraph, while the title attribute shows a tooltip on hover. The image uses src to define its location and alt to describe it for screen readers and when the image cannot load.

? Tips and Best Practices

  • Use lowercase for tag names and attribute names.
  • Always wrap attribute values in quotes, e.g. id="main".
  • Always include alt text for images to improve accessibility.
  • Avoid inline styles where possible; prefer external or internal CSS.
  • Keep your code properly indented (outside of code examples) for readability.
  • Use semantic elements like <header>, <nav>, <main>, and <footer> for better structure and SEO.
  • Remember that attributes define behavior and meaning, such as href for links or src for images and scripts.
  • Test pages in a browser to see how different attributes affect the elements.

? Try It Yourself

  • Create a paragraph with a class and title attribute. Open it in the browser and hover to see the tooltip.
  • Add an image using <img> with both src and alt attributes. Try changing the URL to see what happens when the image fails to load.
  • Create examples of both block-level elements (<div>, <p>) and inline elements (<span>, <a>) and notice the layout differences.
  • Add an element with an id and another with a class, then write a small CSS file or style block to style them differently.
  • Experiment with a void element like <br> or <hr> and observe that they do not need closing tags.

? Summary

HTML elements provide the structure of a web page, and attributes give those elements additional power and meaning. By understanding how to use elements, distinguish between block and inline behavior, apply global attributes, and work with void elements, you can build rich, well-structured, and accessible web pages. Mastering elements and attributes is a key step toward writing clean, professional HTML.