Panduan Lengkap Tag HTML Dasar hingga Lanjutan & Cara Menambahkan CSS untuk Pemula HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua pondasi utama dalam pembuatan dan pemeliharaan halaman web. Bagi Anda pemilik situs web atau pengguna WordPress, memahami struktur dasar HTML serta cara menerapkan CSS sangat berguna untuk melakukan kustomisasi konten, merapikan tata letak, hingga memperbaiki visual postingan. Panduan ini membahas tag HTML secara lengkap—mulai dari tingkat dasar hingga lanjutan—beserta panduan teknis penerapan CSS yang siap Anda terapkan pada situs WordPress Anda. Bagian 1: Tag HTML Dasar (Struktur & Teks) Tag HTML dasar digunakan untuk membangun struktur utama halaman serta menyusun teks atau tulisan. 1. Tag Struktur Halaman : Deklarasi versi HTML (HTML5) kepada peramban (browser). : Tag utama yang membungkus seluruh elemen web. : Menyimpan metadata, judul dokumen (), serta tautan stylesheet atau pustaka eksternal. <body>: Membungkus seluruh konten visual yang tampil di layar pengunjung. 2. Tag Pengaturan Teks & Paragraf <h1> sampai <h6>: Tag judul (heading). <h1> digunakan untuk judul utama (biasanya judul postingan), sedangkan <h2>–<h6> untuk subjudul secara hierarkis. <p>: Membuat paragraf baru untuk membungkus kalimat. <br>: Menambahkan baris baru (line break) tanpa membuat paragraf baru. <hr>: Membuat garis pemisah horizontal antar bagian teks. 3. Tag Format & Penekanan Kalimat <strong> atau <b>: Menebalkan teks. <strong> memberikan penekanan penting (semantic importance). <em> atau <i>: Mencetak miring teks (italic). <em> memberi penekanan nada bicara/istilah. <mark>: Memberikan sorotan (highlight) warna kuning pada teks. <small>: Mengecilkan ukuran teks (cocok untuk catatan kaki/hak cipta). <sub>: Teks subscript (posisi bawah, contoh: H<sub>2</sub>O). <sup>: Teks superscript (posisi atas/pangkat, contoh: 10<sup>2</sup>). <del>: Teks dengan efek dicoret (menandakan informasi usang/dihapus). <ins>: Teks dengan garis bawah (menandakan penambahan baru). Contoh Kode HTML Dasar: <p class="wp-block-paragraph"></p> </div> </main> <footer id="site-footer" class="site-footer"> </footer> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/hello-elementor/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script> <script> var swiper = new Swiper(".myNewsSwiper", { slidesPerView: 1, // Tampil 1 di HP spaceBetween: 20, loop: true, // Looping terus menerus autoplay: { delay: 3000, // Bergerak setiap 3 detik disableOnInteraction: false, // Tetap jalan meski disentuh user reverseDirection: false, // false = Kiri ke Kanan (standar), true = Kanan ke Kiri }, pagination: { el: ".swiper-pagination", clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // Responsive: Tampil 3 kartu di Layar Besar breakpoints: { 640: { slidesPerView: 2, spaceBetween: 20, }, 1024: { slidesPerView: 3, spaceBetween: 30, }, }, }); </script><footer style="text-align: center; padding: 20px; background-color: #f5f5f5; margin-top: 30px; border-top: 2px solid #ddd;"> <p style="margin: 0; font-family: Arial, sans-serif; font-size: 14px; color: #333;"> <a href="https://www.apose.web.id" style="text-decoration: none; color: #0073aa; font-weight: bold;"> Copyright By Apose.Web.Id <span id="current-year"></span> </a> </p> </footer> <script> document.getElementById('current-year').textContent = new Date().getFullYear(); </script> <script> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <script id="sourcebuster-js-js" src="https://apose.web.id/wp-content/plugins/woocommerce/assets/js/sourcebuster/sourcebuster.min.js?ver=10.9.4"></script> <script id="wc-order-attribution-js-extra"> var wc_order_attribution = {"params":{"lifetime":1.0e-5,"session":30,"base64":false,"ajaxurl":"https://apose.web.id/wp-admin/admin-ajax.php","prefix":"wc_order_attribution_","allowTracking":true},"fields":{"source_type":"current.typ","referrer":"current_add.rf","utm_campaign":"current.cmp","utm_source":"current.src","utm_medium":"current.mdm","utm_content":"current.cnt","utm_id":"current.id","utm_term":"current.trm","utm_source_platform":"current.plt","utm_creative_format":"current.fmt","utm_marketing_tactic":"current.tct","session_entry":"current_add.ep","session_start_time":"current_add.fd","session_pages":"session.pgs","session_count":"udata.vst","user_agent":"udata.uag"}}; //# sourceURL=wc-order-attribution-js-extra </script> <script id="wc-order-attribution-js" src="https://apose.web.id/wp-content/plugins/woocommerce/assets/js/frontend/order-attribution.min.js?ver=10.9.4"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://apose.web.id/wp-includes/js/wp-emoji-release.min.js?ver=7.1.3"}} </script> <script type="module"> /*! This file is auto-generated */ var e="script#wp-emoji-settings",t=document.querySelector(e);if(!(t instanceof HTMLScriptElement))throw new Error("Element missing: "+e);const r=JSON.parse(t.text),s=(window._wpemojiSettings=r,"wpEmojiSettingsSupports"),o=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(s,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const r=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===r[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,r){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!r(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,r){let a;const s=(a="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),o=(s.textBaseline="top",s.font="600 32px Arial",{});return e.forEach(e=>{o[e]=t(s,e,n,r)}),o}function a(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}r.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(s));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(o),u.toString(),c.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"});const a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=e=>{i(n=e.data),a.terminate(),t(n)})}catch(e){}i(n=f(o,u,c,p))}t(n)}).then(e=>{for(const n in e)r.supports[n]=e[n],r.supports.everything=r.supports.everything&&r.supports[n],"flag"!==n&&(r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&r.supports[n]);var t;r.supports.everythingExceptFlag=r.supports.everythingExceptFlag&&!r.supports.flag,r.supports.everything||((t=r.source||{}).concatemoji?a(t.concatemoji):t.wpemoji&&t.twemoji&&(a(t.twemoji),a(t.wpemoji)))}); //# sourceURL=https://apose.web.id/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>