Elemen Semantik HTML5 ~ KODELOVER

Semantik adalah studi tentang makna kata dan ungkapan dalam bahasa.
Elemen semantik adalah elemen dengan makna.
Apa itu Elemen Semantik?

Elemen semantik dengan jelas menggambarkan artinya browser dan pengembang.

Contoh elemen non-semantik: <div> dan <span> - Tidak memberi tahu apa-apa tentang isinya.

Contoh elemen semantik: <form>, <table>, dan <img> - Jelas mendefinisikan isinya.
Dukungan Browser

Internet Explorer, Firefox, Opera, Google Chrome, Safari.

Elemen semantik HTML5 didukung di semua browser modern.

Selain itu, Anda bisa "mengajarkan" browser lama bagaimana menangani "elemen tak dikenal".

Elemen Semantik Baru di HTML5

Banyak situs web berisi kode HTML seperti: <div id = "nav"> <div class = "header"> <div id = "footer">
untuk menunjukkan navigasi, header, dan footer.

HTML5 menawarkan elemen semantik baru untuk menentukan bagian halaman web yang berbeda:

    <article>
    <aside>
    <detail>
    <figcaption>
    <gambar>
    <footer>
    <header>
    <main>
    <mark>
    <nav>
    <section>
    <summary>
    <time>

Unsur Semantik HTML5

Elemen HTML5 <section>

Elemen <section> mendefinisikan bagian dalam dokumen.

Menurut dokumentasi HTML5 W3C: "Bagian adalah pengelompokan konten tematik, biasanya dengan judul."

Laman beranda situs web dapat dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak.
Contoh

<section>
<h1> WWF </ h1>
<p> World Wide Fund for Nature (WWF) adalah .... </ p>
</ section>

Elemen HTML5 <article>

Elemen <article> menentukan konten mandiri dan mandiri.

Sebuah artikel harus masuk akal dengan sendirinya, dan seharusnya memungkinkan untuk membacanya secara independen dari keseluruhan situs web.

Contoh di mana elemen <article> dapat digunakan:

    Posting forum
    Posting blog
    Artikel koran

Contoh
<article>
<h1> Apa yang Dilakukan WWF? </ h1>
<p> Misi WWF adalah untuk menghentikan degradasi lingkungan alam planet kita,
dan membangun masa depan di mana manusia hidup selaras dengan alam. </ p>
</ article>
Elemen Semantic bersarang

Dalam standar HTML5, elemen <article> mendefinisikan blok elemen terkait yang lengkap dan lengkap.

Elemen <section> didefinisikan sebagai blok elemen terkait.

Bisakah kita menggunakan definisi untuk menentukan bagaimana elemen sarang? Tidak, kita tidak bisa!

Di Internet, Anda akan menemukan halaman HTML dengan elemen <section> yang mengandung elemen <article>, dan elemen <article> mengandung elemen <sections>.

Anda juga akan menemukan halaman dengan elemen <section> yang mengandung elemen <section>, dan elemen <article> mengandung elemen <article>.
Catatan Koran: Artikel olahraga di bagian olahraga, memiliki bagian teknis di setiap artikel.
Elemen HTML5 <header>

Elemen <header> menentukan header untuk dokumen atau bagian.

Elemen <header> harus digunakan sebagai wadah untuk konten pengantar.

Anda dapat memiliki beberapa elemen <header> dalam satu dokumen.

Contoh berikut mendefinisikan sebuah header untuk sebuah artikel:
Contoh

<article>
<header>
<h1> Apa yang Dilakukan WWF? </ h1>
<p> Misi WWF: </ p>
</ header>
<p> Misi WWF adalah untuk menghentikan degradasi lingkungan alam planet kita,
dan membangun masa depan di mana manusia hidup selaras dengan alam. </ p>
</ article>

Elemen HTML5 <footer>

Elemen <footer> menentukan footer untuk dokumen atau bagian.

Elemen <footer> harus berisi informasi tentang elemen yang mengandungnya.

Footer biasanya berisi pengarang dokumen, informasi hak cipta, tautan ke persyaratan penggunaan, informasi kontak, dll.

Anda dapat memiliki beberapa elemen <footer> dalam satu dokumen.
Contoh

<footer>
<p> Diposting oleh: Hege Refsnes </ p>
<p> Informasi kontak: <a href="mailto:someone@example.com">
someone@example.com </a>. </ p>
</ footer>

Elemen HTML5 <nav>

Elemen <nav> mendefinisikan satu set link navigasi.

Elemen <nav> ditujukan untuk blok besar tautan navigasi. Namun, tidak semua tautan dalam dokumen harus berada di dalam elemen <nav>!
Contoh

<nav>
<a href="/html/"> HTML </a> |
<a href="/css/"> CSS </a> |
<a href="/js/"> JavaScript </a> |
<a href="/jquery/"> jQuery </a>
</ nav>

Elemen HTML5 <aside>

Elemen <aside> mendefinisikan beberapa konten selain konten yang ditempatkan di dalamnya (seperti bilah sisi).

Konten samping harus terkait dengan konten sekitarnya.
Contoh

<p> Keluarga saya dan saya mengunjungi The Epcot center musim panas ini. </ p>

<aside>
<h4> Pusat Epcot </ h4>
<p> Epcot Center adalah taman hiburan di Disney World, Florida. </ p>
</ aside>

Elemen HTML5 <gambar> dan <figcaption>

Dalam buku dan surat kabar, biasanya ada teks dengan gambar.

Tujuan keterangan adalah menambahkan penjelasan visual pada sebuah gambar.

Dengan HTML5, gambar dan caption dapat dikelompokkan bersama dalam elemen <figure>:
Contoh

<gambar>
<img src = "pic_mountain.jpg" alt = "Batu Pulpit" width = "304" height = "228">
<figcaption> Fig1. - Batu Pulpit, Norwegia. </ Figcaption>
</ figure>

Elemen <img> mendefinisikan gambar,

KODELOVER

Elemen Semantik HTML5

Related Post