#64 Cara memisahkan elemen konten pada html

pada tutorial ini kita akan belajar cara memisahkan elemen konten pada html.

ketika tata letak yang secara visual belum berkembang biasanya programmer menggunakan tag non-semantik seperti tag <div>.

Baca juga: Perbedaan tag dan elemen pada html

mereka sering memberikan elemen <div> yang diberi sebuah atribut class atau id untuk menggambarkan sebuah bagian elemen. misalnya tag html5 <header> sering ditulis sebagai <div class=”header”>.

elemen HTML semantik adalah elemen yang jelas untuk menggambarkan maknanya dengan cara dapat dibaca oleh manusia atau mesin pencari.

ada beberapa elemen semantik yang ditambahkan dalam HTML5 antara lain:

elemen <nav>

Elemen ini digunakan untuk bagian yang berisi blok navigasi utama situs web.

Didalam elemen terdapat link ke bagian halaman lain dari web, daftar isi atau dokumen lain.

ada beberapa jenis penulisan sintaks <nav>, antara lain sebagai berikut.

Inline items

navigasi menampilkan dalam bentuk horizontal

    <h3>Berikut ini beberapa situs website terkenal</h1>
    <nav>
        <a href="https://google.com">Google</a>,
        <a href="https://facebook.com">Facebook</a>,
        <a href="https://twitter.com">Twitter</a>
    </nav>Code language: HTML, XML (xml)

list items

Jika konten mewakili daftar item, gunakan list item untuk menunjukan daftar item yang akan meningkatkan pengalaman pengguna.

kita perlu menambahkan role=”navigation” seperti dibawah ini

    <nav role="navigation">
        <ul>
            <li><a href="https://thohirdev.com/tutorial/html/">HTML</a></li>
            <li><a href="https://thohirdev.com/tutorial/css/">CSS</a></li>
            <li><a href="https://thohirdev.com/tutorial/javascript/">Javascript</a></li>
        </ul>
    </nav>Code language: HTML, XML (xml)

jika kita perhatikan ada atribut role=”navigation”

atribut itu namanya screen readers ( pembaca layar ) yang memungkinkan software ( aplikasi ) membaca teks untuk pengguna tunanetra menavigasi situs.

software akan membaca layar kemudian menafsirkan elemen <nav> secara berbeda tergantung pada kebutuhan mereka.

elemen <nav> menjadi prioritas yang lebih tinggi saat merender halaman karena pengguna bisa mengetahui halaman lain di website tersebut.

membuat teks lebih besar di dalam elemen <nav> membuatnya berguna untuk seseorang yang memiliki gangguan penglihatan.

Apabila memiliki daftar tautan kebagian halaman lain seperti FAQ, Term & Condition, dll. cukup menambahkan elemen <footer> tanpa perlu menggunakan elemen <nav>

contoh penggunaan yang tidak perlu

    <footer>
        <nav>
            <a href="/about">About</a>
            <a href="/faq">FAQ</a>
            <a href="/disclaimer">Disclaimer</a>
        </nav>
    </footer>Code language: HTML, XML (xml)

penggunaan yang disarankan cukup menggunakan footer saja.

    <footer>
        <a href="/about">About</a>
        <a href="/faq">FAQ</a>
        <a href="/disclaimer">Disclaimer</a>
    </footer>Code language: HTML, XML (xml)

elemen <article>

article digunakan untuk memberi mark up sebuah konten yang berdiri sendiri sebagai sebuah konten utuh.

contoh penggunaan <article> seperti postingan forum, postingan blog, kabar berita, komentar pengguna atau interaktif

didalam <article> bisa juga terdapat <article> yang lain,asalkan <article> tersebut berkaitan dengan induk artikelnya.

contoh sebuah blog bisa menggunakan <section> dengan banyak postingan <article> dan komentar <article> akan terlihat seperti dibawah ini.

    <section>
        <!-- setiap postingan blog <article> -->
        <article>
            <header>
                <h1>Judul Blog</h1>
                <time datetime="2021-10-10">10 Oktober 2021</time>
            </header>
            <p>
                artikel yang memuat postingan blog
            </p>
            <p>
                isi artikel ini sudah di kelompokan di dalam tag article
            </p>
            <section>
                <h2>komentar <small>yang berkaitan dengan "Judul Blog"</small></h2>
                <!-- komentar terkait dengan induk article -->
                <article id="user-comment-1">
                    <p>
                        Menarik
                    </p>
                    <footer>
                        <p>
                            Pekalongan
                        </p>
                        <time>11 Oktober 2021</time>
                    </footer>
                </article>
            </section>
        </article>
        <!-- ./ulangi: <article> -->
    </section>Code language: HTML, XML (xml)

Apabila sebuah konten utama halaman yang didalamnya tidak ada header, footer, navigation, dll.

