HTML Elements

HTML elements are the building blocks of HTML documents. They define the structure and content of a web page.

In HTML, tags are used to mark the beginning and end of the element. An element is the hole thing, from the opening tag to the closing tag.

Examples of HTML elements

Here are a few examples of HTML elements:

<p> : This element is used to define a paragraph of text.

For example:

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

<a> : This element is used to create a hyperlink to another web page.

For example:

<a href="https://www.example.com">Click here to visit example.com</a>

<div> : This element is used to divide the document into logical sections or blocks.

For example:

<div>
 <p>This is a paragraph inside a div element.</p>
</div>

<header> : This element is used to define the header of a document. It usually contains the logo, site navigation, and other important information.

For example:

<header>
 <img src="logo.png" alt="Logo">
 <nav>
   <a href="/">Home</a>
   <a href="/about">About</a>
   <a href="/contact">Contact</a>
 </nav>
</header>

There are many other HTML elements that you can use to create a web page. These are just a few examples to give you an idea of what HTML elements are and how they work.

Nested Elements

In HTML, an element is a piece of content that is contained within a tag. If one element is contained within another element, it is said to be a nested element.

For example:

<body>
 <p>This is a paragraph containing some <strong>bold</strong> text.</p>
</body>

In this example, the <p> element is the parent element, and the <strong> element is the child element (or nested element). The <strong> element is nested within the <p> element.

HTML Tags

An HTML tag is an element that is added to the original text to tell the browser how to display it. It is not displayed as is in the browser, it is interpreted by it.

A tag can have zero to several attributes. The attributes are additional information that characterize it. They are presented in the form of attribute="value". Be careful not to confuse an HTML attribute with a CSS property!

Example of a tag and its attribute:

<html lang="en">

Each open tag must be closed, but there are exceptions.

There are two types of tags:

  • Unpaired tags.
  • Paired tags.

Unpaired tags

In HTML, an unpaired tag is a tag that does not have a corresponding closing tag. Unpaired tags are also known as self-closing tags.

An example of an unpaired tag is the <img> tag, which is used to embed an image in an HTML document. The <img> tag does not have a corresponding closing tag because it does not contain any content. Instead, it has attributes that specify the source of the image and other information about how the image should be displayed.

Here is an example of how the <img> tag is used:

<img src="image.jpg" alt="A description of the image">

Other examples of unpaired tags in HTML include the <input> tag and the <br> tag.

Paired tags

In HTML, a paired tag is a tag that has a corresponding closing tag. Paired tags are used to enclose a block of content within an HTML document. The closing tag has the same name as the opening tag, but it has a forward slash (/) before the tag name.

Here is an example of a paired tag in HTML:

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

In this example, the opening tag is <p> and the closing tag is </p>. The content of the paragraph is "This is a paragraph of text."

Other examples of paired tags in HTML include the <div> tag, the <ul> tag, and the <li> tag.

Comments

Comments allow you to leave information or descriptions of the code and can be used anywhere in your document. However, it is not these comments that should be used for the JavaScript and CSS languages which have their own comment system.

These comments will not be displayed in the browser but they will remain present in the source code, so you should avoid putting confidential information in them at all costs.

They are delimited by <!-- and --> and can be multiline.

<!-- Here's a first comment on a line. -->

<!-- Here is a second comment.
This one is multi-line. -->

<!------------------ 3 or more consecutive hyphens is not recommended! ----------------->

For the sake of cross-browser compatibility and misinterpretation of browsers, it is strongly discouraged to write three (or more) consecutive hyphens.

HTML Basics