Apa itu Semantic Meaning atau Arti Semantik?

semantic meaning adalah studi mengenai arti kata-kata dan frasa (gabungan dua kata atau lebih yg bersifat nonpredikatif) pada sebuah bahasa.

semantic secara tidak langsung menyatakan arti sebuah subjek seperti kata-kata atau kalimat-kalimat. Studi tersebut mencakup seberapa penting arti kata-kata tersebut dapat dipahami oleh manusia.


Apa itu semantic elements dalam HTML5?

Dalam HTML5, kita mengenal istilah "semantic elements" atau elemen-elemen yang memiliki arti semantik.

Lihat 2 contoh berikut, dan perhatikan perbedaannya:

Contoh 1

<div class="article">
<p>konten artikel Anda disini</p>
</div>

Contoh 2

<article>
<p>konten artikel Anda disini</p>
</article>

Menurut Anda, manakah yang lebih berarti dan mudah dimengerti?

Jelas sekali, jawabannya adalah Contoh 2. <article> adalah satu dari sekian element yang memiliki arti semantic yang baru diperkenalkan pada HTML5, memiliki arti lebih spesifik dan mudah dipahami yang menunjukkan konten sebuah artikel.

Semantic elements lainnya dapat dilihat pada contoh dibawah ini:

Contoh HTML5 Semantic Format

Berikut contoh konten (markup) menggunakan dasar HTML5 element secara semantic.

HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>Mengenal Web Standar - HTML5 Semantic apacara.com</title>
  </head>
  <body>
    <header>
      <h1>Belajar Bersama dul</h1>
      <nav>
        <ul>
          <li><a href="#">Artikel Terbaru</a></li>
          <li><a href="#">Artikel Populer</a></li>
        </ul>
      </nav>
    </header>

    <main id="content">
      <article>
        <header>
          <h2>Mengenal Web Standard</h2>
          <p>Ditulis oleh: dul,
            <time datetime="2017-03-07T13:00">07 Maret 2017, pkl. 13:00</time>
          </p>
        </header>
        <p>
          Apa itu Web Standard? Web Standard adalah teknologi yang dibangun oleh W3C dan lainnya yang dikembangkan untuk menginterpretasikan konten web agar memiliki standar yang dapat dinikmati oleh semua kalangan dan dapat diakses di semua <em>device</em> (smartphone, tablet, desktop dan lain sebagainya).
        </p>

        <aside>
          <h3>Istilah Kata:</h3>
          <dl>
            <dt>W3C</dt>
            <dd>World Wide Web Consortium. Organisasi dunia yang mengelola dan membakukan web standard.</dd>
          </dl>
        </aside>

        <section>
          <h3>Komentar</h3>
          <p>Berkomentarlah dengan bijak!</p>
        </section>

      </article>
    </main>

    <aside>
      <h3>Arsip</h3>
      <ul>
        <li><a href="#">Maret 2017</a></li>
        <li><a href="#">Februari 2017</a></li>
      </ul>
    </aside>

    <footer>
      <p>&copy; 2017 apacara.com. All Rights Reserved.</p>
    </footer>
  </body>
</html>
  
SHARE