{"id":34972,"date":"2025-06-16T13:30:19","date_gmt":"2025-06-16T06:30:19","guid":{"rendered":"https:\/\/jakarta.telkomuniversity.ac.id\/?p=34972"},"modified":"2025-06-18T13:22:10","modified_gmt":"2025-06-18T06:22:10","slug":"struktur-dasar-halaman-web-header-body-footer","status":"publish","type":"post","link":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/struktur-dasar-halaman-web-header-body-footer\/","title":{"rendered":"Struktur Dasar Halaman Web: Header, Body, Footer"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

Ketika kamu membuka sebuah halaman web, mungkin yang terlihat hanya desain menarik, warna-warna yang serasi, atau tulisan yang enak dibaca. Tapi di balik tampilannya, setiap halaman web memiliki struktur dasar<\/strong> yang hampir selalu sama: Header<\/strong>, Body<\/strong>, dan Footer<\/strong>.<\/p>\n

Memahami struktur ini sangat penting, terutama jika kamu ingin membuat website sendiri, terlibat dalam pengembangan web, atau sekadar ingin memahami bagaimana halaman internet bekerja. Artikel ini akan membahas secara sederhana apa itu header, body, dan footer lengkap dengan fungsi dan perannya dalam sebuah halaman web.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div>

\n\t
\n\t\t\n\t\t
\n\t\t\t
\"Struktur<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

Apa Itu Struktur Halaman Web?<\/h2>\n\t
\n\t\t
\n\t\t\t

Secara teknis, setiap halaman web dibangun menggunakan bahasa HTML (Hypertext Markup Language), dan ditata menggunakan CSS (Cascading Style Sheets). Struktur dasar HTML itu seperti kerangka rumah, dan tiga bagian utama yang selalu ada adalah:<\/p>\n

    \n
  • \n

    Header<\/strong> (bagian atas)<\/p>\n<\/li>\n

  • \n

    Body<\/strong> (isi utama)<\/p>\n<\/li>\n

  • \n

    Footer<\/strong> (bagian bawah)<\/p>\n<\/li>\n<\/ul>\n

    Struktur ini membantu browser menampilkan konten secara berurutan dan rapi. Selain itu, pembagian ini juga memudahkan developer mengelola, mendesain, dan mengoptimasi tampilan maupun fungsi website.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

    1. Header: Bagian Atas Halaman<\/h2>\n\t
    \n\t\t
    \n\t\t\t

    Header<\/strong> adalah bagian paling atas dari sebuah halaman web. Biasanya, di bagian ini kamu akan menemukan elemen-elemen penting yang bersifat tetap di setiap halaman website.<\/p>\n

    Fungsi Header:<\/h3>\n
      \n
    • \n

      Menampilkan identitas website<\/strong>: seperti logo, nama brand, atau tagline.<\/p>\n<\/li>\n

    • \n

      Navigasi utama<\/strong>: menu-menu seperti \u201cBeranda\u201d, \u201cTentang Kami\u201d, \u201cKontak\u201d, dan lainnya.<\/p>\n<\/li>\n

    • \n

      Call to Action<\/strong>: tombol daftar, login, atau tombol utama lainnya.<\/p>\n<\/li>\n

    • \n

      Desain konsisten<\/strong>: biasanya header muncul sama persis di semua halaman agar pengguna tidak bingung.<\/p>\n<\/li>\n<\/ul>\n

      Contoh Elemen dalam Header:<\/h3>\n
        \n
      • \n

        Logo atau gambar brand<\/p>\n<\/li>\n

      • \n

        Menu navigasi (navbar)<\/p>\n<\/li>\n

      • \n

        Ikon media sosial<\/p>\n<\/li>\n

      • \n

        Tombol pencarian atau login<\/p>\n<\/li>\n<\/ul>\n

        Dalam kode HTML, header<\/code> biasanya ditulis seperti ini:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

        \n\t\t\n\t\t
        \n\t\t\t
        \"struk<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

        2. Body: Isi Utama Halaman<\/h2>\n\t
        \n\t\t
        \n\t\t\t

        Body<\/strong> adalah inti dari sebuah halaman web. Semua konten yang ingin disampaikan ke pengunjung \u2014 baik berupa teks, gambar, video, formulir, hingga tombol interaktif \u2014 berada di dalam bagian ini.<\/p>\n

        Fungsi Body:<\/h3>\n
          \n
        • \n

          Menyampaikan informasi utama<\/strong>: artikel, produk, layanan, berita, dll.<\/p>\n<\/li>\n

        • \n

          Menampilkan konten visual<\/strong>: gambar, grafik, ilustrasi, infografik.<\/p>\n<\/li>\n

        • \n

          Berinteraksi dengan pengguna<\/strong>: formulir kontak, tombol beli, kolom komentar, dan lainnya.<\/p>\n<\/li>\n

        • \n

          Menjadi tempat halaman dinamis<\/strong>: konten bisa berubah tergantung halaman yang dibuka.<\/p>\n<\/li>\n<\/ul>\n

          Elemen yang Umum Digunakan dalam Body:<\/h3>\n
            \n
          • \n

            Judul dan paragraf<\/p>\n<\/li>\n

          • \n

            Gambar dan video<\/p>\n<\/li>\n

          • \n

            Tabel dan daftar<\/p>\n<\/li>\n

          • \n

            Tombol dan tautan<\/p>\n<\/li>\n

          • \n

            Konten dinamis dari database (untuk website interaktif)<\/p>\n<\/li>\n<\/ul>\n

            HTML-nya biasanya ditulis seperti ini:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

            \n\t\t\n\t\t
            \n\t\t\t
            \"struk<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

            3. Footer: Bagian Bawah Halaman<\/h2>\n\t
            \n\t\t
            \n\t\t\t

            Footer<\/strong> terletak di bagian paling bawah dari halaman web. Meski sering diabaikan, bagian ini sebenarnya sangat penting karena berisi informasi penutup atau tambahan yang relevan.<\/p>\n

            Fungsi Footer:<\/h3>\n
              \n
            • \n

              Memberikan navigasi tambahan<\/strong>: seperti sitemap, kategori, link penting.<\/p>\n<\/li>\n

            • \n

              Menampilkan informasi legal<\/strong>: hak cipta, disclaimer, syarat dan ketentuan.<\/p>\n<\/li>\n

            • \n

              Kontak dan lokasi<\/strong>: alamat kantor, email, atau peta lokasi.<\/p>\n<\/li>\n

            • \n

              Media sosial dan newsletter<\/strong>: ikon untuk mengikuti akun sosial media atau form langganan.<\/p>\n<\/li>\n<\/ul>\n

              Elemen Umum dalam Footer:<\/h3>\n
                \n
              • \n

                Copyright<\/p>\n<\/li>\n

              • \n

                Link ke halaman kebijakan privasi<\/p>\n<\/li>\n

              • \n

                Logo partner<\/p>\n<\/li>\n

              • \n

                Informasi kontak<\/p>\n<\/li>\n

              • \n

                Ikon sosial media<\/p>\n<\/li>\n<\/ul>\n

                Contoh HTML-nya:<\/p>\n\n\t\t<\/div>\n\t<\/div>\n\n\t

                \n\t\t\n\t\t
                \n\t\t\t
                \"struk<\/div>\n\t\t<\/figure>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

                Mengapa Struktur Ini Penting?<\/h2>\n\t
                \n\t\t
                \n\t\t\t
                  \n
                • \n

                  Memudahkan Navigasi<\/strong>
                  Pengunjung website bisa mengenali bagian-bagian penting tanpa harus berpikir ulang setiap kali membuka halaman baru.<\/p>\n<\/li>\n

                • \n

                  Konsistensi Desain<\/strong>
                  Website dengan struktur rapi dan konsisten lebih terlihat profesional dan mudah digunakan.<\/p>\n<\/li>\n

                • \n

                  SEO dan Aksesibilitas<\/strong>
                  Mesin pencari seperti Google juga membaca struktur halaman. Struktur yang jelas akan membantu website kamu lebih mudah ditemukan.<\/p>\n<\/li>\n

                • \n

                  Responsif di Semua Perangkat<\/strong>
                  Struktur yang baik memudahkan desain responsif \u2014 tampilan yang menyesuaikan diri dengan layar HP, tablet, maupun desktop.<\/p>\n<\/li>\n<\/ul>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>

                  \n\t
                  \n\t\t
                  \n\t\t\t

                  Memahami struktur dasar halaman web<\/strong> bukan hanya penting bagi programmer, tapi juga bagi siapa pun yang ingin membangun kehadiran online yang profesional. Dengan mengetahui peran dari header, body, dan footer<\/strong>, kamu bisa membuat website yang lebih terorganisir, ramah pengguna, dan lebih mudah berkembang ke depannya.<\/p>\n

                  Entah kamu membangun website sendiri atau bekerja sama dengan developer, memahami struktur ini akan membuat proses kerja jadi jauh lebih efisien dan terarah.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Ketika kamu membuka sebuah halaman web, mungkin yang terlihat hanya desain menarik, warna-warna yang serasi, atau tulisan yang enak dibaca. Tapi di balik tampilannya, setiap halaman web memiliki struktur dasar yang hampir selalu sama: Header, Body, dan Footer. Memahami struktur ini sangat penting, terutama jika kamu ingin membuat website sendiri, terlibat dalam pengembangan web, atau [...]","protected":false},"author":37,"featured_media":34983,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"wds_primary_category":0,"footnotes":""},"categories":[300],"tags":[1529,1530,1528],"class_list":["post-34972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pendidikan","tag-body","tag-footer","tag-struktur-dasar-halaman-web-header"],"_links":{"self":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/34972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/comments?post=34972"}],"version-history":[{"count":3,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/34972\/revisions"}],"predecessor-version":[{"id":34985,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/posts\/34972\/revisions\/34985"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media\/34983"}],"wp:attachment":[{"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/media?parent=34972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/categories?post=34972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jakarta.telkomuniversity.ac.id\/en\/wp-json\/wp\/v2\/tags?post=34972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}