Artboard 2

Build the internet on DigitalOcean with ☁️ Servers, Managed DBs, K8s. 💰 Start free with a $100 credit.

3 min to read

Tags

An HTML document comprises of tags

Tag Me Mama!

An HTML document comprises of tags. There are many tags in HTML for a variety of purposes. At first you may feel overwhelmed by how many tags there are out there in html. Don’t worry you don’t need to memorise them.

When you’ll start building websites these tags will be automatically stored in your long term memory. :wink:

What does tag look like?

Example of a tag:

<html></html>

This is the html tag. The html document itself begins with a tag.

Element Architecture

An html element usually has a start tag and an end tag. The content goes between the start tag and end tag.

<tagname>Content</tagname>

HTML Elements without any content between them are known as Empty elements. Empty tags don’t have an end tag, only a start tag. eg. the <br> tag which is an empty tag and is used for line breaks.

Examples of Common Elements:

Start Tag Element Content End Tag
<h1> DEVHOOT’s heading </h1>
<p> DEVHOOT’s paragraph </p>
<h2> DEVHOOT’s second heading </h2>
<br>    

Nesting

One html element can be wrapped inside another html element. This is known as Nesting of html elements.

<!DOCTYPE html>
<html>
  <body>
    <h1>DevHoot Enterprise</h1>

    <p>Living, Learning, Levelling Up With DevHoot.</p>
  </body>
</html>

This above example from earlier has 4 html elements.

<html>

  • The <html> element defines an html document.
  • Every html document must have this element.
  • It has a start tag <html> and an end tag `</html>
  • The content inside this element is another html element, the <body> element.

<body>

  • The <body> element defines the document body.
  • This element houses the content that is actually visible in the webpage.
  • It has a start tag <body> and an end tag </body>
  • The content inside this element are two other html elements, the <h1> and <p> elements.

<h1>

  • The <h1> element defines a heading.
  • It has a start tag <h1> and an end tag </h1>
  • The content inside this element is: DevHoot Enterprise

<p>

  • The <p> element defines a paragraph.
  • It has a start tag <p> and an end tag </p>
  • The content inside this element is: Living, Learning, Levelling Up With DevHoot.

Always close tags

Some page might not display correctly if you forget closing tags.

Note: The closing tag is considered optional by many browsers so your webpage will be displayed alright even if you miss closing tags. However, this is not recommended as the results might be unexpected and your code quality will be low and not parsed by other strict parsers like xml, xhtml.

Case Sensitivity

HTML is not a case sensitive language. <html>, <HTML>, <Html> all are valid tags.

The W3C recommends using lowercase html tags for stricter document type like xml.

At DevHoot we have a habit of only using lowercase tags

#html #tags