HTML Elements

An HTML element is defined by a start tag, some content, and an end tag. For example this is a paragraph element:

This is a paragraph.

 is the start tag
This is a paragraph. is the content
 is the end tag

It should be noted that HTML tags are not case sensitive. This means that  is the same as . However, it is a good practice to use lowercase tags. This is because it makes your code easier to read and understand. It also helps to keep your code consistent.

Some elements have no content and are called empty elements. Empty elements have no end tag. But they still have a start tag. For example, the   element is an empty element. It is used to insert a line break. The   element has no content, and therefore no end tag. Instead the start tag is closed with a slash.

Nested Elements

Nested elements are elements that are contained within other elements. All HTML documents have nested elements. The way HTML pages are laid out forces this to be true. Let's take a look at the following example:


                    <!DOCTYPE html>

                    <html>

                    <body>

                    <h1>My First Heading</h1>

                    <p>My first paragraph.</p>

                    </body>

                    </html>

The <h1> and  elements are nested inside the <body> element. These are known as child elements with the <body> being the parent element.

The <html> element is the root element of an HTML page. It is the parent of all other elements in the document. The <body> element is a child of the <html> element, and the <h1> and  elements are children of the <body> element.

The importance of this structure is that it allows us to create a hierarchy of elements. This hierarchy is important for the browser to understand how to display the elements on the page. It also allows us to apply styles to elements based on their position in the hierarchy. For example, we can apply a style to all  elements that are children of the <body> element. We will learn more about this in the CSS sections. In the mean time let's stay focused on HTML and learn how to build our pages properly using the right tags at the right times. This will be very important later on when we start to learn about CSS and JavaScript and is very important for SEO (Search Engine Optimization) as well.

Never Skip the End Tag!

It is very important to always close your tags. If you do not close your tags, the browser will try to guess what you mean. This can lead to unexpected results and can cause your page to look very different than you intended. It can also cause your page to break in some browsers. So always close your tags!

The Basics

Working on it