HTML Tags - AK Deep Knowledge

If you want to create a nice website, you need to know about HTML tags. HTML tags are important because they help you organize and display content on your website.

An HTML tag is like a container for content or other HTML tags. Tags are words that are enclosed within angle brackets < and >.

They tell the web browser how to format and show the content on the webpage.

Here are some commonly used HTML tags

Document Structure Tags

<!DOCTYPE html>: Specifies the document type.
<html>: Encloses the entire HTML document.
<head>: Contains meta-information and links to scripts and stylesheets.
<body>: Contains the content of the web page.

Metadata Tags

<title>: Sets the title of the web page.
<meta>: Provides metadata such as character set, author, and viewport settings.
<link>: Links external resources like stylesheets.

Text Formatting Tags

<p>: Paragraph.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>: Headings.
<strong>: Strong emphasis (typically bold).
<em>: Emphasis (typically italic).
<br>: Line break.
<hr>: Horizontal rule.

List Tags

<ul>: Unordered list.
<ol>: Ordered list.
<li>: List item.

Hyperlink and Media Tags:

<a>: Anchor (used for links).
<img>: Image.
<audio>: Audio content.
<video>: Video content.

Form Tags

<form>: Form.
<input>: Input field.
<textarea>: Text area.
<button>: Button.
<select>: Dropdown list.
<option>: Options within a <select> or <datalist>.

Table Tags

<table>: Table.
<tr>: Table row.
<td>: Table data cell.
<th>: Table header cell.
<thead>: Table header group.
<tbody>: Table body group.
<tfoot>: Table footer group.

Semantic Tags

<header>: Header section.
<footer>: Footer section.
<article>: Article.
<section>: Section.
<nav>: Navigation.
<aside>: Sidebar content.

HTML tags can be paired or unpaired. Paired tags have both opening and closing tags, while unpaired tags do not need a closing tag.

Container Tags

<div>:This tag defines a division or section in an HTML document and is commonly used as a generic container for grouping and styling purposes.
<span>: The <span> tag is an inline element used to group and apply styles to inline elements without affecting the layout of the document.

These container tags are versatile and can be used to structure and style content according to the needs of the webpage without conveying any specific meaning or semantics.

Paired tags

Opening tag: Starts with < and ends with >, like <p>.
Closing tag: Starts with </ and ends with >, like </p>.

Unpaired tags

Self-closing tag: Starts with <, ends with />, like <br/>.

It’s important to understand these tags to build a website effectively.

The picture below shows how HTML tags are arranged. It’s like a tree where one tag can hold other tags, and those tags can hold even more tags. Some tags can stand alone, while others need to be closed. This structure helps organize content on a webpage.