HTML Elements and Attributes

By /

1. What are HTML Elements?

An HTML element is a building block of a webpage that defines content, structure, and functionality. It consists of:

  1. Opening Tag (<tagname>) – Marks the beginning of an element.
  2. Content – The information inside the element.
  3. Closing Tag (</tagname>) – Marks the end of an element (except for self-closing elements).

Example of an HTML Element

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

✔ <p> is the opening tag.
✔ "This is a paragraph element." is the content.
✔ </p> is the closing tag.

🔹 Most HTML elements require an opening and closing tag, but some elements (like <br>, <img>) are self-closing.

2. Different Types of HTML Elements

HTML elements are broadly classified into:

  • Block-level elements (take up the full width).
  • Inline elements (only take up as much space as needed).

2.1 Block-Level Elements

Block elements automatically start on a new line and take up the entire width of their container.

Common Block Elements:

ElementPurpose
<div>Generic container for grouping content.
<p>Defines a paragraph.
<h1> to <h6>Headings, with <h1> being the largest.
<ul> / <ol>Defines unordered and ordered lists.
<table>Defines a table.

Example: Using Block Elements

htmlCopyEdit<h1>My Blog</h1>
<p>This is an introduction to my blog.</p>
<div>
    <p>Blog post content goes here.</p>
</div>

💡 Each element starts on a new line and spans the full width.

2.2 Inline Elements

Inline elements do not start on a new line and take up only as much space as needed.

Common Inline Elements:

ElementPurpose
<span>Generic inline container for styling.
<a>Creates a hyperlink.
<strong>Makes text bold.
<em>Italicizes text.
<img>Displays an image.

Example: Using Inline Elements

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

✔ The bold text remains in the same line.

3. Nesting HTML Elements

HTML elements can be nested inside other elements. However, elements must be properly closed to avoid errors.

✅ Correct Nesting:

htmlCopyEdit<p><strong>This is bold text inside a paragraph.</strong></p>

❌ Incorrect Nesting:

htmlCopyEdit<p><strong>This is incorrect.</p></strong>

🚨 Incorrect nesting can cause layout and rendering issues.

4. What are HTML Attributes?

Attributes provide additional information about an element. They are always included in the opening tag and follow the format:

Syntax:

htmlCopyEdit<tagname attribute="value">Content</tagname>

✔ Attributes are always in lowercase.
✔ Attribute values must be enclosed in quotes ("").

5. Common HTML Attributes

AttributePurposeExample
idUnique identifier for an element.<p id="intro">Hello</p>
classGroups multiple elements.<div class="container">
hrefSpecifies a hyperlink URL.<a href="https://example.com">Visit</a>
srcSpecifies an image source.<img src="logo.png">
altAlternative text for images.<img src="logo.png" alt="Company Logo">
titleDisplays a tooltip on hover.<p title="Tooltip text">Hover over me</p>

6. The id and class Attributes

6.1 The id Attribute (Unique Identifier)

  • Used to identify a specific element.
  • Must be unique on a page.

Example: Using id

htmlCopyEdit<p id="intro">This is an introduction.</p>

✅ Good for JavaScript interactions and CSS styling.

6.2 The class Attribute (Grouping Elements)

  • Used to apply styles to multiple elements.
  • Multiple elements can have the same class.

Example: Using class

htmlCopyEdit<p class="highlight">This text is highlighted.</p>
<p class="highlight">This text is also highlighted.</p>

✅ Useful for CSS styling and JavaScript manipulation.

7. Global Attributes (Available for All Elements)

Some attributes can be applied to any HTML element.

AttributeDescription
styleAdds inline CSS styles.
titleShows a tooltip when hovered.
hiddenHides an element from display.
contenteditableAllows the user to edit content.
tabindexSets the tab order of elements.

Example: Using contenteditable

htmlCopyEdit<p contenteditable="true">Click here to edit this text.</p>

🔹 The text becomes editable when clicked!

8. Boolean Attributes (True/False Values)

Some attributes do not require values—if they exist, they are considered true.

AttributeFunction
checkedMarks a checkbox as selected.
disabledDisables an input field.
readonlyMakes an input field uneditable.
requiredMakes a form field mandatory.

Example: Using Boolean Attributes

htmlCopyEdit<input type="checkbox" checked> I agree

✅ The checkbox is pre-selected.

9. Self-Closing Tags (Void Elements)

Some HTML tags do not need a closing tag.

Examples of Self-Closing Tags:

htmlCopyEdit<img src="logo.png" alt="Company Logo">
<input type="text" placeholder="Enter your name">
<br>
<hr>

✅ These elements do not contain content inside them.

10. Putting It All Together – Full Example

htmlCopyEdit<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Elements and Attributes</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="highlight">HTML Basics</h1>
    <p id="intro">Welcome to the world of HTML!</p>
    <a href="https://example.com" title="Go to Example">Visit Example</a>
    <img src="image.jpg" alt="Example Image">
</body>
</html>

This example includes:
✔ Block and Inline Elements
✔ Attributes (id, class, href, alt, etc.)
✔ A well-structured HTML document

Conclusion

In this chapter, you learned:
✅ What HTML elements are and their types.
✅ The difference between block and inline elements.
✅ How to use attributes like id, class, href, alt, and more.

Scroll to Top