Prev Next

HTML Attributes

HTML attributes provide additional information about HTML elements. They are always specified in the start tag and usually come in name-value pairs, like name="value". Common attributes include href for links, src and alt for images, and style for inline styling. Using attributes effectively helps make your HTML more accessible, informative, and visually engaging.

Key Topics

Common Attributes

Here are some commonly used HTML attributes. These snippets show how attributes are added to elements. Single-element examples are shown using a simple pre block. More complete examples will include a copyable code box.

  • href: Specifies the URL of a link. 
    <a href="https://www.example.com">Visit Example</a>
  • src and alt: Used with images to define the source file and alternative text. 
    <img src="image.jpg" alt="A descriptive text">
  • title: Adds extra information about an element, often displayed as a tooltip. 
    <p title="Additional info">Hover over this text.</p>
  • style: Allows inline CSS styling. 
    <div style="color:blue;">This text is blue.</div>

Basic Page Structure Example

Below is a simple HTML page structure that uses attributes effectively. This is a full HTML code demonstration and is enclosed in a copy code box.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample HTML with Attributes</title>
</head>
<body>
    <h1 title="Main Heading">This is a Heading</h1>
    <p style="font-size:18px;">This is a paragraph with larger text.</p>
    <a href="https://example.com" title="Visit Example Website">Click here to visit an example site</a>
    <img src="image.jpg" alt="Sample Image" style="width:200px;">
    <div id="section1" class="content-box" data-info="custom-data">
        <h2>A Subsection</h2>
        <p title="Paragraph inside a division">This paragraph is inside a div with a custom attribute.</p>
    </div>
</body>
</html>

Explanation: In the example above, attributes like title, style, href, alt, and even a custom data-info attribute are used. These attributes enhance the meaning, behavior, and presentation of the elements.

Output:

This is a Heading (when hovered, shows a tooltip "Main Heading")
This is a paragraph with larger text (font-size:18px; applied inline)
Click here to visit an example site (hyperlink to https://example.com, tooltip "Visit Example Website")
[Sample Image displayed here: alt text "Sample Image", width:200px]
A Subsection
This paragraph is inside a div with a custom attribute (when hovered, shows tooltip "Paragraph inside a division")

More Complex Example: Tables

Attributes can also be applied to elements like tables. Below is a more complex example with attributes for styling and formatting. This code is also enclosed in a copy code box.

  • border: Specifies the border width of a table.
  • cellpadding: Defines the space between a cell's border and its content.
<table border="1" cellpadding="5" style="border-collapse:collapse;">
    <tr>
        <th title="Person's Name">Name</th>
        <th title="Person's Age">Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>25</td>
    </tr>
</table>

Explanation: The table uses the border and cellpadding attributes for formatting. The style attribute is also used to collapse the borders into a single line. The title attribute on <th> elements provides additional context on hover.

Output:

Name    Age
Alice   30
Bob     25
(Border is visible, cells have padding, hovering over headers shows tooltips)

Key Takeaways

  • Attributes add extra meaning and functionality to HTML elements.
  • Use attributes like href, src, alt, and title to enhance content and accessibility.
  • Inline styles with the style attribute should be used sparingly, as external CSS is generally preferred.
  • Custom data attributes (data-*) can store additional information for scripts and styling.
  • Always choose attributes that best convey the intended purpose and function of the element.
Prev Next