What Are HTML Elements?

HTML elements are the building blocks of web pages, defining content such as text, images, links, and more. An element typically consists of an opening tag, content, and a closing tag, though some elements are self-closing.

• Structure: <tag>Content</tag> (e.g., <p>Hello</p>).
• Self-Closing Elements: Tags like <img> or <br> don’t need a closing tag.
• Nesting: Elements can contain other elements (e.g., <div><p>Text</p></div>).

Example: A paragraph element with nested content:

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

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

HTML Attributes

Attributes provide additional information or functionality to elements. They are included in the opening tag and follow the format name=”value”.

• Common Attributes:
  • id: Unique identifier for an element.
  • class: Groups elements for styling or scripting.
  • href: Specifies a URL for links (<a>).
  • src: Defines the source for images or scripts.
  • alt: Alternative text for images, improving accessibility.

Example: An image with attributes:

<img src="photo.jpg" alt="Sunset view" width="300">

<img src="photo.jpg" alt="Sunset view" width="300">

Types of HTML Elements

HTML elements are categorized based on their purpose and display behavior.

a. Block-Level Elements

These elements start on a new line and take up the full width available (e.g., <div>, <p>, <h1>).

Example:

<div>
    <h1>Main Heading</h1>
    <p>This is a block of text.</p>
</div>

<div>
    <h1>Main Heading</h1>
    <p>This is a block of text.</p>
</div>

b. Inline Elements

These elements stay within the flow of content and only take up as much space as needed (e.g., <span>, <a>, <strong>).

Example:

<p>Visit our <a href="https://example.com">website</a> for more info.</p>

<p>Visit our <a href="https://example.com">website</a> for more info.</p>

c. Semantic Elements

These elements provide meaning to content, improving accessibility and SEO (e.g., <header>, <footer>, <article>).

Example:

<header>
    <h1>Site Title</h1>
    <nav><a href="home.html">Home</a></nav>
</header>

<header>
    <h1>Site Title</h1>
    <nav><a href="home.html">Home</a></nav>
</header>

Common HTML Elements

Here are frequently used elements and their purposes:

• Text Elements:
  • <h1> to <h6>: Headings, with <h1> being the most important.
  • <p>: Paragraphs for text blocks.
  • <strong>: Bold text for emphasis.
  • <em>: Italicized text for emphasis.
• List Elements:
  • <ul>: Unordered (bulleted) list.
  • <ol>: Ordered (numbered) list.
  • <li>: List item within <ul> or <ol>.
• Link and Media Elements:
  • <a>: Creates hyperlinks.
  • <img>: Embeds images.
  • <audio> and <video>: Embeds media files.

Example: Combining elements:

<article>
    <h2>Our Services</h2>
    <p>Learn more about what we offer.</p>
    <ul>
        <li><strong>Web Design</strong></li>
        <li><em>SEO Consulting</em></li>
    </ul>
    <img src="services.jpg" alt="Team working">
</article>

<article>
    <h2>Our Services</h2>
    <p>Learn more about what we offer.</p>
    <ul>
        <li><strong>Web Design</strong></li>
        <li><em>SEO Consulting</em></li>
    </ul>
    <img src="services.jpg" alt="Team working">
</article>

Nesting and Best Practices

• Proper Nesting: Ensure elements are closed in the correct order (e.g., <p><strong>Text</strong></p> is correct; <p><strong>Text</p></strong> is not).
• Use Attributes Wisely: Include alt for images and id/class for styling/scripting.
• Keep It Simple: Avoid unnecessary nesting to maintain clean code.

Example: Correct nesting:

<section>
    <h3>Blog Post</h3>
    <p>Read our latest <a href="article.html">article</a>.</p>
</section>

<section>
    <h3>Blog Post</h3>
    <p>Read our latest <a href="article.html">article</a>.</p>
</section>