What is HTML?
HTML stands for Hypertext Markup Language. It is the standard language used for creating and designing web pages and web applications. HTML describes the structure of a webpage using a system of tags and elements that tell the browser how to display content such as text, images, links, tables, and forms.
HTML is a markup language, not a programming language. Markup languages are used to define the structure of text documents and provide instructions for how content should appear.
In HTML, tags can be broadly categorized into two types:
HTML stands for Hypertext Markup Language. It is the standard language used for creating and designing web pages and web applications. HTML describes the structure of a webpage using a system of tags and elements that tell the browser how to display content such as text, images, links, tables, and forms.
HTML is a markup language, not a programming language. Markup languages are used to define the structure of text documents and provide instructions for how content should appear.
In HTML, tags can be broadly categorized into two types:
1. Paired Tags (Container Tags)
These tags consist of two parts: an opening tag and a closing tag. The content is placed between these two tags.
Opening Tag: Marks the start of the element. It is enclosed in angle brackets (< >).
Closing Tag: Marks the end of the element. It is also enclosed in angle brackets but with a forward slash (/) before the tag name.
These tags consist of two parts: an opening tag and a closing tag. The content is placed between these two tags.
Opening Tag: Marks the start of the element. It is enclosed in angle brackets (
< >).Closing Tag: Marks the end of the element. It is also enclosed in angle brackets but with a forward slash (
/) before the tag name.
Example of Paired Tags:
<p>This is a paragraph.</p>
Opening Tag: <p>
Closing Tag: </p>
The content (in this case, "This is a paragraph.") is placed between the opening and closing <p> tags. Paired tags are used for most content elements like paragraphs, headings, links, and lists.
<p>This is a paragraph.</p>
Opening Tag:
<p>Closing Tag:
</p>
The content (in this case, "This is a paragraph.") is placed between the opening and closing <p> tags. Paired tags are used for most content elements like paragraphs, headings, links, and lists.
2. Self-Closing Tags (Void Tags)
Self-closing tags do not have a separate closing tag. They are written as a single tag that ends with a slash (/) before the closing angle bracket (>). These tags are typically used for elements that do not require content between an opening and closing tag.
Self-closing tags do not have a separate closing tag. They are written as a single tag that ends with a slash (/) before the closing angle bracket (>). These tags are typically used for elements that do not require content between an opening and closing tag.
Example of Self-Closing Tags:
<img src="image.jpg" alt="A sample image">
<br>
<hr>
<img>: The image tag is self-closing and does not require a closing tag.
<br>: The break tag inserts a line break and is self-closing.
<hr>: The horizontal rule tag creates a horizontal line and is self-closing.
In HTML, tags are used to define elements that structure and format content on a webpage. These tags can be categorized into various types based on their functionality. Below are the main types of HTML tags and examples of how to use them:
<img src="image.jpg" alt="A sample image">
<br>
<hr>
<img>: The image tag is self-closing and does not require a closing tag.<br>: The break tag inserts a line break and is self-closing.<hr>: The horizontal rule tag creates a horizontal line and is self-closing.
In HTML, tags are used to define elements that structure and format content on a webpage. These tags can be categorized into various types based on their functionality. Below are the main types of HTML tags and examples of how to use them:
1. Structural Tags
These tags define the basic structure and organization of the webpage.
<html>: The root element that wraps the entire HTML document.
<html>
<!-- Content goes here -->
</html>
<head>: Contains meta-information about the document, such as the title, character encoding, links to CSS files, and more.
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
</head>
<body>: Contains the main content of the webpage (what is displayed on the page).
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph of text.</p>
</body>
These tags define the basic structure and organization of the webpage.
<html>: The root element that wraps the entire HTML document.<html> <!-- Content goes here --> </html><head>: Contains meta-information about the document, such as the title, character encoding, links to CSS files, and more.<head> <meta charset="UTF-8"> <title>My Webpage</title> </head><body>: Contains the main content of the webpage (what is displayed on the page).<body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text.</p> </body>
2. Text Formatting Tags
These tags help in formatting text on a webpage.
<h1> to <h6>: Heading tags that define headings of various levels.
<h1>This is a main heading (h1)</h1>
<h2>This is a secondary heading (h2)</h2>
<p>: Defines a paragraph of text.
<p>This is a paragraph of text.</p>
<b>: Bold text.
<b>This text is bold.</b>
<i>: Italicized text.
<i>This text is italic.</i>
<u>: Underlined text.
<u>This text is underlined.</u>
<strong>: Defines important text (typically displayed in bold).
<strong>This is important text.</strong>
<em>: Emphasizes text (typically displayed in italics).
<em>This text is emphasized.</em>
These tags help in formatting text on a webpage.
<h1>to<h6>: Heading tags that define headings of various levels.<h1>This is a main heading (h1)</h1> <h2>This is a secondary heading (h2)</h2><p>: Defines a paragraph of text.<p>This is a paragraph of text.</p><b>: Bold text.<b>This text is bold.</b><i>: Italicized text.<i>This text is italic.</i><u>: Underlined text.<u>This text is underlined.</u><strong>: Defines important text (typically displayed in bold).<strong>This is important text.</strong><em>: Emphasizes text (typically displayed in italics).<em>This text is emphasized.</em>
3. Link Tags
These tags are used to define hyperlinks.
<a>: Anchor tag, used to create hyperlinks.
<a href="https://www.example.com">Click here to visit Example</a>
href attribute specifies the URL to link to.
These tags are used to define hyperlinks.
<a>: Anchor tag, used to create hyperlinks.<a href="https://www.example.com">Click here to visit Example</a>hrefattribute specifies the URL to link to.
4. Image Tags
These tags allow you to embed images on the webpage.
<img>: Defines an image. This is a self-closing tag (it does not have a closing tag).
<img src="image.jpg" alt="Description of image">
src specifies the image file's location.
alt provides a text description of the image for accessibility.
These tags allow you to embed images on the webpage.
<img>: Defines an image. This is a self-closing tag (it does not have a closing tag).<img src="image.jpg" alt="Description of image">srcspecifies the image file's location.altprovides a text description of the image for accessibility.
5. List Tags
These tags are used for creating lists.
<ul>: Defines an unordered (bulleted) list.
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>: Defines an ordered (numbered) list.
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
<li>: Defines a list item. It is used inside both <ul> and <ol>.
<li>Item 1</li>
These tags are used for creating lists.
<ul>: Defines an unordered (bulleted) list.<ul> <li>Item 1</li> <li>Item 2</li> </ul><ol>: Defines an ordered (numbered) list.<ol> <li>First Item</li> <li>Second Item</li> </ol><li>: Defines a list item. It is used inside both<ul>and<ol>.<li>Item 1</li>
6. Table Tags
These tags are used for creating tables.
<table>: Defines a table.
<table>
<!-- Table rows go here -->
</table>
<tr>: Defines a table row (used inside <table>).
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<td>: Defines a table cell (used inside <tr>).
<td>Content in a cell</td>
<th>: Defines a table header cell (typically bold and centered).
<th>Header Cell</th>
These tags are used for creating tables.
<table>: Defines a table.<table> <!-- Table rows go here --> </table><tr>: Defines a table row (used inside<table>).<tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr><td>: Defines a table cell (used inside<tr>).<td>Content in a cell</td><th>: Defines a table header cell (typically bold and centered).<th>Header Cell</th>
7. Form Tags
These tags are used to create interactive forms for user input.
<form>: Defines a form element.
<form action="/submit_form" method="POST">
<!-- Form inputs go here -->
</form>
<input>: Defines an input field (like a text box, radio button, checkbox, etc.). It is a self-closing tag.
<input type="text" name="username" placeholder="Enter your username">
<textarea>: Defines a multi-line text area for user input.
<textarea name="message" rows="4" cols="50"></textarea>
<button>: Defines a clickable button.
<button type="submit">Submit</button>
These tags are used to create interactive forms for user input.
<form>: Defines a form element.<form action="/submit_form" method="POST"> <!-- Form inputs go here --> </form><input>: Defines an input field (like a text box, radio button, checkbox, etc.). It is a self-closing tag.<input type="text" name="username" placeholder="Enter your username"><textarea>: Defines a multi-line text area for user input.<textarea name="message" rows="4" cols="50"></textarea><button>: Defines a clickable button.<button type="submit">Submit</button>
8. Media Tags
These tags are used for embedding multimedia content like audio and video.
<audio>: Defines audio content.
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<video>: Defines a video element.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
These tags are used for embedding multimedia content like audio and video.
<audio>: Defines audio content.<audio controls> <source src="audio.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio><video>: Defines a video element.<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video element. </video>
9. Div and Span Tags
These tags are used to group or style content.
<div>: Defines a division or section in the document. It is a block-level element.
<div>
<h2>Section Title</h2>
<p>Some content inside this section.</p>
</div>
<span>: Defines a section of text or content inline. It is an inline element.
<span style="color: blue;">This text is blue.</span>
These tags are used to group or style content.
<div>: Defines a division or section in the document. It is a block-level element.<div> <h2>Section Title</h2> <p>Some content inside this section.</p> </div><span>: Defines a section of text or content inline. It is an inline element.<span style="color: blue;">This text is blue.</span>
10. Meta Tags
Meta tags provide metadata about the HTML document (like description, keywords, and author).
<meta>: Specifies metadata for the document, such as the character encoding or author.
<meta charset="UTF-8">
<meta name="author" content="John Doe">
Meta tags provide metadata about the HTML document (like description, keywords, and author).
<meta>: Specifies metadata for the document, such as the character encoding or author.<meta charset="UTF-8"> <meta name="author" content="John Doe">
11. Semantic Tags
These tags give meaning to the structure of the webpage.
<header>: Defines the header section of the webpage.
<header>
<h1>Welcome to My Website</h1>
</header>
<footer>: Defines the footer section of the webpage.
<footer>
<p>© 2025 My Website</p>
</footer>
<section>: Defines a section in the document.
<section>
<h2>Introduction</h2>
<p>This is an introduction section.</p>
</section>
<article>: Defines independent content that could be distributed or reused separately.
<article>
<h2>News Article</h2>
<p>This is an article.</p>
</article>
These tags give meaning to the structure of the webpage.
<header>: Defines the header section of the webpage.<header> <h1>Welcome to My Website</h1> </header><footer>: Defines the footer section of the webpage.<footer> <p>© 2025 My Website</p> </footer><section>: Defines a section in the document.<section> <h2>Introduction</h2> <p>This is an introduction section.</p> </section><article>: Defines independent content that could be distributed or reused separately.<article> <h2>News Article</h2> <p>This is an article.</p> </article>
HTML5:
HTML5 is the latest version of HTML, which introduced new elements and APIs that improve web development. Some of the key features of HTML5 include:
New semantic tags like <article>, <section>, <header>, <footer>, <nav>, and <aside> for better content structure.
Support for embedding video and audio using <video> and <audio> tags.
Improved form controls like <input type="date">, <input type="range">, and <input type="email">.
Local storage capabilities for storing data on the client-side.
Canvas element for drawing graphics via JavaScript.
HTML5 is the latest version of HTML, which introduced new elements and APIs that improve web development. Some of the key features of HTML5 include:
New semantic tags like
<article>,<section>,<header>,<footer>,<nav>, and<aside>for better content structure.Support for embedding video and audio using
<video>and<audio>tags.Improved form controls like
<input type="date">,<input type="range">, and<input type="email">.Local storage capabilities for storing data on the client-side.
Canvas element for drawing graphics via JavaScript.