hanya satu tag grup saja maka kita bisa menghilangkan <article> untuk elemen utama <main>

    <article>
        <p> ini tidak termasuk artikel melainkan konten utama </p>
    </article>Code language: HTML, XML (xml)

sebagai gantinya, ganti <article> dengan menggunakan elemen <main> untuk menunjukan bahwa ini adalah konten utama dari halaman ini.

    <main>
        <p> ini adalah konten utama bukan sebuah artikel </p>
    </main>Code language: HTML, XML (xml)

apabila konten utama di dalam sebuah article maka gunakan <section> karena <main> tidak disarankan didalam <article>, namun bisa menggunakan role=”main” seperti dibawah ini.

    <section role="main">
        <p> ini adalah konten utama sebuah artikel </p>
    </section>Code language: HTML, XML (xml)

elemen main

<main> berisi konten utama halaman website, konten ini unik artinya hanya boleh digunakan satu kali pada satu halaman.

tidak boleh muncul ditempat lain seperti didalam header, footer, nav, dll. karena <main> ditempatkan diluar elemen.

contoh dalam sebuah halaman postingan blog seperti informasi terkait dan komentar

<body>
    <header>
        <nav>...</nav>
    </header>
    <main>
        <h1>Judul Blog</h1>
        <p>Paragraf artikel</p>
        
        <article>
            <h2>Referensi</h2>
            <p>...</p>
        </article>
        
        <article>
            <h2>Komentar</h2>
        </article>
    </main>
    <footer>...</footer>
</body>Code language: HTML, XML (xml)

Postingan blog terdapat didalam elemen <main> untuk menunjukan bahwa itu termasuk konten utama halaman dan unik di seluruh situs tersebut.

tag <header> dan <footer> adalah saudara kandung dari elemen <main>

pada HTML5 elemen <main> sebagai elemen pengelompokan dan bukan bagian dari elemen.

gunakan role=”main” jika konten dimaksudkan sebagai konten utama agar membantu pengguna membaca arti konteks tersebut.

elemen <header>

<header> mewakili konten pengantar artikel atau navigasi menu.

tidak disarankan menggunakan <header> untuk membagi konten.

contoh penggunaan <header>

    <header>
        <p>Selamat datang di website pribadi</p>
        <h1>Muhammad Thohir</h1>
    </header>Code language: HTML, XML (xml)

contoh lain dalam sebuah artikel

    <article>
        <header>
            <h1>Panduan belajar HTML</h1>
        </header>
        <p>Belajar HTML termasuk wajib dipelajari dalam membuat website</p>
    </article>Code language: HTML, XML (xml)

elemen <footer>

<footer> biasanya berisi bagian footer halaman

contoh penggunaan elemen <footer>

    <footer>
        <p>All rights reserved</p>
    </footer>Code language: HTML, XML (xml)

elemen <section>

<section> mewakili bagian umum untuk mengelompokan konten, setiap bagian section biasanya dapat di identifikasikan dengan elemen heading sebagai anak dari bagian tersebut.

kita bisa menggunakan elemen <section> didalam <article> atau sebaliknya diluar article.

jangan gunakan <section> sebagai wadah umum, tetapi gunakan tag <div> untuk membungkus sebuah konten umum.

contoh penggunaan <section>

<body>
    <article>
        <header>
            <h1>Judul Blog</h1>
        </header>
        <p>
            Sebuah pengantar postingan
        </p>
        <section>
            <h3>Bagian 1</h3>
            <p>
                ...
            </p>
        </section>
        <section>
            <h3>Bagian 2</h3>
            <p>
                ...
            </p>
        </section>
        <section>
            <h3>Bagian 3</h3> ...
        </sectio>
    </article>
</body>Code language: HTML, XML (xml)

elemen <aside>

<aside> merupakan tag yang digunakan sebagai pendukung konten utama. biasanya terletak di samping koten yang terkait.

tag ini tidak istimewa hanya dapat digunakan untuk menata tampilan dengan CSS.

elemen ini sering ditampilkan sebagai sidebar.

<!DOCTYPE html>
<html>
<head>
    <title> tag aside pada html </title>

    <style>
        aside {
            width: 40%;
            padding-left: .5rem;
            margin-left: .5rem;
            float: right;
            box-shadow: inset 5px 0 5px -5px #29627e;
            font-style: italic;
            color: #29627e;
        }

        aside > p {
            margin: .5rem;
        }
    </style>
</head>
<body>
    <h1>Selamat datang di website thohirdev.com</h1>
    <aside>
        <p>
            sidebar akan muncul disamping konten
        </p>
    </aside>
    <p>
        ini adalah sebuah konten yang berisi pembelajaran tutorial html dari awal sampai akhir
    </p>
</body>
</html>Code language: HTML, XML (xml)