Skip to main content

Html Tags and Elements

Introduction​

HTML (HyperText Markup Language) is the primary language used to create and design websites. This language uses a system of tags and elements to structure and format content on a web page. Understanding these tags and elements is fundamental to learning HTML and creating effective web pages.

What are HTML Tags?​

HTML tags are the building blocks of any webpage. They define the structure and content of the page. A tag is a specific keyword enclosed in angle brackets < >. Tags usually come in pairs, an opening tag <tag> and a closing tag </tag>. Everything that lies between the opening and closing tags is the content of that element.

<tag> This is the content of the tag </tag>

Common HTML Tags​

Here are some common HTML tags that you will often use:

  • <html>: This tag is used to tell the browser that the content is written in HTML language.
  • <head>: This tag contains meta-information about the document like its title.
  • <body>: This is where the main content of the webpage goes.
  • <title>: This tag is used to set the title of the webpage.
  • <h1> to <h6>: These are header tags, with <h1> being the largest and <h6> the smallest.
  • <p>: This tag is used to create a paragraph.
  • <a>: This tag is used to create a hyperlink.

What are HTML Elements?​

An HTML element consists of a start tag, some content, and an end tag. The element encompasses everything from the start tag to the end tag.

<tag> This is the content of the element </tag>

In this example, <tag> is the start tag, This is the content of the element is the content, and </tag> is the end tag.

Empty Elements​

Not all HTML elements have a closing tag. These are known as void or empty elements. An example of this is the <img> tag which is used to embed images. It does not have a closing tag as it does not contain any content, instead, it usually has attributes providing the source of the image and other information.

<img src="image.jpg" alt="An image">

Attributes​

HTML elements can also have attributes. Attributes provide extra information about the element and are included in the opening tag. The most common attributes are class, id, and style. 

<tag attribute="value"> This is the content of the element </tag>

Nesting Elements​

HTML elements can be nested within each other. This means you can put one element inside another. This is how we build up the structure of a webpage.

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

In this example, the <h1> and <p> elements are nested inside the <body> element.

Conclusion​

Understanding HTML tags and elements is crucial to web development. They form the basis of how we structure and style content on the web. Remember, practice is key when it comes to coding. So don't forget to practice what you've learned here by creating your own web pages. Happy coding!