What is an element in HTML?
HTML elements consist of start and end tags. The content is sandwiched between the start and end tags of the element. The following is the general syntax of HTML elements:
<TAG>Content</TAG>
Below is a general list of tags and the content they carry.
Tags
Start Tag | Content | End Tag |
<html> | Root of HTML document | </html> |
<h1> | Heading | </h1> |
<p> | Paragraph | </p> |
<h2> | Smaller heading than h1 | </h2> |
<br> | No content; creates a line break | No end tag |
You should never forget the end tag for an element, as it is necessary to end the content carried by that element.
Note: Some tags perform an action but do not have an end tag, like
<br>and<img>. These are known as void or empty elements.
HTML
The <html> tag is the root of an HTML document. The rest of the code for the document goes inside this tag.
Nested elements
Each of the elements in HTML can also include other elements in their content. The code below shows how you can do this. We start the code with the <html> tag and keep including other elements, such as the <body> element for defining the body of the code and the <h1> element to define the heading for the page.
Difference between tag and element
Although the terms tag and element are often used interchangeably by many, they are not one and the same. In fact, tags are a part of the element.
In an element, # and `` are tags, but when you include the content between two tags, it makes up an element. For example, # Hello World is an element.
Types of tags
There are varying types of tags that exist in HTML. The following are some of their names and examples:
Paired tags
Paired tags require both an opening and closing tag. An example of this is heading tags such as # , which is an opening tag that is paired with the closing tag ``
Unpaired or self-closing tags
Unpaired tags do not have any closing tags and only have an opening tag. The tag <br> forms a line break on the webpage and does not require a closing tag. Similarly, the image tag is also a self-closing tag; for example, <img src='usr/bin/img'>.
Meta tags
Meta tags are used for websites to describe the website and make it easier to search on the internet. The code below shows how you can use meta tags. There is no output of meta tags, as the description added for a website in a meta tag is displayed in the results of a browser search instead.
Moreover, meta tags have an attribute called name that specifies the kind of data that is being described in a meta tag.
Formatting text tags
These tags are used to change the size and appearance of text on a website. This includes making text bold, underlining it, changing the font of the text, etc. The following is a list of tags that format text:
<u></u>: underlines the text<b></b>: makes the text bold<br>: inserts a line break between the text of a paragraph or heading<i></i>: italicizes the text<ul></ul>: creates bullets points for an unordered list<ol></ol>: creates an ordered list<li></li>: to list items in each of the lists mentioned above
The code below outlines how you can use these text formatting tags:
