A start tag, some content, and an end tag define an HTML element. Everything from the start tag to the end tag is an HTML element:
<tagname>Content goes here...</tagname>
An example of HTML elements is given below:
<h1>A Heading</h1>
<p>A paragraph.</p>
HTML elements are the building blocks of a web page, they are used to define the structure, layout, and content of a web page. Each element is represented by a tag, which is a keyword enclosed in angle brackets (< and >).
There are several types of HTML elements, including:
Structural elements, which define the overall structure of the web page, such as <html>, <head>, <body>, <header>, <nav>, <main>, <article>, <aside>, <footer>, etc.
Text elements, which define the text content of the web page, such as <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <code>, etc.
Hyperlink elements, which create links between web pages, such as <a>, <link>, <nav>
Image elements, which embed images on a web page, such as <img>, <picture>
Multimedia elements, which embed audio and video on a web page, such as <audio>, <video>
Form elements, which create form controls, such as <form>, <input>, <label>, <select>, <textarea>, <button>
List elements, which create lists of items, such as <ul>, <ol>, <li>
Table elements, which create tables of data, such as <table>, <tr>, <th>, <td>
Each HTML element has a specific purpose and some have attributes that can be used to provide additional information or to control the behavior of the element. It’s important to use the correct HTML elements, with the correct syntax, to ensure that the web page is properly structured and can be correctly interpreted by web browsers and other devices such as search engine crawlers or assistive technologies.
Nested HTML Elements
Nested HTML elements are HTML elements that are placed inside other HTML elements. This allows you to create a hierarchical structure for your web page, which helps to organize and present the content in a logical and meaningful way.
For example, you might use a <div> element to define a section of the page, and then place other elements such as headings, paragraphs, and images inside that <div> to create the content for that section.
Here’s an example of nested HTML elements:
<div>
<h1>Welcome to my website</h1>
<p>This is my personal website, where I share my thoughts and ideas.</p>
<img src="image.jpg" alt="A description of the image">
</div>
In this example, the <div> element acts as a container for the <h1>, <p>, and <img> elements, which are nested inside it. This creates a clear and logical structure for the content on the page.
It’s important to use the correct nesting of elements and to keep the nesting levels as low as possible, as it can make it easier to understand and style the web page, and it can also make it more accessible for assistive technologies.
Some HTML elements have special rules for nested elements, meaning that certain elements can only be placed inside certain other elements. For example, a <p> element can only contain text and inline elements, while a <div> element can contain any type of elements.
For example,
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
In this example, the <ul> element represents an unordered list, and the <li> elements represent the items in the list. The <li> elements can only be placed inside the <ul> element and not outside of it, this is because <li> are list item elements and they should only be used inside lists.
Similarly,
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
In this example, the <table> element represents the table, <tr> represents table rows, <th> represents table header and <td> represents table data. The <th> and <td> elements can only be placed inside the <tr> element and not outside of it, this is because <th> and <td> are table cells elements and they should only be used inside table rows.
It’s important to follow these rules when nesting elements, as it can help to ensure that the web page is properly structured and can be correctly interpreted by web browsers and other devices such as search engine crawlers or assistive technologies.
Never Skip the End Tag
<p>This is a paragraph.d</p>
The opening tag for the paragraph element is <p>, and the closing tag is </p>. The content of the paragraph is “This is a paragraph.“
Skipping the end tag can cause the web page to display incorrectly or behave unexpectedly, as the browser may not know where the element ends and the next element begins. It can also cause accessibility issues for users who rely on assistive technologies.
There are some exceptions for self-closing tags like <img> and <br>, which don’t require a closing tag, but for most elements, it’s important to always include both the opening and closing tags.
It’s always a good practice to check your code with a validator tool, which can help you to identify and fix any issues with missing end tags or other errors in your HTML code.
Empty HTML Elements
Empty HTML elements are elements that do not have any content or text between the opening and closing tags. These elements are also known as void elements or self-closing elements. They are used to create elements that do not have any content but still need to be represented in the HTML document.
For example, the <br> element is an empty element that is used to create a line break. The code for this element is:
<br>
Another example is the <img> element, which is used to embed images in a web page. The <img> element does not have any content, but the source of the image is specified using the “src” attribute.
<img src="image.jpg" alt="A description of the image">
Empty elements are also known as self-closing elements, as they don’t require a closing tag. Instead, they can be closed by adding a forward slash (/) before the angle bracket (>).
<img src="image.jpg" alt="A description of the image"/>
It’s important to note that some elements can’t be empty, for example, the <div> and <p> elements need to contain some text or other elements.
As always, it’s always a good practice to validate your code with a validator tool, which can help you to identify and fix any issues with empty elements or other errors in your HTML code.
HTML is Not Case Sensitive
HTML is not case sensitive, which means that the tags and attributes can be written in uppercase or lowercase letters, and the web browser will still be able to interpret them correctly.
For example, the following code will produce the same output:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<p>This is my web page.</p>
</body>
</html>
<HTML>
<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>
<BODY>
<P>This is my web page.</P>
</BODY>
</HTML>
However, it’s a good practice to stick to lowercase for tags and attributes, as it makes the code more consistent and easier to read.
It’s also worth noting that attribute values are case sensitive and should be written exactly as specified, for example, the “type” attribute for the <input> element should be written as “type” and not “Type” or “TYPE“.
Also, it’s important to keep in mind that XHTML and XML are case sensitive, so if you’re working with those languages you should use lowercase letters for tags and attributes.
We always use lowercase tag names at EnableGeek.