Scribd
Upload
4 views

HTML5_Tags_with_Examples

Uploaded by

Muthamil0593
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
4 views

HTML5_Tags_with_Examples

Uploaded by

Muthamil0593
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!DOCTYPE html>: Declares the document type as HTML5.

Example:
<!DOCTYPE html>

<html>: Root element that contains all HTML content.


Example:
<html>
<head></head>
<body></body>
</html>

<head>: Container for metadata, such as title, links, and scripts.


Example:
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>

<body>: Defines the main content area of the HTML document.


Example:
<body>
<h1>Welcome to My Website</h1>
</body>

<h1> to <h6>: Headings, with <h1> being the largest and <h6> the smallest.
Example:
<h1>Main Heading</h1>
<h2>Subheading</h2>

<p>: Paragraph tag.


Example:
<p>This is a paragraph.</p>

<br>: Line break.


Example:
<p>First line<br>Second line</p>

<hr>: Horizontal rule, often used to separate content.


Example:
<p>Content above</p>
<hr>
<p>Content below</p>

<header>: Represents introductory content or a group of navigational links.


Example:
<header>
<h1>Welcome</h1>
<nav>
<a href="#">Home</a> | <a href="#">About</a>
</nav>
</header>

<footer>: Defines footer content, often including copyright or related information.


Example:
<footer>
<p>&copy; 2025 My Website</p>
</footer>
<main>: Represents the main content of the document.
Example:
<main>
<h2>Main Content Area</h2>
<p>This is the primary section of the page.</p>
</main>

<article>: Self-contained content like blog posts or articles.


Example:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>

<section>: Defines thematic groups of content.


Example:
<section>
<h2>About Us</h2>
<p>Information about the organization.</p>
</section>

<nav>: Contains navigation links.


Example:
<nav>
<a href="home.html">Home</a> | <a href="contact.html">Contact</a>
</nav>

<aside>: Represents additional or side content.


Example:
<aside>
<h4>Related Links</h4>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>

<div>: Generic container for grouping and styling content.


Example:
<div class="container">
<p>This is a styled container.</p>
</div>

<a>: Anchor tag, used for hyperlinks.


Example:
<a href="https://example.com">Visit Example</a>

<img>: Embeds images in the document.


Example:
<img src="image.jpg" alt="Description of the image">

<video>: Embeds video files with controls.


Example:
<video controls>
<source src="video.mp4" type="video/mp4">
</video>

<audio>: Embeds audio files with controls.


Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>

<ul>: Unordered list.


Example:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

<ol>: Ordered list.


Example:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>

<form>: Creates an HTML form for user input.


Example:
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested List Example</title>

</head>
<body>
<ol>
<li>Sem 1
<ul>
<li>Maths</li>
<li>Physics</li>
<li>Labs:
<ul>
<li>CHY Lab</li>
<li>PHY Lab</li>
</ul>
</li>
</ul>
</li>

<li>Sem 2
<ul>
<li>C Programming</li>
<li>Electronics</li>
<li>Labs:
<ul>
<li>CP Lab</li>
<li>ELC Lab</li>
</ul>
</li>
</ul>
</li>

<li>Sem 3
<ul>
<li>Data Structures</li>
<li>Database Systems</li>
<li>Labs:
<ul>
<li>DS Lab</li>
<li>DBS Lab</li>
</ul>
</li>
</ul>
</li>

<li>Sem 4
<ul>
<li>Algorithms</li>
<li>Operating Systems</li>
<li>Labs:
<ul>
<li>ALGO Lab</li>
<li>OS Lab</li>
</ul>
</li>
</ul>
</li>
</ol>
</body>
</html>

You might also like