-
Notifications
You must be signed in to change notification settings - Fork 0
/
07-Scemantic elements.html
110 lines (99 loc) · 3.42 KB
/
07-Scemantic elements.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Semantic HTML Elements</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
section {
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
}
header, nav, main, article, aside, footer {
border: 1px solid #ddd;
margin: 10px 0;
padding: 10px;
}
figure {
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
text-align: center;
}
</style>
</head>
<body>
<h1>The Importance of Semantic HTML Elements</h1>
<p>
Semantic HTML elements provide meaning to the structure of a web page. They convey information about the content
and improve the overall clarity, accessibility, and SEO of the page. Here are some key semantic elements and their
importance:
</p>
<section>
<h2><header> and <footer> within <section></h2>
<p>
The <code><header></code> and <code><footer></code> elements can be placed within a <code><section></code> to define header and footer content specific to that section.
</p>
<header>
<h3>Section Header</h3>
<p>This is the header content for the section.</p>
</header>
<footer>
<p>This is the footer content for the section.</p>
</footer>
</section>
<nav>
<h2><nav> Element</h2>
<p>
The <code><nav></code> element is used to define a set of navigation links. It helps screen readers and
search engines understand the structure of the navigation menu, improving accessibility.
</p>
</nav>
<aside>
<h2><aside> Element</h2>
<p>
The <code><aside></code> element represents content that is tangentially related to the content around it.
It can be used for sidebars, pull quotes, or any content that is related but not the main focus.
</p>
</aside>
<main>
<h2><main> Element</h2>
<p>
The <code><main></code> element contains the main content of a document. It aids in identifying the primary
content and separating it from headers, footers, and other ancillary content.
</p>
</main>
<article>
<h2><article> Element with <section> Elements</h2>
<p>
The <code><article></code> element represents a self-contained piece of content that can be distributed and
reused independently. Inside the article, you can use <code><section></code> elements to further organize content.
</p>
<article>
<section>
<h3>Section 1</h3>
<p>Content of section 1 inside the article.</p>
</section>
<section>
<h3>Section 2</h3>
<p>Content of section 2 inside the article.</p>
</section>
</article>
</article>
<figure>
<h2><figure> and <figcaption></h2>
<p>
The <code><figure></code> element is used to group and represent content, such as images, diagrams, photos, code snippets, etc.
The <code><figcaption></code> element provides a caption or description for the content inside the <code><figure></code>.
</p>
<img src="example-image.jpg" alt="Example Image">
<figcaption>Figure 1: Example Image</figcaption>
</figure>
<img src="EN-Semantic-Search-Non-Semantic.png" alt="" style="width: 100% ;">
</body>
</html>