HTML Dasar : Heading (6/13)

00:05:04
https://www.youtube.com/watch?v=SMetRBdIh-8

Resumo

TLDRThe video explains the use of HTML headings (H1 to H6) and their importance in structuring content. H1 is the most significant heading, used for main titles, while H6 is the least important. The presenter demonstrates creating headings in an HTML file and emphasizes the need for a clear hierarchy, using examples from a news website. The video also discusses styling headings with CSS, reassuring viewers that visual size can differ as long as the hierarchy is respected. Overall, it provides guidance on effectively using headings in web content.

Conclusões

  • 📄 H1 is the most important heading.
  • 📄 Use H2 for subtitles under H1.
  • 📄 H3 can be used for sub-subtitles.
  • 📄 Maintain a clear hierarchy in headings.
  • 📄 Inspect Element helps check heading structure.
  • 📄 CSS can style headings differently.
  • 📄 H1 should be unique per page.
  • 📄 Visual size of headings can vary.
  • 📄 Use headings to improve SEO.
  • 📄 Organize content for better readability.

Linha do tempo

  • 00:00:00 - 00:05:04

    In this video, the presenter discusses HTML headings, specifically H1 to H6. They explain the hierarchy of headings, emphasizing that H1 is the most important and should be used for the main title of a page or article, while H2 and H3 are used for subheadings and subsections. The presenter provides examples, including how to inspect elements on a webpage to determine the heading levels used. They illustrate the importance of maintaining a clear hierarchy in headings for better organization and readability, and mention that styling can be adjusted with CSS without affecting the semantic importance of the headings.

Mapa mental

Vídeo de perguntas e respostas

  • What is the purpose of H1 in HTML?

    H1 is used for the main title of a webpage, indicating the most important heading.

  • How do H2 and H3 relate to H1?

    H2 is used for subtitles under H1, while H3 can be used for sub-subtitles under H2.

  • Can headings be styled with CSS?

    Yes, headings can be styled with CSS, allowing for visual customization.

  • What is the importance of heading hierarchy?

    Heading hierarchy helps organize content by importance, improving readability and SEO.

  • How can I check the heading structure of a webpage?

    You can use the 'Inspect Element' feature in Google Chrome to view the heading structure.

  • Is it okay for H3 to appear larger than H1?

    Yes, as long as the importance of the headings is maintained, their visual size can vary.

  • What is the difference between H1 and H6?

    H1 is the largest and most important heading, while H6 is the smallest and least important.

  • How should I use headings in a blog article?

    Use H1 for the main title, H2 for subtitles, and H3 for further subdivisions.

  • Can I use multiple H1 tags on a page?

    It's recommended to use only one H1 tag per page for better SEO.

  • What is the best practice for heading usage?

    Follow a logical hierarchy from H1 to H6 to structure your content effectively.

Ver mais resumos de vídeos

