HTML Semantik

Artikel ini menjelaskan HTML semantik.

Bandingkan HTML4 dengan HTML5 dan terangkan tag semantik yang digunakan dalam HTML5.

YouTube Video

Tag Semantik HTML5

Tag semantik, seperti tag <header> dan <main>, adalah tag yang membawa makna, diperkenalkan dalam HTML5. Sebelum itu, dalam HTML4, tag <div> digunakan terutamanya.

Di bawah adalah contoh HTML5 yang dibuat menggunakan tag semantik.

 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>&copy; 2024 My Website</p>
32    </footer>
33</body>
34</html>

Di bawah adalah contoh HTML4 yang dibuat menggunakan tag <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>&copy; 2024 My Website</p>
31    </div>
32</body>
33</html>

Contoh posting blog yang ditulis menggunakan tag semantik.

Terdapat juga tag semantik lain seperti <article> dan <section>. Sebagai contoh, kita akan menulis blog menggunakan tag semantik.

 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>&copy; 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>: Tag <header> digunakan untuk tajuk keseluruhan halaman serta untuk tajuk setiap artikel. Ia termasuk tajuk laman web, tajuk artikel, tarikh penerbitan, dan maklumat pengarang.

  • <nav>: Tag <nav> mewakili menu navigasi laman, termasuk pautan seperti Home, About, dan Contact.

  • <main>: Tag <main> mewakili kandungan utama halaman, termasuk artikel blog dan kandungan berkaitan.

  • <article>: Tag <article> ialah tag semantik yang membungkus artikel blog itu sendiri, menunjukkan bahawa artikel adalah kandungan bebas.

  • <section>: Tag <section> mewakili setiap bahagian dalam artikel.

  • <aside>: Tag <aside> mewakili maklumat tambahan berkaitan kandungan utama, seperti 'Artikel Berkaitan'.

  • <footer>: Tag <footer> digunakan untuk bahagian bawah keseluruhan halaman dan untuk memaparkan tag untuk artikel.

Menggunakan tag semantik seperti ini menjadikan struktur dokumen lebih jelas. Sebagai contoh, tag <body> terdiri daripada tag <header>, <nav>, <main>, dan <footer>. Selain itu, tag <main> terdiri daripada tag <article> dan <aside>.

Dalam contoh ini, tag <article> juga terdiri daripada tag semantik.

Contoh Mengaplikasikan CSS

Sekarang, mari kita gunakan CSS pada HTML artikel blog. CSS akan diterangkan dalam video yang berasingan.

  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}

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video