HTML Elements

HTML (HyperText Markup Language) elements are the building blocks of web pages. They define the structure and content of a webpage, allowing browsers to display it as intended.

Each HTML Element consists of tags, attributes, and content, and together they bring functionality and design to the internet.

In this HTML Tutorial, we will learn what HTML elements are, different types of HTML elements, the most commonly used elements, their usage, and best practices to make your webpages effective and accessible, etc., with the help of detailed examples.

What Are HTML Elements?

An HTML element is defined by a start tag, content, and an end tag. The structure looks like this:

</>
Copy
<tagname>Content goes here</tagname>

For example, the following paragraph element uses the <p> tag:

</>
Copy
<p>This is a paragraph.</p>

In the following screenshot, we have shown how this paragraph appears in a web browser and also shown the HTML code via browser’s Inspector.

HTML Elements Example - A paragraph displayed in a web page, along with the code in page Inspector

HTML elements can be nested, combined, and styled to build complex web pages.

Types of HTML Elements

1. Block-Level Elements

Block-level elements occupy the full width available and start on a new line. Common examples include:

  • <div>: A generic container for grouping other elements.
  • <p>: Represents a paragraph.
  • <h1> to <h6>: Headings used to define titles and subtitles.
  • <ul> and <ol>: Used to create unordered and ordered lists.

Example: index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<body>
  <div>A div.</div>
  <p>This is a paragraph.</p>
  <h1>Heading 1</h1>
  <h6>Heading 6</h6>
  <ul>
    <li>Unordere list item 1</li>
    <li>Unordere list item 2</li>
  </ul>
</body>
</html>

Video

2. Inline Elements

Inline elements do not start on a new line and only occupy as much width as their content. Common examples include:

  • <span>: A generic container for inline content.
  • <a>: Defines hyperlinks.
  • <strong>: Indicates strong emphasis (typically bold).
  • <em>: Denotes emphasized text (typically italic).

3. Empty Elements

Empty elements do not have closing tags and are self-contained. Examples include:

  • <br>: Inserts a line break.
  • <img>: Embeds an image.
  • <input>: Creates an input field.

Commonly Used HTML Elements

1. Text Elements

Text elements are used to define and style text on a webpage. Key examples include:

  • <h1> to <h6>: Define headings, with <h1> being the most important and <h6> the least.
  • <p>: Creates paragraphs.
  • <blockquote>: Represents a block of quoted text.
  • <pre>: Displays preformatted text.

2. Media Elements

Media elements embed images, videos, and audio into web pages:

  • <img>: Embeds an image.
  • <video>: Embeds a video.
  • <audio>: Embeds audio content.
  • <figure> and <figcaption>: Group media content with a caption.

3. Form Elements

Form elements collect user input and include:

  • <form>: Represents a form.
  • <input>: Creates input fields (text, password, checkbox, etc.).
  • <textarea>: Creates a multiline text input field.
  • <button>: Defines clickable buttons.

HTML Element Nesting

HTML elements can be nested to create complex structures. For example:

</>
Copy
<div>
  <h1>Welcome</h1>
  <p>This is a sample paragraph with a <strong>bold</strong> word.</p>
</div>

Nesting allows you to group and structure content logically, making it easier to style and manage.

Attributes of HTML Elements

Attributes provide additional information about HTML elements. They are written in the start tag and typically consist of a name and a value:

</>
Copy
<a href="https://example.com">Visit Example</a>

Common attributes include:

  • href: Specifies the URL for links.
  • src: Specifies the source of images, videos, or scripts.
  • alt: Provides alternative text for images.
  • id and class: Define unique identifiers and classes for styling.

Semantic HTML Elements

Semantic HTML elements clearly describe their meaning and purpose, improving accessibility and SEO. Examples include:

  • <header>: Represents the page’s header or a section header.
  • <nav>: Defines a navigation menu.
  • <main>: Specifies the main content area.
  • <article>: Represents self-contained content, such as blog posts.
  • <footer>: Defines the footer section of a page or section.

Using semantic elements improves code readability and ensures compatibility with assistive technologies.

Conclusion

HTML elements are the foundation of web development. By understanding their types, uses, and best practices, you can create robust, accessible, and visually appealing web pages. Whether you’re building simple text pages or complex web applications, mastering HTML elements is a crucial step in your journey as a web developer.