Exploring HTML Elements

When enrolled in an HTML course, you will observe that every HTML line has three essential components: the opening tags, the content, and the closing tags.

The initial label consists of the item’s name surrounded by angled brackets at the start and end. This lets you know where the element begins. The termination tag has a slash followed by the same name of the element before it, but apart from that it is the same as the start tag. The final tag is the indicator that the element has ended for you and other coders writing the code. If it is overlooked, the outcome can look strange.

Take the following example:

In this case, the entire element consists of the opening tag

, the content “This is a paragraph” and the closing tag

.

Attributes

HTML elements may also include attributes. An attribute gives supplementary details that will not be found in the real material. One example would be:

In this illustration, the label “class” is set to “editor-note.” The “class” label allows for a distinguishing mark to be used for pinpointing the component with notes such as design information.

In an HTML class, it is essential that students learn the necessary criteria for characteristics. For example, there should be a gap between the characteristic and the element’s label or a space between one trait and the preceding attribute. The attribute must be organized to have the name appearing before an equal sign. “Quotation marks need to be included when adding value.”

Nesting Elements With HTML

You can also nest one HTML element inside another, which is known as nesting. If for some reason you want to emphasize a word in the above example, you could write:

When nesting elements, pay attention to proper ordering. This means that you need to finish the inner elements before completing the outer ones. You must make sure that the tag is ended prior to the

tag because it was initiated after. Elements of HTML cannot intersect one another, since browsers would be baffled about how to handle the code, resulting in a less than satisfactory impact for both the developer and the user.

Empty HTML Elements

Elements in HTML which have no content are referred to as empty elements. One example would be an image element, like:

You should take note of two distinct characteristics in this illustration (src and alt) without any internal content. The absence of substantial material is caused by the fact that picture elements do not encompass the content; instead, they merely place an image at the wanted location.

Looking at an HTML Document

In order to make use of all of the various HTML components and grasp the concept of how they interconnect, look at an HTML paper including the elements and processes mentioned above.

Take a look at this example to get a visual understanding of how HTML documents are set up:

We will work our way through this example item by item in order to clarify everything.

The at the start serves as a link to the regulations associated with HTML webpages. This is a necessary element that has been around since the beginning of HTML, and it still needs to be included.

The element is called the root element. It wraps the content within the full page. The is the head element. This is the data that you keep which is not visible to the visitors of your website, but still exists on the HTML page. Illustrations include CSS for design, character set specifications, page explanations and keywords.

The
assigns the character encoding for the HTML document as UTF-8. That package contains characters from almost all written languages. This element guarantees that HTML will recognise the text you enter correctly. Including this element will help you avoid later issues.

The title element () sets your page’s title. This is what will be seen in the tab bar when the page loads and stored in bookmarks. All the contents for the webpage, such as words, gaming, audio, pictures, and so much more, should be placed within the body tag ().

Using HTML Elements to Mark Up Text

It is critical that you build a better understanding of the ubiquitous HTML elements since we have already looked into some of them during your studies of web dev. This will facilitate your journey in your HTML course. We cover the most important HTML elements below.

Headings

The title tags enable you to show main headings and subheadings in your written material. The HTML language has a total of six header levels, beginning from

to

. So, you would use:

For the main title on your page. Then the main titles should be in

, and the subsections should be in

. You can keep adding headings, up to the

level. It is not common to use more than 3-4 of these heading levels. It is essential to keep in mind that it is possible to utilize each level of headings as many times as necessary in one document. So, if your web page has chapters, you could have:

And so on.

Paragraphs

You observed the usage of the paragraph element in the initial illustration above. It appears as the

element.

Lists

Your HTML bootcamp will cover several types of lists. These can be ordered or unordered. No matter what, you will have to have a minimum of two components in your HTML in order to create a list.

Using

allows for creating a list where it does not matter the placement of the items. An example would be a shopping list. An ordered list can be thought of like a recipe where the sequence of steps is essential. They use the
element. All of the entries in the list are enclosed in the
1. element.

So, if you wanted to include a list with instructions, it would look like:

You can put HTML buttons onto your website using the button tag.

Centering

The

Line Breaks

There is also a line break tag within HTML. This is an empty element, as you just use
with neither an opening nor a closing tag. When you use the line break element, the subsequent text will start on a new line. Ensure there is a gap between the “br” and the forward slash. Older web browsers may not be able to show the line separation correctly. It is important to make sure to have the slash, because XHTML will not accept it without it.

Horizontal Lines

HTML provides the capability to add horizontal lines as a means to separate sections of a document. A

tag is utilized to generate a line from the current point to the edge of the right margin, at which point the line stops. This is also an empty element.

Preserve Formatting

You can employ the

tags to keep the original format of an HTML document.