HTML Elements and Tags – Quick & Easy Overview

HTML Elements and Tags – An Overview, with a Code Example

HTML uses elements to describe the structure of web pages. These elements are denoted by their tags, either in tag pairs, or as lone tags / empty elements.

Every web page, whether it be a page on Wikipedia, or an article on Which Cryptocurrency Exchange Should I Trust? – contains and is structured using HTML…

Let’s now look at a typical HTML web page, markup included, and see how these aspects combine and work together.

HTML Elements and Tags – Our Example

EXAMPLE CODE

<hmtl>

<body>

<h1>This is an example of a typical web page (this is the Main Heading)</h1>

<p>This paragraph of text might be a typical introduction to the purpose of our webpage. If we have a lot of text and content to communicate, we might find it easier to split the content into multiple paragraphs, each with a separate sub-heading. HTML will help us to define and achieve this.</p>

<h2>Our first Sub-Heading</h2>

<p>Web pages of long text can easily be broken down into manageable sections and sub-sections using the relevant <a href=”https://thewebputsimply.com/what-is-html”>HTML</a> elements for paragraphs and headings. You might even chose to further break down your page content and use sub-sub-headings. By default, HTML allows for 6 different and definable levels of headings.</p>

<h3>Another Sub-Heading, this time a “sub-sub-heading”</h3>

<p>This text might be an aside, related to the previous paragraph. You could even reduce the size or change the colour of this text using <a href=”https://thewebputsimply.com/what-is-html”>CSS</a> to signify its standing in the page as a whole. <br />Here, I’ve included a line break to start a new line within the same paragraph but also demonstrate one of a number of the so-called “empty elements” or single tag elements.</p>

</body>

</html>

BROWSER RESULT

This is an example of a typical web page (this is the Main Heading)

This paragraph of text might be a typical introduction to the purpose of our webpage. If we have a lot of text and content to communicate, we might find it easier to split the content into multiple paragraphs, each with a separate sub-heading. HTML will help us to define and achieve this.

Our first Sub-Heading

Web pages of long text can easily be broken down into manageable sections and sub-sections using the relevant HTML elements for paragraphs and headings. You might even chose to further break down your page content and use sub-sub-headings. By default, HTML allows for 6 different and definable levels of headings.

Another Sub-Heading, this time a “sub-sub-heading”

This text might be an aside, related to the previous paragraph. You could even reduce the size or colour of this text using CSS to signify its standing in the page as a whole.

Here, I’ve included a line break to start a new line within the same paragraph but also demonstrate one of a number of the so-called “empty elements” or single tag elements.

HTML Elements and Tags – Description of Browser Result (shown above)

The opening <html> tag informs the web browser that anything between it, and its accompanying closing </html> tag is in fact HTML code and should be treated as such.

The <body></body> element indicates to the browser that anything within this pair of tags should be displayed within the main browser window and shown to the user.

Anything between <h1> and </h1> will be rendered and displayed as a main heading. Each individual browser will have defaults for how headings are rendered and shown to the user, but use of CSS allows a web designer to dictate this (see CSS).

The <p> and </p> tags enclose a paragraph of text.

Anything between <h2> and </h2> will be rendered and displayed as a secondary or second-level heading. Again, the defaults for how a sub-heading is displayed can be dictated using CSS.

The <p> and </p> tags enclose a second paragraph of text.

A third heading is used, this time denoted by <h3></h3> to signify it is of lower significance than the previous two headings. Again, the defaults for how a sub-heading is displayed can be dictated using CSS.

The <p> and </p> tags enclose a third paragraph of text.

A line break mid paragraph is made possible through the use of the line break <br /> element. Notice here that the line break element is an “empty-element”, that is; it only comprises a single tag.

The closing </body> tag denotes the end of the content which is to be displayed in the browser window.

The closing </html> tag indicates the end of the HTML code (most commonly this ends the MTHL document).

HTML Elements and Tags – Recap

Elements tend to come in tag pairs, an opening tag comprising an opening angle bracket followed by some characters, followed by a closing bracket, and a closing tag comprising an opening angle bracket, a forward-slash, the same characters, and then a final closing angle bracket.

Some elements comprise only a single tag. These elements are commonly known as “empty elements” and examples include the image <img> element, and the line break <br /> element.

HTML Elements and Tags – An Extra

HTML elements can reside within one another. There is nothing to stop an image <img> element sitting within a section designated as a paragraph <p></p>, indeed this feature is extensively exploited and its use common across all websites.