What is an HTML Element? #
An HTML element is the fundamental building block of a webpage. It tells the web browser how to structure and display a part of the content on the web. Everything on a webpage, from headings and paragraphs to images and links, is created using HTML elements.
Structure of an HTML Element #
An HTML element usually consists of three parts:
- Start tag: Marks the beginning of the element. It looks like
<tagname>. - Content: The text or other elements inside.
- End tag: Marks the end of the element. Written as
</tagname>.
Example:
<p>This is a paragraph.</p>
<p>is the start tag.This is a paragraph.is the content.</p>is the end tag.
Some elements are empty and don’t have content or an end tag, like the line break tag <br>.
Common HTML Elements and Their Uses #
Here are some of the most commonly used HTML elements with explanations and examples:
| Element | Description | Example |
|---|---|---|
<html> | The root element that contains the whole webpage. | <html> ... </html> |
<head> | Contains page metadata like title or links to stylesheets. | <head> ... </head> |
<title> | Sets the title shown on the browser tab. | <title>My Webpage</title> |
<body> | Contains the visible content of the webpage. | <body> ... </body> |
<h1> to <h6> | Headings of different sizes (<h1> is the largest) | <h1>Main Title</h1> |
<p> | Paragraph of text. | <p>This is a paragraph.</p> |
<a> | Hyperlink to another page or location. | <a href="https://widelamp.com">Visit Widelamp</a> |
<img> | Displays an image. Requires src and alt attributes. | <img src="logo.png" alt="Logo"> |
<ul>, <ol>, <li> | Unordered and ordered lists, with list items. | <ul><li>Item 1</li><li>Item 2</li></ul> |
<div> | A container for grouping elements (block-level). | <div>Content inside</div> |
<span> | A small container for inline elements. | <span style="color:red;">Red text</span> |
<br> | Inserts a line break (empty element). | Line1<br>Line2 |
<hr> | A horizontal rule to separate content. | <hr> |
Block-Level vs Inline Elements #
- Block-level elements take up the full width and start on a new line. Examples:
<div>,<p>,<h1>. - Inline elements only take up as much width as necessary and do not start on new lines. Examples:
<a>,<span>,<img>.
Nesting HTML Elements #
HTML elements can be placed inside other elements; this is called nesting. For example, you might have a paragraph within a <div> container:
<div>
<h2>Section Title</h2>
<p>This is a paragraph inside a div.</p>
</div>
Nesting helps organize and structure your webpage content effectively.
Summary and Next Steps #
HTML elements define the structure and content of webpages. Understanding tags like <html>, <head>, <body>, headings, paragraphs, links, and images is essential to building websites. Remember:
- Elements usually have opening and closing tags.
- Some elements are empty and don’t need a closing tag.
- Elements can be nested inside other elements to create structured content.
Practice by creating simple HTML pages that use these common elements. When ready, explore attributes, styling with CSS, and adding interactivity with JavaScript.
