What Are HTML Elements and How Do They Work?
HTML elements are the building blocks that make up web pages. These elements represent different types of content on a page, such as text, images, headings, links, and more.
Each element is represented by its own tag in HTML code, which defines how it should be displayed on the page. For example, a
<p> tag represents a paragraph of text and an
<img> tag represents an image.
Overall, understanding how HTML elements work is essential for creating functional and visually appealing web pages.
An HTML element is composed of a start tag, a end tag, and the content in between.
<tagname>The content goes here</tagname>
HTML documents are made up of nested HTML elements. The
<p> tags, the
<br> tag, and the content “This is a paragraph” are all part of the body element in the example below.
<!DOCTYPE html> <html> <head> <title>first page</title> </head> <body> <p>This is a paragraph</p> <p>This is a <br> line break</p> </body> </html>
As you can see from the above example, a
<br> element is included at the point where we want the text to break. The text after the
<br> begins again at the start of the next line of the text block.
Some HTML elements (like the
<br> tag) do not have end tags.
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (
<!DOCTYPE html> <html> <head> <title>first page</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- The root element is the
<html>element, which defines the entire HTML document.
- It has an
<html>start tag and an
- Then there is a
<body>element inside the
- Then, within the
<body>element, there are two additional elements:
HTML Cheat Sheet
If you want to learn more about HTML, grab my cheat sheet which is available on Gumroad.
This product will assist you in learning the fundamental HTML elements in your Web Development journey. It is intended for both beginners and experts who want to brush up on their knowledge.
All of the resources are structured and organised in a straightforward and easy-to-read manner. They include interactive external links, images, tag names and code snippets to help you understand the topics better.
Need a reference guide for all the HTML elements? Then check out – HTML elements reference – HTML: HyperText Markup Language | MDN
If you liked this article, then please share. You can also find me on Twitter for more updates.