Scribd
Upload
33 views4 pages

Semantic Tags

Uploaded by

Ajay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views4 pages

Semantic Tags

Uploaded by

Ajay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Semantic Tags

Semantic tags in HTML, are designed to provide additional meaning and


context to the content they enclose. Here are some of the key semantic
elements introduced in HTML5:
1. <header>
2. <nav>
3. <article>
4. <section>
5. <footer>
6. <figure>
7. <figcaption>
8. <detail>
9. <summary>

1. <header> - The `<header>` tag typically represents the introductory content


of a section or a page, often containing headings, logos, navigation links, or
other elements related to the overall content. It's not restricted to the top of
the page but can be used within other sections as well.

HTML Code Output


<body>
<header>
page 1
</header>
<h1>Welcome to My
Website</h1>
<p>Tagline or
introductory text</p>
</body>

2. <footer>- The `<footer>` tag typically represents the footer of a section or a


page, containing information such as copyright notices, contact details, or
links to related pages.

HTML Code Output


<body>
<footer>
<p>&copy; 2023 My
Website. All rights
reserved.</p>
<p>Contact: info@
example .com</p>
</footer>
</body>

1|Page
3. <article>: The `<article>` tag is used to define a self-contained piece of
content that could be distributed and reused independently, such as a
news article, blog post, or forum post.

HTML Code Output


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

4. <section>- The `<section>` tag defines a thematic grouping of content. It's


a versatile element that can be used to group related content together.

HTML Code Output


<body>
<section>
<h2>Section Title</h2>
<p>Section content
goes here...</p>
</section></body>

5. <nav>- The `<nav>` stands for navigation, and its use indicates that the
content within it is intended for navigation purposes. Typically, it
includes a list of navigation links, buttons, or other navigation-related
elements within the <nav> element.

HTML Code
<head>
<title>Navigation Example</title>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>

2|Page
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<!-- Rest of the page content goes here -->
</body>

Output

HTML code provides a simple structure for a web page with a


navigation menu containing links to different sections of the page

6. <figure> - The <figure> element is used to encapsulate media content


such as images, illustrations, videos, etc.

7. <figcaption>- The <figcaption> element provides a caption for the


content within the <figure>.

HTML Code Output


<body>
<!-- Figure Element -->
<figure>
<img src="abc1.webp"
alt="An example
image"width=100px;
height=100px;>
<figcaption>Caption for the
example image.</figcaption>
</figure>
</body>

This code creates a figure element containing an image (abc1.webp)


with specified dimensions and a caption describing the image.

• <figure>: This is an HTML5 element used to encapsulate a media


object, such as an image, along with its caption or legend.

3|Page
• <img>: This is an HTML element used to embed images in a web
page. It has attributes:
o src: Specifies the URL of the image file.
o alt: Provides alternative text for the image, which is displayed if the
image fails to load or for accessibility purposes.
o width and height: Define the width and height of the image,
respectively. These values are set to 100 pixels each in this example.
• <figcaption>: This is an HTML5 element used to define a caption or
legend for a <figure> element. It provides a description or
explanation of the content within the <figure> element.

8. <details> - The <details> element is used to create a disclosure widget


from which the user can obtain additional information or controls.

9. <summary> -The <summary> element provides a visible heading for


the <details> element.

HTML Code Output


<body>
<!-- Figure Element -->
<figure>
<img src="abc1.webp"
alt="An example
image"width=100px;
height=100px;>
<figcaption>Caption for
the example
image.</figcaption>
</figure>
<hr>
<!-- Details and Summary
Elements -->
<details>
<summary>Click to reveal
more details</summary>
<p>Additional information
or controls go here.</p>
</details>
</body>

4|Page

You might also like