HTML الدلالية
تشرح هذه المقالة HTML الدلالي.۔
قارن بين HTML4 و HTML5 ووضح العلامات الدلالية المستخدمة في HTML5.۔
YouTube Video
وسوم HTML5 الدلالية
العلامات الدلالية، مثل علامة <header> وعلامة <main>، هي علامات تحمل معنى، تم تقديمها في HTML5۔ قبل ذلك، في HTML4، كانت علامة <div> تُستخدم بشكل أساسي۔
فيما يلي مثال على HTML5 تم إنشاؤه باستخدام العلامات الدلالية.۔
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML5 Example</title>
7</head>
8<body>
9 <!-- Header -->
10 <header>
11 <h1>Welcome to My Website</h1>
12 </header>
13
14 <!-- Navigation menu -->
15 <nav>
16 <ul>
17 <li><a href="#">Home</a></li>
18 <li><a href="#">About</a></li>
19 <li><a href="#">Contact</a></li>
20 </ul>
21 </nav>
22
23 <!-- Main content -->
24 <main>
25 <h2>About Us</h2>
26 <p>This is a simple website created using HTML5 tags.</p>
27 </main>
28
29 <!-- Footer -->
30 <footer>
31 <p>© 2024 My Website</p>
32 </footer>
33</body>
34</html>فيما يلي مثال على HTML4 تم إنشاؤه باستخدام وسوم <div>.۔
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html lang="en">
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>HTML4 Example</title>
6</head>
7<body>
8 <!-- Header -->
9 <div id="header">
10 <h1>Welcome to My Website</h1>
11 </div>
12
13 <!-- Navigation menu -->
14 <div id="nav">
15 <ul>
16 <li><a href="#">Home</a></li>
17 <li><a href="#">About</a></li>
18 <li><a href="#">Contact</a></li>
19 </ul>
20 </div>
21
22 <!-- Main content -->
23 <div id="main">
24 <h2>About Us</h2>
25 <p>This is a simple website created using HTML4 structure.</p>
26 </div>
27
28 <!-- Footer -->
29 <div id="footer">
30 <p>© 2024 My Website</p>
31 </div>
32</body>
33</html>مثال على منشور مدونة مكتوب باستخدام الوسوم الدلالية.
هناك أيضًا علامات دلالية أخرى مثل <article> و <section>۔
كمثال، سنكتب تدوينة باستخدام العلامات الدلالية۔
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>My Blog</title>
7 <link rel="stylesheet" href="theme-blog.css">
8</head>
9<body>
10 <!-- Website Header -->
11 <header>
12 <h1>My Blog</h1>
13 <p>Sharing knowledge and ideas</p>
14 </header>
15
16 <!-- Navigation Menu -->
17 <nav>
18 <ul>
19 <li><a href="index.html">Home</a></li>
20 <li><a href="about.html">About</a></li>
21 <li><a href="contact.html">Contact</a></li>
22 </ul>
23 </nav>
24
25 <!-- Main Content -->
26 <main>
27 <!-- Blog Article -->
28 <article>
29 <header>
30 <h2>Understanding Semantic HTML</h2>
31 <p>Posted on <time datetime="2024-09-08">September 8, 2024</time> by <a href="author.html">John Doe</a></p>
32 </header>
33
34 <section>
35 <h3>What is Semantic HTML?</h3>
36 <p>Semantic HTML refers to the use of HTML5 elements that clearly describe their meaning in a human- and machine-readable way.</p>
37 </section>
38
39 <section>
40 <h3>Why is Semantic HTML Important?</h3>
41 <p>Using semantic tags helps improve accessibility, search engine optimization (SEO), and the overall structure of the web page. It allows search engines to better understand the content, and assistive technologies to accurately convey information to users.</p>
42 </section>
43
44 <footer>
45 <p>Tags: <a href="#">HTML</a>, <a href="#">Web Development</a>, <a href="#">Accessibility</a></p>
46 </footer>
47 </article>
48
49 <!-- Related Articles (Sidebar) -->
50 <aside>
51 <h3>Related Articles</h3>
52 <ul>
53 <li><a href="#">The Benefits of Using Semantic HTML</a></li>
54 <li><a href="#">Improving SEO with Semantic Markup</a></li>
55 <li><a href="#">Accessible Web Design: Best Practices</a></li>
56 </ul>
57 </aside>
58 </main>
59
60 <!-- Website Footer -->
61 <footer>
62 <p>© 2024 My Blog. All rights reserved.</p>
63 <p><a href="privacy.html">Privacy Policy</a> | <a href="terms.html">Terms of Service</a></p>
64 </footer>
65</body>
66</html>-
<header>: يتم استخدام علامة<header>لرأس الصفحة بشكل عام وكذلك لرأس كل مقال۔ يشمل العنوان الخاص بالموقع، عنوان المقال، تاريخ النشر، ومعلومات المؤلف۔ -
<nav>: تمثل علامة<nav>قائمة التنقل في الموقع، وتحتوي على روابط مثل الصفحة الرئيسية، من نحن، واتصل بنا۔ -
<main>: تمثل علامة<main>المحتوى الرئيسي للصفحة، بما في ذلك مقالات المدونة والمحتوى المرتبط۔ -
<article>: علامة<article>هي علامة دلالية تقوم بتغليف المقالة نفسها، مما يشير إلى أن المقال هو محتوى مستقل۔ -
<section>: علامة<section>تمثل كل قسم داخل المقالة۔ -
<aside>: علامة<aside>تمثل المعلومات المكملة للمحتوى الرئيسي، مثل 'مقالات ذات صلة'۔ -
<footer>: يتم استخدام علامة<footer>للعناصر في أسفل الصفحة بشكل عام ولعرض العلامات الخاصة بالمقال۔
استخدام العلامات الدلالية بهذه الطريقة يجعل هيكل الوثيقة أوضح۔ على سبيل المثال، يتألف وسم <body> من الوسوم <header>, <nav>, <main>, و <footer>۔ بالإضافة إلى ذلك، يتألف وسم <main> من الوسوم <article> و <aside>۔
في هذا المثال، يتألف وسم <article> أيضًا من الوسوم الدلالية۔
مثال على تطبيق CSS
الآن، دعونا نطبق CSS على ملف HTML لمقالة المدونة۔ سيتم شرح CSS في فيديو منفصل.۔
1/* Reset */
2* {
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6}
7
8/* Body styles */
9body {
10 font-family: Arial, sans-serif;
11 line-height: 1.6;
12 background-color: #f4f4f4;
13 color: #333;
14 padding: 20px;
15}
16
17/* Header styles */
18header {
19 text-align: center;
20 padding: 20px;
21 background-color: #333;
22 color: white;
23 margin-bottom: 20px;
24}
25
26header h1 {
27 font-size: 2.5rem;
28}
29
30header p {
31 font-size: 1.2rem;
32 font-style: italic;
33}
34
35/* Navigation menu */
36nav {
37 background-color: #555;
38 padding: 10px;
39}
40
41nav ul {
42 list-style: none;
43 text-align: center;
44}
45
46nav ul li {
47 display: inline-block;
48 margin-right: 15px;
49}
50
51nav ul li a {
52 color: white;
53 text-decoration: none;
54 font-weight: bold;
55}
56
57nav ul li a:hover {
58 color: #f4f4f4;
59 text-decoration: underline;
60}
61
62/* Main content styles */
63main {
64 display: flex;
65 flex-wrap: wrap;
66 justify-content: space-between;
67 align-items: flex-start;
68}
69
70article {
71 flex: 3;
72 background-color: white;
73 padding: 20px;
74 border-radius: 5px;
75 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
76 margin-bottom: 20px;
77}
78
79/* Article header */
80article header h2 {
81 font-size: 2rem;
82 margin-bottom: 10px;
83}
84
85article header p {
86 font-size: 0.9rem;
87 color: #666;
88}
89
90article section h3 {
91 font-size: 1.5rem;
92 margin-top: 20px;
93}
94
95article section p {
96 margin: 10px 0;
97}
98
99/* Article footer */
100article footer {
101 margin-top: 20px;
102 font-size: 0.9rem;
103}
104
105article footer p a {
106 color: #3498db;
107 text-decoration: none;
108}
109
110article footer p a:hover {
111 text-decoration: underline;
112}
113
114/* Sidebar styles */
115aside {
116 flex: 1;
117 background-color: #fff;
118 padding: 20px;
119 margin-left: 20px;
120 border-radius: 5px;
121 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
122}
123
124aside h3 {
125 font-size: 1.5rem;
126 margin-bottom: 10px;
127}
128
129aside ul {
130 list-style: none;
131 padding-left: 0;
132}
133
134aside ul li {
135 margin-bottom: 10px;
136}
137
138aside ul li a {
139 color: #3498db;
140 text-decoration: none;
141}
142
143aside ul li a:hover {
144 text-decoration: underline;
145}
146
147/* Footer styles */
148footer {
149 text-align: center;
150 padding: 20px;
151 background-color: #333;
152 color: white;
153 margin-top: 20px;
154}
155
156footer p {
157 margin: 5px 0;
158}
159
160footer a {
161 color: #3498db;
162 text-decoration: none;
163}
164
165footer a:hover {
166 text-decoration: underline;
167}
168
169/* Responsive design */
170@media (max-width: 768px) {
171 main {
172 flex-direction: column;
173 }
174
175 aside {
176 margin-left: 0;
177 }
178}يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