Obtenha acesso instantâneo a resumos gratuitos de vídeos do YouTube com tecnologia de IA!
Legendas
id
Rolagem automática:
  • 00:00:00
    pada video kali ini saya akan bahas
  • 00:00:02
    mengenai heading pada
  • 00:00:06
    HTML seperti yang kalian lihat di
  • 00:00:08
    sublemteag saya Saya sudah membuat satu
  • 00:00:11
    folder baru dengan nama latihan 4 dan
  • 00:00:14
    satu file html baru dengan nama
  • 00:00:17
    heading.html di dalam html ini saya
  • 00:00:19
    sudah membuat en buah heading ini adalah
  • 00:00:23
    heading yang dimiliki oleh html mulai
  • 00:00:26
    dari H1 sampai h6 Ya mulai dari heading
  • 00:00:30
    dengan level tertinggi yaitu H1 dan
  • 00:00:33
    heading dengan level terendah yaitu h6
  • 00:00:36
    ya kalau kita lihat hasilnya seperti ini
  • 00:00:40
    ya jadi H1 memiliki ukuran font yang
  • 00:00:43
    paling besar sedangkan h6 memiliki
  • 00:00:46
    ukuran font yang paling
  • 00:00:48
    kecil tapi yang harus kalian pahami pada
  • 00:00:51
    heading ini adalah Kapan kalian
  • 00:00:54
    menggunakan salah satu dari heading ini
  • 00:00:56
    cara paling mudah adalah dengan membuat
  • 00:00:59
    hierarki kepada pentingan misalnya
  • 00:01:01
    begini jadi misalnya kalian ingin
  • 00:01:04
    membuat headline sebuah halaman atau
  • 00:01:06
    membuat judul pada artikel di blog anda
  • 00:01:10
    itu kalian bisa menggunakan H1 karena
  • 00:01:13
    menurut saya itu adalah elemen paling
  • 00:01:15
    penting di dalam halaman kalian ini
  • 00:01:18
    adalah judul
  • 00:01:22
    artikel dan setelahnya misalnya kalian
  • 00:01:25
    punya isi artikelnya Nah jadi H1 ini
  • 00:01:29
    adalah heading paling utama yang ada di
  • 00:01:31
    dalam halaman artikel kalian Mungkin di
  • 00:01:33
    dalam artikel ini kalian bisa punya
  • 00:01:35
    subjudul maka kalian bisa punya H2 ini
  • 00:01:38
    subjudul lalu kalian bisa punya
  • 00:01:41
    subbodyodinya ya jadi harusnya H1 ini
  • 00:01:44
    adalah judul paling penting yang ada di
  • 00:01:47
    dalam sebuah halaman analogi lain yang
  • 00:01:49
    bisa saya kasih adalah ketika kita
  • 00:01:50
    membuat artikel ilmiah atau laporan Di
  • 00:01:53
    mana Di situ kalian menuliskan ada bab 1
  • 00:01:55
    bab 2 bab 3ah judul bab itu bisa kalian
  • 00:01:58
    anggap sebagai has 1 dan subab misalnya
  • 00:02:02
    1.1 itu bisa kalian anggap sebagai H2
  • 00:02:05
    lalu jika subab tadi memiliki sub subbab
  • 00:02:08
    misalkan
  • 00:02:09
    1.1.1 itu kalian bisa gunakan H3 dan
  • 00:02:14
    seterusnya ya supaya lebih jelas kita
  • 00:02:16
    bisa lihat contohnya misalnya saya buka
  • 00:02:18
    detik.com kalau kalian lihat di halaman
  • 00:02:21
    utama detik.com ini banyak sekali judul
  • 00:02:24
    artikel ya Yang pertama adalah ini lalu
  • 00:02:28
    misalkan di bawah lagi kalian bisa kita
  • 00:02:30
    lihat banyak sekali judul-judul artikel
  • 00:02:31
    ada yang sebelah kiri di tengah dan di
  • 00:02:33
    sebelah kanan Nah kalau kita
  • 00:02:36
    lihat
  • 00:02:38
    sepertinya judul paling utama adalah
  • 00:02:41
    yang berada di headline ini ya kalau
  • 00:02:45
    kalian pengin lihat apakah headline ini
  • 00:02:48
    dibuat dengan menggunakan H1 atau tidak
  • 00:02:50
    Kita bisa gunakan fasilitas di Google
  • 00:02:53
    Chrome yang namanya inspect elemen ya
  • 00:02:55
    kita bisa Klik klik kanan lalu kita
  • 00:02:58
    pilih inspect elemen
  • 00:03:00
    nanti setelah muncul di bawahnya seperti
  • 00:03:03
    ini kalian bisa Klik tanda kaca pembesar
  • 00:03:06
    yang sebelah kiri kalian bisa Klik lalu
  • 00:03:08
    kalian Arahkan ke elemen yang kalian
  • 00:03:10
    ingin tahu misalnya yang ini ya kalian
  • 00:03:13
    Klik di sini nah kita bisa lihat
  • 00:03:17
    bahwa judul halaman ini dibuat dengan
  • 00:03:19
    menggunakan H1 ya betul jadi karena ini
  • 00:03:21
    adalah heading yang menurut saya paling
  • 00:03:24
    penting ini mungkin biasa disebut
  • 00:03:26
    headline lalu kalau kita Scroll lagi ke
  • 00:03:28
    bawah
  • 00:03:31
    misalnya ada judul lagi yang
  • 00:03:34
    ini Mungkin kita bisa lihat apakah ini
  • 00:03:37
    dibuat dengan menggunakan H1 atau tidak
  • 00:03:41
    Kita
  • 00:03:42
    klikah ini detik.com membuat judul
  • 00:03:46
    artikel ini dengan menggunakan H3 karena
  • 00:03:49
    ini judul
  • 00:03:51
    ini merupakan judul yang e subnya atau
  • 00:03:56
    di halaman ini judul paling penting
  • 00:03:57
    adalah yang ini dan di bawahnya level di
  • 00:04:00
    bawahnya adalah cerita yang ini tapi
  • 00:04:04
    kalau saya klik cerita ini dan kita
  • 00:04:07
    masuk ke halaman dari artikel tadi
  • 00:04:11
    sekarang kita lihat halaman ini mungkin
  • 00:04:14
    sekarang judul yang tadinya H3 kalau
  • 00:04:17
    kita sekarang lihat ini berubah menjadi
  • 00:04:20
    H1 ya karena di halaman ini sepertinya
  • 00:04:24
    judul ini adalah judul yang paling
  • 00:04:25
    penting dibanding judul-judul yang
  • 00:04:27
    lainnya Ya mungkin itulah eh Bagaimana
  • 00:04:30
    cara kita membuat sebuah hierarki
  • 00:04:33
    kepentingan dalam sebuah halaman bisa
  • 00:04:35
    coba gunakan H1 H2 sampai h6 tadi lihat
  • 00:04:39
    Bagaimana bedanya masalah Style ya
  • 00:04:42
    masalah style itu kita bisa capai dengan
  • 00:04:44
    menggunakan CSS jadi jangan khawatir
  • 00:04:47
    kalau misalkan nanti kalian muat heading
  • 00:04:49
    3 itu lebih besar dari H1 yang tidak
  • 00:04:51
    apa-apa asal kepentingannya tadi heading
  • 00:04:54
    sat itu lebih penting daripada
  • 00:04:56
    heading-heading di bawahnya baik sampai
  • 00:04:58
    di sini dulu video kali ini sampai
  • 00:05:00
    ketemu di video berikutnya saya
  • 00:05:02
    sandiagali terima kasih
Etiquetas
  • HTML
  • headings
  • H1
  • H2
  • H3
  • CSS
  • web development
  • content hierarchy
  • SEO
  • blogging