{"id":2929,"date":"2021-11-11T12:02:38","date_gmt":"2021-11-11T12:02:38","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2929"},"modified":"2023-06-12T14:42:06","modified_gmt":"2023-06-12T14:42:06","slug":"tutorial-html-04-mengenal-heading-pada-html","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/tutorial-html-04-mengenal-heading-pada-html\/","title":{"rendered":"Tutorial HTML #04 &#8211; Mengenal Heading Pada HTML"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Heading merupakan element atau tag HTML yang berfungsi untuk menunjukkan bagian penting pada halaman web. element tag heading ini memiliki enam tingkatan tyang berurutan yaitu &lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt;,&lt;h4&gt;,&lt;h5&gt;,&lt;h6&gt; yang bisa digunakan untuk menambah ke struktur halaman web. perbedaan masing-masing heading yaitu besar hingga kecil teks. contohnya tag\/element &lt;h1&gt; lebih besar dari element\/tag &lt;h2&gt; dan seterusnya.<\/p>\n<p>penggunaan masing-masing heading juga berbeda, berikut penggunaan masing-masing tag\/element heading yang sering digunakan pada pengolahan halaman web :<\/p>\n<ol>\n<li>&lt;h1&gt; heading yang digunakan untuk penulisan judul utama dari dokument<\/li>\n<li>&lt;h2&gt; heading yang digunaakan sebagai sub &lt;h1&gt;<\/li>\n<li>&lt;h3&gt; heading yang digunakan sebagai sub &lt;h2&gt;<\/li>\n<li>untuk penggunaan &lt;h4&gt;&lt;h4&gt;&lt;h5&gt;&lt;h6&gt; tergantung peogramer sendiri untuk memperindah halaman web.<\/li>\n<\/ol>\n<p>berikut contoh penerapan masing-masing lement\/tag heading :<\/p>\n<div id=\"crayon-62f4ec416daba317809807\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-toolbar\" data-settings=\" show\">\n<div class=\"crayon-tools\">\n<div class=\"crayon-button crayon-nums-button crayon-pressed\" title=\"Toggle Line Numbers\">\n<div class=\"crayon-button-icon\">\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;ini adalah heading 1&lt;\/h1&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"attachment_117\" class=\"wp-caption aligncenter\">\n<figure id=\"attachment_117\" aria-describedby=\"caption-attachment-117\" style=\"width: 512px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-117 size-full\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2015\/12\/h1.png\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" srcset=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2015\/12\/h1.png 512w, https:\/\/www.malasngoding.com\/wp-content\/uploads\/2015\/12\/h1-300x178.png 300w\" alt=\"Belajar HTML Part 4 : Heading Pada HTML\" width=\"512\" height=\"303\" aria-describedby=\"caption-attachment-117\" \/><figcaption id=\"caption-attachment-117\" class=\"wp-caption-text\">Ini adalah heading 1<\/figcaption><\/figure>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;h1&gt;ini adalah heading 1&lt;\/h1&gt;\r\n&lt;h2&gt;ini adalah heading 2&lt;\/h2&gt;\r\n&lt;h3&gt;ini adalah heading 3&lt;\/h3&gt;\r\n&lt;h4&gt;ini adalah heading 4&lt;\/h4&gt;\r\n&lt;h5&gt;ini adalah heading 5&lt;\/h5&gt;\r\n&lt;h6&gt;ini adalah heading 6&lt;\/h6&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<\/div>\n<p><iframe style=\"width: 100%;\" title=\"Mengenal Heading Pada HTML\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/ExEeyZZ?default-tab=result&amp;theme-id=dark\" height=\"400\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/ExEeyZZ\"><br \/>\nMengenal Heading Pada HTML<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><br \/>\nDari contoh yang diatas dapat anda lihat perbedaan antara masing-masing heading. \u00a0penulisan heading ini boleh digunakan didalam jenis tag yang lain. berikut contoh penggunaan element heading di dalam tag lain :<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;a href=\"https:\/\/rengga.dev\/blog\/\"&gt;&lt;h1&gt;ini adalah heading 1 &lt;\/h1&gt;&lt;\/a&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<div id=\"attachment_121\" class=\"wp-caption aligncenter\">\n<figure id=\"attachment_121\" aria-describedby=\"caption-attachment-121\" style=\"width: 568px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-121 size-full\" title=\"Belajar HTML Heading Pada HTML\" src=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2015\/12\/element-h1.png\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" srcset=\"https:\/\/www.malasngoding.com\/wp-content\/uploads\/2015\/12\/element-h1.png 568w, https:\/\/www.malasngoding.com\/wp-content\/uploads\/2015\/12\/element-h1-300x168.png 300w\" alt=\"Belajar HTML Heading Pada HTML\" width=\"568\" height=\"319\" aria-describedby=\"caption-attachment-121\" \/><figcaption id=\"caption-attachment-121\" class=\"wp-caption-text\">Ini adalah heading dengan link<\/figcaption><\/figure>\n<\/div>\n<h3>Belajar HTML Heading Pada HTML<\/h3>\n<p>contoh diatas yaitu penggunaan tag heading yang berada dalam tag &lt;a&gt;. \u00a0sedengkan element\u00a0<em><strong>href<\/strong>\u00a0<\/em>digunakan untuk menghubungkan dengan dokumen\/link yang lain. ketika diklik pada \u201cini adalah heading 1\u201d akan dialihkan ke halaman <a href=\"https:\/\/rengga.dev\/blog\/\" target=\"_blank\" rel=\"noopener\">https:\/\/rengga.dev\/blog\/<\/a><\/p>\n<h2><strong>Kesimpulannya<\/strong><\/h2>\n<p>Salah fungsi dari tag heading ini adalah untuk merapikan struktur penulisan dalam HTML, misalkan penulisan judul yang menggunakan text yang lebih besar dari sub judul.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Heading merupakan element atau tag HTML yang berfungsi untuk <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/tutorial-html-04-mengenal-heading-pada-html\/\" title=\"Tutorial HTML #04 &#8211; Mengenal Heading Pada HTML\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,2],"tags":[231,225,232,103,227],"newstopic":[572],"class_list":{"0":"post-2929","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-web-design","9":"tag-atribut-html","10":"tag-belajar-html","11":"tag-heading-html","12":"tag-web-design","13":"tag-web-designer","14":"newstopic-html"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2929","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2929"}],"version-history":[{"count":6,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2929\/revisions"}],"predecessor-version":[{"id":2939,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2929\/revisions\/2939"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3789"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2929"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2929"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2929"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}