DOCTYPE Decleration :
"<!DOCTYPE html>" is a declaration that tells the web browser which version of HTML the page is written in. It must be the very first line in an HTML document. In modern websites, it specifies that the document uses **HTML5**. This helps browsers render the page correctly.
<!DOCTYPE html>Note: DOCTYPE is not a tag it's actually a decleration.
<html> Tag :
The "<html>" tag is the root element of an HTML document. It encloses all the content on the webpage, including the head and body sections. This tag tells the browser that the document is written in HTML and serves as the container for all other HTML elements.
<html>
Every html elements
</html>
<head> Tag :
The <head> tag contains meta-information about the HTML document, such as the title, character set, styles, and scripts. It doesn’t display content directly on the webpage but helps the browser understand and properly render the page.
<head>
Every head elements
</head>
lang Attribute :
The lang attribute in HTML specifies the language of the document's content. It helps browsers, screen readers, and search engines understand how to process and display the text correctly. It's usually added to the <html> Tag.
<head lang="en">
Every head elements
</head><title> Tag :
The <title> tag sets the name of the webpage shown in the browser tab and search results. It goes inside the <head> section and helps users and search engines know what the page is about. Only one <title> per page.
<title> The title of the webpage </title><body> Tag :
The <body> tag contains all the visible content of a webpage like text, images, and links. It’s placed after the <head> in an HTML document. Everything inside <body> shows up on the screen for users to see.
<body>
Every body elements
</body><h1> to <h6> Heading Tags :
These are heading tags, used to define headings from highest (<h1>) to lowest (<h6>) importance. <h1> is typically used for main titles, and the rest are subheadings. They also affect SEO and structure.
<h1> The heading text </h1>
<h2> The heading text </h2>
<h3> The heading text </h3>
<h4> The heading text </h4>
<h5> The heading text </h5>
<h6> The heading text </h6>
Note: The <h1> should only be used once.
<p> Tag :
The <p> tag defines a paragraph of text. It automatically adds space above and below the content. It's commonly used to organize and separate text blocks.
<p> The paragraph </p><br> Tag :
The <br> tag inserts a line break within text. It’s an empty tag (no closing tag needed) and is useful for breaking lines without starting a new paragraph.
<p> The paragraph </p><br>
<p> The paragraph </p><hr> Tag :
The <hr> tag creates a horizontal line, often used to separate content. It’s a self-closing tag and adds a thematic break between sections.
<p> The paragraph </p><hr>
<p> The paragraph </p>
<strong> Tag :
The <strong> tag makes text bold and gives it semantic importance. It's used to highlight important content that should stand out to screen readers and users.
<strong> The paragraph </strong><em> Tag :
The <em> tag emphasizes text, typically displayed in italics. It also has semantic meaning, signaling stress or importance when read aloud by screen readers.
<em> The paragraph </em><b> Tag :
The <b> tag makes text bold, but without adding any semantic meaning. It’s used purely for styling, not for emphasizing content importance.
<b> The paragraph </b><i> Tag :
The <i> tag italicizes text for stylistic purposes. Like <b>, it doesn’t imply emphasis—just a visual change, like denoting foreign words or technical terms.
<i> The paragraph </i><u> Tag :
The <u> tag underlines text, mainly for visual styling. It doesn’t carry semantic meaning and is often used to highlight words or phrases.
<u> The paragraph </u><a> Tag :
The <a> tag defines a hyperlink that links to another page, file, or location. It uses the href attribute to set the URL. Users click it to navigate.
<a> The paragraph </a>href Attribute :
The `href` attribute (short for "hypertext reference") is used in HTML to specify the URL or path of a resource that a hyperlink points to. It is most commonly used with the <a> (anchor) tag to link to web pages, files, or other locations. When a user clicks the link, the browser navigates to the specified `href` destination. This attribute can contain absolute URLs (e.g., `https://example.com`) or relative paths (e.g., `/about.html`).
<a href="https://example.com"> The paragraph </a><nav> Tag :
The <nav> tag defines a section that contains navigation links. It helps organize site menus or tables of contents and improves accessibility.
<nav>
The elements with nagivation links
</nav><div> Tag :
A generic container used to group elements for styling or scripting. It has no semantic meaning by default. Commonly used with CSS for layout.
<div>
The other elements
</div><span> Tag :
An inline container for text or small elements. Used mainly for styling parts of text. It doesn’t break the flow like block elements do.
<span>
The other elements
</span><section> Tag :
Represents a standalone section of content, often with a heading. It’s used to group related content together semantically (like chapters or topics).
<section>
The other elements
</section><article> Tag :
Used for self-contained content like blog posts, news articles, or user comments. Each <article> should make sense on its own.
<article>
The other elements
</article><aside> Tag:
Defines content that’s related to the main content, like sidebars or extra info. Usually placed alongside or separate from the main area.
<aside>
The other elements
</aside><header> Tag :
Represents the top section of a page or a section. Typically includes logos, navigation, or headings. Can be used multiple times in a page.
<header>
The other elements
</header><footer> Tag :
Defines the bottom part of a page or section. Often contains copyright info, contact links, or related navigation.
<footer>
The other elements
</footer><main> Tag :
Specifies the main content area of a document. It should contain the central topic and be unique (used once per page).
<main>
The other elements
</main><ul> Tag :
Defines an unordered list (bullets). Used to list items with no specific order. Contains multiple <li> elements.
<ul>
The list elements
</ul><ol> Tag :
Defines an ordered list (numbered). Used when the order of items matters. Also contains <li> elements.
<ol>
The list elements
</ol><li> Tag :
Stands for "list item". Used inside <ul> or <ol> to define each item in the list.
<li> The list text </li><img> Tag:
Embeds an image into the page. Uses the src attribute for the image URL and alt for accessibility. It’s a self-closing tag.
<img>src Attribute :
The src attribute specifies the URL of an external resource to be loaded into an HTML element. It is commonly used with tags like <img>, <script>, and <iframe>.
<img src="image.jpg"> alt Attribute :
The **alt attribute** in HTML specifies alternative text for an image if the image cannot be displayed. It also improves accessibility by providing screen readers with descriptive content.
<img alt="_blank"> <video> Tag :
Embeds sound content in a webpage, like music or voice recordings. It supports attributes like controls, autoplay, and src.
<video src="video.mp4"> The video text </video>Note: alt attribute can be used for <video> as well.
<audio> Tag :
Embeds sound content in a webpage, like music or voice recordings. It supports attributes like controls, autoplay, and src.
<audio src="sound.mp3"> The audio text </audio>Note: alt attribute can be used for <video> as well.
<table> Tag :
Defines a table used to organize data in rows and columns. It contains <tr> (table row), <th> (table header), and <td> (table data) elements.
<table>
The table elements
</table><tr> Tag :
Represents a row in a table. It is used as a container for <td> and <th> elements.
<tr>
The table elements
</tr><th> Tag :
Defines a header cell in a table. Header cells are bold and centered by default, and usually describe columns.
<th> The table heading </th><td> Tag :
Defines a standard cell in a table row. It holds regular data/content within a table.
<td> The table text </td><form> Tag :
Represents an HTML form used to collect user input. It can contain form controls like <input>, <button>, <label>, etc.
<form>
The other elements
</form><button> Tag :
Defines a clickable button. It can be used to submit a form or trigger custom scripts.
<button> The button text </button><label> Tag :
Defines a label for a form control. Improves accessibility and is linked to controls using the for attribute.
<label>
The other elements
</label>