{"id":7239,"date":"2026-01-29T04:48:16","date_gmt":"2026-01-29T04:48:16","guid":{"rendered":"https:\/\/wimzcomputer.com\/?p=7239"},"modified":"2026-01-29T04:48:18","modified_gmt":"2026-01-29T04:48:18","slug":"mengenal-html5-semantic","status":"publish","type":"post","link":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/","title":{"rendered":"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional"},"content":{"rendered":"\n<p>Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.<\/p>\n\n\n\n<p>Masalahnya, banyak pemula (termasuk saya dulu) membuat semuanya pakai <code>&lt;div&gt;<\/code>.<\/p>\n\n\n\n<p>Hasilnya memang jalan\u2026 tapi begitu file HTML-nya sudah panjang, kita mulai bingung sendiri:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>bagian header yang mana?<\/li>\n\n\n\n<li>menu navigasi ditaruh di mana?<\/li>\n\n\n\n<li>konten utama yang benar itu apa?<\/li>\n<\/ul>\n\n\n\n<p>Nah, HTML5 sebenarnya sudah menyediakan solusi: <strong>Semantic Elements<\/strong>.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Semantic HTML<\/strong> ini penting bukan karena \u201cbiar keren\u201d, tapi karena memang membuat struktur halaman lebih rapi, lebih enak dibaca, dan lebih bagus untuk SEO.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Sebelum lanjut, pastikan sudah paham materi HTML dasar dulu<\/h2>\n\n\n\n<p>Kalau Anda masih baru belajar HTML, sebaiknya baca dulu materi-materi dasar berikut:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tutorial HTML: Membuat Paragraf<\/strong><\/li>\n\n\n\n<li><strong>Tutorial HTML: Membuat Hyperlink<\/strong><\/li>\n\n\n\n<li><strong>Tutorial HTML: Menampilkan Gambar<\/strong><\/li>\n\n\n\n<li><strong>Tutorial HTML: Membuat Tabel<\/strong><\/li>\n\n\n\n<li><strong>Tutorial HTML: Membuat Form<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Semua tutorial itu bisa Anda pelajari <a href=\"https:\/\/wimzcomputer.com\/index.php\/category\/html\/\">di sini.<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Semantic Elements?<\/h2>\n\n\n\n<p><strong>Semantic element<\/strong> adalah elemen HTML yang memiliki arti sesuai fungsinya, dengan tujuan untuk menyampaikan fungsi-fungsi elemen tersebut kepada pengembang, browser dan algoritma mesin pencari. <\/p>\n\n\n\n<p>Contoh:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;header&gt;<\/code> \u2192 bagian atas halaman (judul\/logo)<\/li>\n\n\n\n<li><code>&lt;nav&gt;<\/code> \u2192 navigasi\/menu<\/li>\n\n\n\n<li><code>&lt;main&gt;<\/code> \u2192 konten utama<\/li>\n\n\n\n<li><code>&lt;article&gt;<\/code> \u2192 artikel yang berdiri sendiri<\/li>\n\n\n\n<li><code>&lt;footer&gt;<\/code> \u2192 bagian bawah halaman<\/li>\n<\/ul>\n\n\n\n<p>Kalau Anda bandingkan dengan <code>&lt;div&gt;<\/code>, semantic element ini lebih \u201cjelas\u201d.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Kenapa Semantic HTML itu penting?<\/h2>\n\n\n\n<p>Banyak yang bertanya: \u201cKalau pakai <code>&lt;div&gt;<\/code> semua juga bisa, kenapa harus pakai semantic?\u201d<\/p>\n\n\n\n<p>Jawabannya ada 3:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1) Struktur HTML lebih rapi<\/h3>\n\n\n\n<p>Saat membuka ulang file HTML beberapa hari kemudian, Anda langsung paham struktur halamannya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2) Lebih bagus untuk SEO<\/h3>\n\n\n\n<p>Mesin pencari seperti Google lebih mudah memahami konten utama, artikel, navigasi, dll.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3) Lebih ramah aksesibilitas<\/h3>\n\n\n\n<p>Beberapa alat bantu seperti screen reader bisa membaca struktur halaman lebih jelas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Semantic Elements yang sering dipakai<\/h2>\n\n\n\n<p>Kita bahas yang paling sering dipakai dulu, yang benar-benar kepakai saat membuat website.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">1) <code>&lt;header&gt;<\/code><\/h3>\n\n\n\n<p>Biasanya berisi logo, judul website, atau judul halaman.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header&gt;\n  &lt;h1&gt;Wimz Computer&lt;\/h1&gt;\n  &lt;p&gt;Tutorial IT dan Pemrograman&lt;\/p&gt;\n&lt;\/header&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">2) <code>&lt;nav&gt;<\/code><\/h3>\n\n\n\n<p>Untuk menu navigasi.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;nav&gt;\n  &lt;a href=\"#\"&gt;Home&lt;\/a&gt; |\n  &lt;a href=\"#\"&gt;HTML&lt;\/a&gt; |\n  &lt;a href=\"#\"&gt;CSS&lt;\/a&gt; |\n  &lt;a href=\"#\"&gt;Python&lt;\/a&gt;\n&lt;\/nav&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3) <code>&lt;main&gt;<\/code><\/h3>\n\n\n\n<p>Menandai konten utama. Umumnya hanya 1 dalam 1 halaman.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;main&gt;\n  &lt;h2&gt;Konten Utama&lt;\/h2&gt;\n  &lt;p&gt;Ini adalah bagian utama halaman.&lt;\/p&gt;\n&lt;\/main&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4) <code>&lt;section&gt;<\/code><\/h3>\n\n\n\n<p>Digunakan untuk membagi konten berdasarkan bagian.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;section&gt;\n  &lt;h2&gt;Tutorial Terbaru&lt;\/h2&gt;\n  &lt;p&gt;Daftar tutorial terbaru akan tampil di sini.&lt;\/p&gt;\n&lt;\/section&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">5) <code>&lt;article&gt;<\/code><\/h3>\n\n\n\n<p>Untuk konten yang berdiri sendiri (artikel blog).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;article&gt;\n  &lt;h3&gt;Mengenal Semantic HTML&lt;\/h3&gt;\n  &lt;p&gt;Semantic HTML membuat struktur halaman lebih rapi.&lt;\/p&gt;\n&lt;\/article&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">6) <code>&lt;aside&gt;<\/code><\/h3>\n\n\n\n<p>Untuk sidebar\/konten sampingan.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;aside&gt;\n  &lt;h3&gt;Artikel Populer&lt;\/h3&gt;\n  &lt;ul&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Belajar HTML Dasar&lt;\/a&gt;&lt;\/li&gt;\n    &lt;li&gt;&lt;a href=\"#\"&gt;Membuat Tabel HTML&lt;\/a&gt;&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/aside&gt;\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">7) <code>&lt;footer&gt;<\/code><\/h3>\n\n\n\n<p>Bagian bawah halaman.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;footer>\n  &lt;p>&amp;copy; 2026 WimzComputer.com&lt;\/p>\n&lt;\/footer><\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Sekarang kita gabungkan semuanya.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"id\"&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n  &lt;title&gt;Belajar Semantic HTML&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n  &lt;header&gt;\n    &lt;h1&gt;Wimz Computer&lt;\/h1&gt;\n    &lt;p&gt;Tutorial IT dan Pemrograman&lt;\/p&gt;\n  &lt;\/header&gt;\n\n  &lt;nav&gt;\n    &lt;a href=\"#\"&gt;Home&lt;\/a&gt; |\n    &lt;a href=\"#\"&gt;Tutorial&lt;\/a&gt; |\n    &lt;a href=\"#\"&gt;Artikel&lt;\/a&gt; |\n    &lt;a href=\"#\"&gt;Kontak&lt;\/a&gt;\n  &lt;\/nav&gt;\n\n  &lt;main&gt;\n\n    &lt;section&gt;\n      &lt;h2&gt;Artikel Terbaru&lt;\/h2&gt;\n\n      &lt;article&gt;\n        &lt;h3&gt;Mengenal HTML5 Semantic Elements&lt;\/h3&gt;\n        &lt;p&gt;Semantic elements membuat struktur halaman lebih rapi dan SEO friendly.&lt;\/p&gt;\n      &lt;\/article&gt;\n\n      &lt;article&gt;\n        &lt;h3&gt;Tutorial HTML Form&lt;\/h3&gt;\n        &lt;p&gt;Belajar membuat form input sederhana di HTML.&lt;\/p&gt;\n      &lt;\/article&gt;\n\n    &lt;\/section&gt;\n\n    &lt;aside&gt;\n      &lt;h3&gt;Artikel Populer&lt;\/h3&gt;\n      &lt;ul&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Belajar HTML Dasar&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Cara Membuat Tabel&lt;\/a&gt;&lt;\/li&gt;\n        &lt;li&gt;&lt;a href=\"#\"&gt;Cara Menampilkan Gambar&lt;\/a&gt;&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/aside&gt;\n\n  &lt;\/main&gt;\n\n  &lt;footer&gt;\n    &lt;p&gt;&amp;copy; 2026 WimzComputer.com&lt;\/p&gt;\n  &lt;\/footer&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"733\" height=\"600\" src=\"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2026\/01\/semantichtml.png?resize=733%2C600&#038;ssl=1\" alt=\"\" class=\"wp-image-7243\" srcset=\"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2026\/01\/semantichtml.png?w=733&amp;ssl=1 733w, https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2026\/01\/semantichtml.png?resize=300%2C246&amp;ssl=1 300w\" sizes=\"auto, (max-width: 733px) 100vw, 733px\" \/><\/figure>\n<\/div>\n\n\n<p>Sudah mulai paham??<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Semantic vs Div (Biar Tidak Salah Paham)<\/h2>\n\n\n\n<p>Kalau dulu kita sering membuat seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"header\"&gt;...&lt;\/div&gt;\n&lt;div class=\"nav\"&gt;...&lt;\/div&gt;\n&lt;div class=\"content\"&gt;...&lt;\/div&gt;\n&lt;div class=\"footer\"&gt;...&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p>Sebenarnya boleh saja. Tapi dengan semantic HTML akan jadi seperti ini:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;header&gt;...&lt;\/header&gt;\n&lt;nav&gt;...&lt;\/nav&gt;\n&lt;main&gt;...&lt;\/main&gt;\n&lt;footer&gt;...&lt;\/footer&gt;\n<\/code><\/pre>\n\n\n\n<p>Lebih jelas dan lebih standar.<\/p>\n\n\n\n<p>HTML semantic ini kelihatannya sederhana, tapi efeknya besar. Kalau dari awal Anda sudah terbiasa membuat struktur yang rapi, maka saat masuk ke CSS, layouting, bahkan framework, proses belajar akan jauh lebih mudah.<\/p>\n\n\n\n<p>Kunjungi terus website kami\u00a0<a href=\"https:\/\/wimzcomputer.com\">di sini<\/a> untuk artikel kami yang lain<a href=\"https:\/\/wimzcomputer.com\">.<\/a> Semoga bermanfaat. \ud83d\ude42<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer. Masalahnya, banyak pemula (termasuk saya dulu)&hellip;<\/p>\n","protected":false},"author":1,"featured_media":4456,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11,17],"tags":[],"class_list":["post-7239","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional - Wimz Computer<\/title>\n<meta name=\"description\" content=\"Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional - Wimz Computer\" \/>\n<meta property=\"og:description\" content=\"Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/\" \/>\n<meta property=\"og:site_name\" content=\"Wimz Computer\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-29T04:48:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-29T04:48:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1920\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"wimzcomputer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"wimzcomputer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/\"},\"author\":{\"name\":\"wimzcomputer\",\"@id\":\"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d\"},\"headline\":\"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional\",\"datePublished\":\"2026-01-29T04:48:16+00:00\",\"dateModified\":\"2026-01-29T04:48:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/\"},\"wordCount\":412,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d\"},\"image\":{\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1\",\"articleSection\":[\"HTML\",\"Web\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/\",\"url\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/\",\"name\":\"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional - Wimz Computer\",\"isPartOf\":{\"@id\":\"https:\/\/wimzcomputer.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1\",\"datePublished\":\"2026-01-29T04:48:16+00:00\",\"dateModified\":\"2026-01-29T04:48:18+00:00\",\"description\":\"Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.\",\"breadcrumb\":{\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage\",\"url\":\"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1\",\"contentUrl\":\"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1\",\"width\":1920,\"height\":1920},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wimzcomputer.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wimzcomputer.com\/#website\",\"url\":\"https:\/\/wimzcomputer.com\/\",\"name\":\"Wimz Computer\",\"description\":\"Cara Mudah Belajar IT\",\"publisher\":{\"@id\":\"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wimzcomputer.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d\",\"name\":\"wimzcomputer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wimzcomputer.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f6eb392dfd2278025115832e887f01fa7b6d2e8adc85adba9cd72abce01b9951?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f6eb392dfd2278025115832e887f01fa7b6d2e8adc85adba9cd72abce01b9951?s=96&d=mm&r=g\",\"caption\":\"wimzcomputer\"},\"logo\":{\"@id\":\"https:\/\/wimzcomputer.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/157.245.148.154\"],\"url\":\"https:\/\/wimzcomputer.com\/index.php\/author\/wimzcomputer\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional - Wimz Computer","description":"Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/","og_locale":"en_US","og_type":"article","og_title":"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional - Wimz Computer","og_description":"Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.","og_url":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/","og_site_name":"Wimz Computer","article_published_time":"2026-01-29T04:48:16+00:00","article_modified_time":"2026-01-29T04:48:18+00:00","og_image":[{"width":1920,"height":1920,"url":"https:\/\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png","type":"image\/png"}],"author":"wimzcomputer","twitter_card":"summary_large_image","twitter_misc":{"Written by":"wimzcomputer","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#article","isPartOf":{"@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/"},"author":{"name":"wimzcomputer","@id":"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d"},"headline":"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional","datePublished":"2026-01-29T04:48:16+00:00","dateModified":"2026-01-29T04:48:18+00:00","mainEntityOfPage":{"@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/"},"wordCount":412,"commentCount":0,"publisher":{"@id":"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d"},"image":{"@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1","articleSection":["HTML","Web"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/","url":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/","name":"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional - Wimz Computer","isPartOf":{"@id":"https:\/\/wimzcomputer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage"},"image":{"@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1","datePublished":"2026-01-29T04:48:16+00:00","dateModified":"2026-01-29T04:48:18+00:00","description":"Kalau Anda sudah belajar HTML dasar, biasanya tahap berikutnya adalah mulai membuat halaman yang lebih lengkap: ada header, menu, isi artikel, sidebar, dan footer.","breadcrumb":{"@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#primaryimage","url":"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1","contentUrl":"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1","width":1920,"height":1920},{"@type":"BreadcrumbList","@id":"https:\/\/wimzcomputer.com\/index.php\/2026\/01\/29\/mengenal-html5-semantic\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wimzcomputer.com\/"},{"@type":"ListItem","position":2,"name":"Mengenal HTML5 Semantic Elements: Biar Struktur Website Lebih Rapi dan Profesional"}]},{"@type":"WebSite","@id":"https:\/\/wimzcomputer.com\/#website","url":"https:\/\/wimzcomputer.com\/","name":"Wimz Computer","description":"Cara Mudah Belajar IT","publisher":{"@id":"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wimzcomputer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/wimzcomputer.com\/#\/schema\/person\/d2ab64611522c1de665275f16822f92d","name":"wimzcomputer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wimzcomputer.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f6eb392dfd2278025115832e887f01fa7b6d2e8adc85adba9cd72abce01b9951?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f6eb392dfd2278025115832e887f01fa7b6d2e8adc85adba9cd72abce01b9951?s=96&d=mm&r=g","caption":"wimzcomputer"},"logo":{"@id":"https:\/\/wimzcomputer.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/157.245.148.154"],"url":"https:\/\/wimzcomputer.com\/index.php\/author\/wimzcomputer\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/wimzcomputer.com\/wp-content\/uploads\/2025\/02\/logo-g6e86769cd_1920.png?fit=1920%2C1920&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/posts\/7239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/comments?post=7239"}],"version-history":[{"count":4,"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/posts\/7239\/revisions"}],"predecessor-version":[{"id":7245,"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/posts\/7239\/revisions\/7245"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/media\/4456"}],"wp:attachment":[{"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/media?parent=7239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/categories?post=7239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wimzcomputer.com\/index.php\/wp-json\/wp\/v2\/tags?post=7239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}