{"id":18,"date":"2019-07-11T13:44:52","date_gmt":"2019-07-11T13:44:52","guid":{"rendered":"https:\/\/www.webhozz.com\/code\/?p=18"},"modified":"2019-09-03T11:57:31","modified_gmt":"2019-09-03T11:57:31","slug":"syntax-elemen-html","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/","title":{"rendered":"HTML : Syntax Elemen"},"content":{"rendered":"\n

Elemen HTML adalah komponen individual dari dokumen HTML.\nSebagai contoh, elemen judul mewakili judul dokumen.<\/p>\n\n\n\n

Sebagian besar elemen HTML ditulis dengan tag awal (atau tag pembuka) dan tag akhir (atau tag penutup), dengan konten di antara tag-nya. Elemen juga dapat berisi atribut yang mendefinisikan properti tambahannya. Misalnya, paragraf, yang diwakili oleh elemen <p>, akan ditulis sebagai:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Kita akan mempelajari tentang atribut HTML pada bab selanjutnya. <\/p>\n\n\n\n

Catatan:<\/em><\/strong> Semua elemen tidak memerlukan tag akhir atau tag penutup untuk muncul. Ini disebut sebagai elemen kosong, elemen yang menutup sendiri atau elemen yang tidak berlaku.<\/p>\n\n\n\n

Tag HTML Vs Elemen<\/h4>\n\n\n\n

Secara teknis, elemen HTML adalah kumpulan-kumpulan tag awal, atributnya, tag akhir dan semua yang ada di antaranya. Di sisi lain, tag HTML (baik membuka atau menutup) digunakan untuk menandai awal atau akhir suatu elemen, seperti yang kalian lihat pada ilustrasi di atas.<\/p>\n\n\n\n

Kasus Ketidaksensitifan Dalam Tag HTML dan Atribut HTML<\/h4>\n\n\n\n

Dalam HTML, penulisan nama tag dan atribut sebenarnya tidak bermasalah mengunakan huruf besar-kecil (tetapi pada sebagian besar nilai atribut akan bermasalah bila menggunakan huruf besar-kecil). Sebagai contoh tag <P>, dan tag <p> mendefinisikan hal yang sama dalam HTML yang merupakan paragraf.<\/p>\n\n\n\n

Namun pada XHTML penggunaan huruf besar pada tag <P> mempunyai arti yang berbeda dengan penggunaan huruf kecil pada tag <p>.<\/p>\n\n\n\n

Contoh kodenya :<\/p>\n\n\n

\n<p>This is a paragraph.<\/p>\n<P>This is also a valid paragraph.<\/P>\n<\/pre><\/div>\n\n\n
Elemen Kosong HTML<\/h4>\n\n\n\n
Elemen HTML tanpa isi disebut elemen kosong. Elemen <meta><\/strong><\/code> adalah elemen kosong tanpa tag penutup <\/p>\n\n\n\n
Sebagai contoh tipikal elemen kosong, adalah elemen <br>, yang merepresentasikan garis putus. Beberapa elemen kosong umum lainnya adalah <img>, <input>, <link>, <meta>, <hr>, dll.<\/p>\n\n\n\n
Tips : Dalam XHTML, semua elemen harus ditutup. Menambahkan garis miring dalam tag awal, seperti <meta\/><\/strong><\/code>, adalah cara yang tepat untuk menutup elemen kosong di XHTML (dan XML).<\/p>\n\n\n\n
Contoh kodenya :<\/p>\n\n\n
\n<p>This paragraph contains <br> a line break.<\/p>\n<img src="images\/sky.jpg" alt="Cloudy Sky">\n<input type="text" name="username">\n<\/pre><\/div>\n\n\n
Elemen HTML Bersarang <\/h2>\n\n\n\n
Sebagian besar elemen HTML bersarang (dapat berisi elemen HTML lainnya). <\/p>\n\n\n\n
Contoh Dokumen HTML Bersarang <\/p>\n\n\n
\n<!doctype html>\n<html lang="id">\n  <head>\n  \t<title>Selamat Belajar<\/title>\n  \t<meta  charset= \u201cUTF-8\u201d \/>\n  <\/head>\n  <body>\n  <\/body>\n<\/html>\n<\/pre><\/div>\n\n\n
Contoh di atas mengandung beberapa elemen HTML. <\/p>\n\n\n\n
Tag HTML harus disarangkan dengan urutan yang benar. Tag terakhir yang dibuka harus ditutup terlebih dahulu. Contohnya :<\/p>\n\n\n
\n<p><strong>Contoh tag yang benar<\/strong><\/p>\n<p><strong>Contoh tag yang salah<\/p><\/strong>\n<\/pre><\/div>\n\n\n
Menulis Komen Pada HTML<\/h4>\n\n\n\n
Komentar biasanya ditambahkan dengan tujuan agar membuat kode sumber lebih mudah dimengerti. Ini dapat membantu pengembang lain (atau bahkan kalian ketika kalian ingin mengedit kode sumber) untuk memahami apa yang kalian coba lakukan dengan HTML. Komentar tidak ditampilkan di browser.<\/p>\n\n\n\n
Komentar HTML dimulai dengan <!–, dan diakhiri dengan –>, seperti yang ditunjukkan pada contoh di bawah ini:<\/p>\n\n\n
\n<!-- This is an HTML comment -->\n<!-- This is a multi-line HTML comment \n     that spans across more than one line -->\n<p>This is a normal piece of text.<\/p>\n<\/pre><\/div>\n\n\n
Kalian juga dapat mengomentari bagian dari kode HTML yang kalian buat untuk tujuan debugging, seperti yang ditunjukkan di sini:<\/p>\n\n\n
\n<!-- Hiding this image for testing\n<img src="images\/smiley.png" alt="Smiley">\n-->\n<\/pre><\/div>\n\n\n
Tipe Elemen HTML<\/h4>\n\n\n\n
Elemen dapat ditempatkan dalam dua grup yang berbeda: elemen Block Level<\/em> dan elemen Inline Level.<\/em> Block Level untuk membuat struktur dokumen, sedangkan yang Inline level untuk mempercantik isi blok.<\/p>\n\n\n\n
Juga, block level element menempati 100% dari lebar yang tersedia dan disisipkan dengan line break sebelum dan sesudah. Sedangkan, elemen inline hanya akan mengambil ruang sebanyak yang dibutuhkan.<\/p>\n\n\n\n
Elemen block level yang paling umum digunakan adalah <div>, <p>, <h1> hingga <h6>, <form>, <ol>, <ul>, <li>, dan seterusnya. Sedangkan, elemen inline level yang umum digunakan adalah <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, dll.<\/p>\n\n\n\n
Catatan:<\/em><\/strong> Elemen block level tidak boleh ditempatkan di dalam elemen inline level. Misalnya, elemen <p> tidak boleh ditempatkan di dalam elemen <b>.<\/p>\n","protected":false},"excerpt":{"rendered":"
Elemen HTML adalah komponen individual dari dokumen HTML. Sebagai contoh, elemen judul mewakili judul dokumen. Sebagian besar elemen HTML ditulis dengan tag awal (atau tag<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-18","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nBelajar HTML : Syntax Elemen - WebHozz Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar HTML : Syntax Elemen - WebHozz Code\" \/>\n<meta property=\"og:description\" content=\"Elemen HTML adalah komponen individual dari dokumen HTML. Sebagai contoh, elemen judul mewakili judul dokumen. Sebagian besar elemen HTML ditulis dengan tag awal (atau tag\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Code\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-11T13:44:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-03T11:57:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/html-element.png\" \/>\n\t<meta property=\"og:image:width\" content=\"560\" \/>\n\t<meta property=\"og:image:height\" content=\"135\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"headline\":\"HTML : Syntax Elemen\",\"datePublished\":\"2019-07-11T13:44:52+00:00\",\"dateModified\":\"2019-09-03T11:57:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/\"},\"wordCount\":587,\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-element.png\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/\",\"name\":\"Belajar HTML : Syntax Elemen - WebHozz Code\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-element.png\",\"datePublished\":\"2019-07-11T13:44:52+00:00\",\"dateModified\":\"2019-09-03T11:57:31+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-element.png\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html-element.png\",\"width\":560,\"height\":135},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/syntax-elemen-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML : Syntax Elemen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/\",\"name\":\"WebHozz Code\",\"description\":\"Tutorial Web & Pemrograman Indonesia\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/#\\\/schema\\\/person\\\/3b2b79dc317236b0dde4b1fda37263e1\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/code\\\/author\\\/dody\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar HTML : Syntax Elemen - WebHozz Code","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:\/\/www.webhozz.com\/code\/syntax-elemen-html\/","og_locale":"en_US","og_type":"article","og_title":"Belajar HTML : Syntax Elemen - WebHozz Code","og_description":"Elemen HTML adalah komponen individual dari dokumen HTML. Sebagai contoh, elemen judul mewakili judul dokumen. Sebagian besar elemen HTML ditulis dengan tag awal (atau tag","og_url":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/","og_site_name":"WebHozz Code","article_published_time":"2019-07-11T13:44:52+00:00","article_modified_time":"2019-09-03T11:57:31+00:00","og_image":[{"width":560,"height":135,"url":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/html-element.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"headline":"HTML : Syntax Elemen","datePublished":"2019-07-11T13:44:52+00:00","dateModified":"2019-09-03T11:57:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/"},"wordCount":587,"image":{"@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/html-element.png","articleSection":["HTML"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/","url":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/","name":"Belajar HTML : Syntax Elemen - WebHozz Code","isPartOf":{"@id":"https:\/\/www.webhozz.com\/code\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/html-element.png","datePublished":"2019-07-11T13:44:52+00:00","dateModified":"2019-09-03T11:57:31+00:00","author":{"@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1"},"breadcrumb":{"@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/#primaryimage","url":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/html-element.png","contentUrl":"https:\/\/www.webhozz.com\/code\/wp-content\/uploads\/2019\/07\/html-element.png","width":560,"height":135},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/code\/syntax-elemen-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/code\/"},{"@type":"ListItem","position":2,"name":"HTML : Syntax Elemen"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/code\/#website","url":"https:\/\/www.webhozz.com\/code\/","name":"WebHozz Code","description":"Tutorial Web & Pemrograman Indonesia","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/code\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/code\/#\/schema\/person\/3b2b79dc317236b0dde4b1fda37263e1","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f222cb0ed38f2100d666bb262fd38d4f0d8e5673698208e40ff83118f10a4e8e?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/code\/author\/dody\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":6,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"predecessor-version":[{"id":402,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/posts\/18\/revisions\/402"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/code\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}