Which tags contain both opening & closing tags in HTML ?
HTML tags are markers that define the structure and content of web documents. They consist of angle brackets enclosing a tag name, such as <p> for paragraphs or <img> for images, and can include attributes for additional information.
So to better understand which tags are opening and closing in nature, we can divide them into 4 parts.
- Document structure tags
- Semantic tags
- Tables tags
- Container tags
Document structure tags:
HTML tag:
Open and close the tag of the HTML document.
Syntax:
<html> ... </html>
head tag:
The <html> and <body> tags are separated by the <head> element, which is a container for header data.
Syntax:
<head> ... </head>
body tag:
The following renders all the things which are shown on the web page. The body of the document is defined by the <body> tag. The <body> element includes all of an HTML document’s content, including headings, paragraphs, graphics, hyperlinks, tables, lists, and so on.
Syntax:
<body> ... </body>
title tag:
The title tag allows you to specify a title for a web page. This title appears in the browser title bar.
Syntax:
<title> ... <title>
Example 1: The following example demonstrates the title as “Tag Example” in the browser title bar. The body tag renders all the data in the web browser.
<!DOCTYPE html>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
This is an example for w3wiki HTML tags.
</body>
</html>
Output:
Semantic Tags:
Semantic elements have meaningful names which tells about type of content.
header tag:
It renders information that introduces a page (for example, a headline) or a portion of a page.
Syntax:
<header> ... </header>
nav tag:
It defines a navigation bar that contains a set of menus or a menu of hyperlinks.
Syntax:
<nav> ... </nav>
main tag:
It contains the main content of the web page.
Syntax:
<main> ... </main>
aside tag:
It renders information that is only distantly linked to the page’s main section
Syntax:
<aside> ... </aside>
footer tag:
The footer of a page, or a portion of a page, is located at bottom of the page. In most cases, the footer provides content-related information such as the author and a copyright declaration.
Syntax:
<footer> ... <footer>
article tag:
This tag specifies independent, self-contained content. This does nothing but if we want to apply CSS then it works in that way.
Syntax:
<article> ... </article>
Example 2: The following code demonstrates some of the semantic tags.
<!DOCTYPE html>
<html>
<head>
<title>Tag Example</title>
</head>
<body>
<article>
<header>A heading here</header>
<main>
<nav>
<a href="/html/">HTML</a> | <a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<p>w3wiki w3wiki w3wiki w3wiki</p>
<aside>
<p>w3wiki</p>
<p>w3wiki w3wiki w3wiki w3wiki</p>
</aside>
<p>w3wiki w3wiki w3wiki w3wiki</p>
</main>
<footer>Write footer here</footer>
</article>
</body>
</html>
Output:
Tables Tag:
HTML Table is an arrangement of data in rows and columns, or possibly in a more complex structure.
table tag:
It renders the table to the web page.
Syntax:
<table> ... </table>
tr tag:
It displays table row.
Syntax:
<tr> ... </tr>
th tag:
It shows the column names of the table or we can say heading row.
Syntax:
<th> ... </th>
td tag:
It shows table data.
<td> ... </td>
Example 3: The following code demonstrates the table tags.
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<h2>w3wiki Employee's Saving</h2>
<table style="width: 20%">
<tr>
<th>Name</th>
<th>saving</th>
</tr>
<tr>
<td>Kishan</td>
<td>$200</td>
</tr>
<tr>
<td>Pradumna</td>
<td>$150</td>
</tr>
<tr>
<td>Riya</td>
<td>$50</td>
</tr>
<tr>
<td>Rohan</td>
<td>$100</td>
</tr>
<tr>
<td>Samaksh</td>
<td>$170</td>
</tr>
</table>
</body>
</html>
Output:
Container Tags:
Container tags are generally divided into three parts, i.e., opening tag, content(which will display on the browser), and closing tag. In the content part, they can also contain some other tags.
heading tag:
An HTML heading tag is used to define the headings of a page.
Syntax:
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
Paragraph tag:
The <p> tag in HTML defines a paragraph.
Syntax:
<p> ... </p>
div tag:
A container for a block of content.
Syntax:
<div>...</div>
span tag:
A container for in-line content, such as content inside a paragraph.
Syntax:
<span> ... </span>
em tag:
This tag gives the contained text emphasis (usually in italics).
Syntax:
<em> ... </em>
strong tag:
This tag makes the content bold.
Syntax:
<strong>...</strong>
a tag:
This tag add the link to the text.
Syntax:
<a> ... </a>
ol tag:
This tag is for the ordered list.
Syntax:
<ol> ... </ol>
ul tag:
This tag is for the unordered list.
Syntax:
<ul> ... </ul>
li tag:
This tag is for the Item list
Syntax:
<li> ... </li>
Example 4: The following code demonstrates the container tags.
<!DOCTYPE html>
<html>
<head>
<title>Container Tags</title>
</head>
<body>
<h1>H1 Heading</h1>
<h2>H2 heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>
<a href="">Link</a>
<p>w3wiki</p>
</body>
</html>
Output:
Example 5: The following code demonstrates the container tags.
<!DOCTYPE html>
<html>
<head>
<title>Container Tags</title>
</head>
<body>
<strong>Bold</strong>
<p>w3wiki</p>
<em>emphasize the text</em>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output:
Contact Us