HTML Elements

HTML elements are the building blocks of any webpage. They tell the browser how to display content, from text and images to videos and interactive forms. Understanding HTML elements is crucial for anyone starting their web development journey.

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag. The start tag tells the browser where the element begins, the content is what’s displayed, and the end tag marks the element’s conclusion. Elements can also have attributes, which provide additional information about the element. Think of elements as containers that hold and organize your web content.

Basic Example

Let’s look at a simple example of a paragraph element:


<p>This is a paragraph of text.</p>

In this example:

 is the start tag (denoting a paragraph).
This is a paragraph of text. is the content.
 is the end tag. Notice the forward slash / indicating the closing tag.

This code will render a paragraph of text on your webpage.

Practical Usage

Here’s an example demonstrating how to use different elements to structure a basic webpage with a heading, paragraph, and an image:


<!DOCTYPE html>
<html>
<head>
  <title>My First Webpage</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a short introduction.</p>
  <img src="https://via.placeholder.com/150" alt="Placeholder Image">
</body>
</html>

Let’s break this down:

<!DOCTYPE html>: Declares this is an HTML5 document.
<html>: The root element of an HTML page.
<head>: Contains metadata (information about the page, like the title).
<title>: Sets the title that appears in the browser tab.
<body>: Contains the visible page content.
<h1>: A level 1 heading (the most important heading).
: A paragraph of text.
<img src="..." alt="...">: Inserts an image. src specifies the image’s source URL, and alt provides alternative text (for accessibility). Note that the <img> element is a “self-closing” tag; it doesn’t need a separate closing tag.

This example illustrates how elements are nested within each other to create the structure of a webpage.

Key Takeaways

Elements are the foundation: HTML elements are the core building blocks of web pages.
Tags define elements: Elements are defined by start and end tags (e.g.,  and ).
Content goes in between: The content you want to display goes between the start and end tags.
Attributes add information: Attributes provide additional details about an element (e.g., src and alt in the <img> tag).
Structure is key: HTML elements are nested to create the overall structure and organization of your web content.