HTML Academy · Pelajaran

header nav main dan footer

Susun penanda utama halaman dengan tag semantik.

header nav main dan footer adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Elemen Penanda HTML5

HTML5 memperkenalkan elemen penanda yang menentukan wilayah halaman:

<header> — konten pengantar atau navigasi
<nav> — tautan navigasi
<main> — konten utama yang unik
<footer> — informasi kaki halaman

Elemen-elemen tersebut menggantikan <div> generik dengan struktur yang bermakna.

Elemen header

Elemen <header> berisi konten pengantar:

<header>
  <a href="/" class="logo">
    <img src="logo.svg" alt="Company name">
  </a>
  <nav>...</nav>
  <button>Sign In</button>
</header>
<!-- header can appear multiple times: page header, article header -->
<!-- But only one page-level header per page is recommended -->

Elemen nav

Elemen <nav> membungkus tautan navigasi:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>
<!-- Use aria-label to distinguish multiple navs -->
<!-- Not every group of links is a nav — only major navigation -->

Beberapa Elemen nav

Sebuah halaman dapat memiliki beberapa elemen <nav> — beri label pada masing-masing:

<nav aria-label="Main navigation">...</nav>
<nav aria-label="Breadcrumb">...</nav>
<nav aria-label="Footer links">...</nav>
<!-- aria-label tells screen reader users what each nav is for -->
<!-- Screen readers list landmarks — unique labels help navigation -->

Elemen main

Elemen <main> menandai konten utama yang unik untuk halaman ini:

<main id="main-content">
  <h1>HTML5 Landmark Elements</h1>
  <p>Learn about semantic page structure...</p>
</main>
<!-- Rules:
  - Only ONE main element per page
  - Should not be a descendant of header, footer, aside, nav
  - id="main-content" enables skip links -->
<!-- Assistive tech users jump directly to main -->

Elemen footer

Elemen <footer> membungkus informasi kaki halaman:

<footer>
  <p>&copy; 2025 CoddyKit. All rights reserved.</p>
  <nav aria-label="Footer navigation">
    <a href="/privacy">Privacy Policy</a>
    <a href="/terms">Terms of Service</a>
  </nav>
</footer>
<!-- footer can appear multiple times: page footer, article footer -->
<!-- Page footer typically has copyright, links, contact -->

Kerangka Halaman

Struktur halaman semantik yang lengkap:

<body>
  <header>
    <a href="/"><img src="logo.svg" alt="Site name"></a>
    <nav aria-label="Main">...</nav>
  </header>

  <main id="main-content">
    <h1>Page Title</h1>
    <p>Primary content here.</p>
  </main>

  <aside>Related content</aside>

  <footer>
    <p>&copy; 2025 Company</p>
  </footer>
</body>

Tautan Lewati Navigasi

Tambahkan tautan lewati bagi pengguna papan ketik agar dapat melewati navigasi:

<a href="#main-content" class="skip-link">Skip to main content</a>

<header>... navigation ...</header>

<main id="main-content" tabindex="-1">
  <h1>Page Heading</h1>
</main>

/* CSS: */
.skip-link {
  position: absolute; top: -100%;
  background: #0070f3; color: white; padding: 0.5rem;
}
.skip-link:focus { top: 0; }

Peran Penanda

Elemen penanda HTML5 dipetakan ke peran penanda ARIA:

<header> → role="banner" (hanya tingkat halaman)
<nav> → role="navigation"
<main> → role="main"
<footer> → role="contentinfo" (hanya tingkat halaman)
<aside> → role="complementary"

header dan footer di Dalam Bagian

header dan footer dapat muncul di dalam <article> dan <section>:

<article>
  <header>
    <h2>Article Title</h2>
    <p>By Jane Smith | March 2024</p>
  </header>
  <p>Article content...</p>
  <footer>
    <p>Tags: HTML, CSS</p>
  </footer>
</article>
<!-- In this context, header/footer are NOT banner/contentinfo roles -->
<!-- They are generic sections within the article -->

Kesalahan Umum

Hindari kesalahan umum dalam penggunaan elemen penanda semantik berikut:

Menggunakan <nav> untuk setiap kelompok tautan
Menggunakan beberapa elemen <main> dalam satu halaman
Menempatkan <main> di dalam <header> atau <nav>
Menggunakan <footer> untuk konten yang bukan bagian kaki halaman

Pemeriksaan Cepat

Berapa banyak elemen main yang seharusnya dimiliki sebuah halaman?

Ringkasan: header nav main footer

Hal-hal penting tentang elemen penanda:

<header> — konten pengantar; dapat diulang di setiap bagian
<nav> — navigasi utama; beri label dengan aria-label jika ada beberapa
<main> — konten utama yang unik; tepat satu per halaman
<footer> — konten kaki halaman; dapat diulang di setiap bagian
Tambahkan tautan lewati yang menargetkan id="main-content"

Pertanyaan yang Sering Diajukan

Apakah pelajaran “header nav main dan footer” gratis?

Ya — teks lengkap “header nav main dan footer” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “header nav main dan footer”?

Susun penanda utama halaman dengan tag semantik. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “header nav main dan footer” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke HTML Academy