Max Lockwood

Posted on Mar 14, 2023 • Updated on Apr 5, 2023 • Originally published at maxlockwood.dev

What Are HTML Elements and How Do They Work?

#html #webdev #beginners #tutorial

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.

Elements can also have attributes like id or class that allow them to be styled with CSS or manipulated with JavaScript. When a user visits a web page, their browser parses the HTML code and renders each element as specified in the tags and attributes. This allows for flexible and customisable website design that can adapt to various devices and screen sizes.

Overall, understanding how HTML elements work is essential for creating functional and visually appealing web pages.

HTML Elements

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 (<html>, <body>, <h1> and <p>):

<!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 element, which defines the entire HTML document.
It has an <html> start tag and an </html> end tag.
Then there is a <body> element inside the <html> element.
Then, within the <body> element, there are two additional elements: <h1> and <p>.

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.