Saatnya kita berbicara tentang semantik HTML, makna dibalik penamaan elemen HTML.
Definisi 1
Semantik adalah makna tersirat dari subjek, seperti sebuah kata atau kalimat. Hal ini membantu manusia menafsirkan bahasa mesin.
Definisi 2
Semantik adalah studi tentang makna kata dan frase dalam suatu bahasa, tak terlepas bahasa pemrogrman.
Semantik dapat membantu manusia / developer dalam menafsirkan tujuan tag HTML. HTML melayani keduanya (manusia dan mesin), disamping itu juga membantu menunjukan / menavigasi markup dengan mudah, mendokumentasikan lebih rapi dan terstruktur, sehingga manfaat kemudahan tersebut memungkinkan framework dapat berkembang / dikembangkan secara global atau populer dan jauh dari kata discontinue. (singkatnya laku keras).
Suatu semantik elemen harus mendeskripsikan secara jelas isi yang terkandung. Berikut ini akan kami tunjukan seperti apa perbedaan antara sematik dengan non semantik;
<div>...<div> dan <span>...</span>
Kedua elemen diatas bukan merupakan semantik, karena tidak jelas mendeskripsikan isi yang terkandung di dalamnya, bisa jadi artikel, tabel, gambar, video, dll. Kedua elemen di atas paling sering dijumpai pada template blog atau blogger.
<head>...</head>, <body>...<body> dan <a>...</a> misalnya,
Kedua elemen di atas head dan body merupakan semantik, karena jelas mendefinisikan apa saja yang terkandung di dalamnya, seperti menunjukan sebuah kategori, sedangkan elemen a mendefinisikan content sebagai link atau alamat, ditandai dengan atribut utama href.
Di bawah ini merupakan tugas pertama saya pada mata kuliah pemrograman web di semester 1, bertujuan agar mahasiswa dapat memahami maksud semantik pada suatu template web.
Lakukan langkah berikut ini:
1). Browsing desain template sesuai selera Anda, dan download.
Download Template
2). Jika ingin melihat seperti apa demo templatenya, silakan buka file yang telah didownload menggunakan browser yang telah Anda miliki.
Demo Template
3). Untuk mengedit struktur templatenya, silakan buka dengan aplikasi notepad++
Edit Template
4). Hasilnya
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <!-- Ini merupakan semantik elemen head, mendokumentasikan content di dalamnya sebagai kategori kepala web -->
<title>MusicShow</title> <!-- ini merupakan semantik elemen title, menerangkan bahwa MusicShow adalah judul dari web -->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body> <!-- Ini merupakan semantik elemen body, mendokumentasikan content di dalamnya sebagai kategori badan web -->
<div id="main">
<div id="header">
<div id="menu">
<a href="http://all-free-download.com/free-website-templates/">SHOP</a> <!-- Ini merupakan semantik elemen a, mendefinisikan content sebagai link atau alamat untuk tujuan navigasi SHOP -->
<a href="http://all-free-download.com/free-website-templates/">DJS </a> <a href="http://all-free-download.com/free-website-templates/">GALLERY </a> <a href="http://all-free-download.com/free-website-templates/">AGENDA</a> <a href="http://all-free-download.com/free-website-templates/">ABOUT US</a> <a href="http://all-free-download.com/free-website-templates/">HOME</a> </div>
<div id="header-Bottom">
<div id="logoBlock">
<h1>MusicShow</h1> <!-- Ini merupakan semantik elemen h1, mendefinisikan MusicShow sebagai judul paling penting/utama/prioritas no.1 -->
<p>Free CSS Template</p> <!-- Ini merupakan semantik elemen p, mendefinisikan kalimat-kalimat di dalamnya sebagai paragraph -->
</div>
<div id="navBlock">
<h3>Sub Navigation</h3> <!-- Ini merupakan semantik elemen h3, mendefinisikan "Sub Navigation" sebagai sub judul/minor/tingkat kepentingan no.3 -->
<a href="http://all-free-download.com/free-website-templates/">Free music videos </a> <a href="http://all-free-download.com/free-website-templates/">mp3 players</a> <a href="http://all-free-download.com/free-website-templates/">videos</a> <a href="http://all-free-download.com/free-website-templates/">photos</a> <a href="http://all-free-download.com/free-website-templates/">charts </a> <a href="http://all-free-download.com/free-website-templates/">contacts</a> <a href="http://all-free-download.com/free-website-templates/">charts</a> <a href="http://all-free-download.com/free-website-templates/">forums</a> <a href="http://all-free-download.com/free-website-templates/">lyrics</a> <a href="http://all-free-download.com/free-website-templates/">song by artis</a> <a href="http://all-free-download.com/free-website-templates/">song by albums </a> <a href="http://all-free-download.com/free-website-templates/">song by aphabet </a> </div>
</div>
</div>
<div id="mainCont">
<div id="leftCol">
<div id="welcomeBox">
<h3>Free Music Downloads</h3>
<p>Want to refresh your playlist without spending a dime? Well, you're in luck because<span>MTV.com</span> has lots of free music downloads just for you. Yes, you heard us right, you can get free music downloads right here! They'll cost you nothing, nada, zip, zero! And...Want to refresh your playlist without spending a dime? Well, you're in luck because MTV.com has lots of free music downloads just for you. Yes, you heard us right, you can get free music downloads right here! </p>
<h5>Read Full Description</h5> <!-- Ini merupakan semantik elemen h5, mendefinisikan "Read Full Description" sebagai sub judul/minor/tingkat kepentingan no.5, dalam html, tingkat kepentingan judul paling bawah ditandai dengan tag h6 -->
<p>MTV podcasts are here! Score audio and video podcasts for your PC or portable media device.Get unlimited downloads from all your favorite bands and shows. Check out <span>MTV</span> on <span>Rhapsody.com.</span></p>
</div>
<div id="playListTop">
<h3>FEATURED VIDEOS</h3>
</div>
<div id="playListBody">
<div class="head">
<p class="left">PLAY</p>
<p class="centr">TRACK</p>
<p class="right">ARTIST</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Broken Heart</p>
<p class="artist">Bon Jovi</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">All i need</p>
<p class="artist">Method Man</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Broken Heart</p>
<p class="artist">Bon Jovi</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">All i need</p>
<p class="artist">Method Man</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Broken Heart</p>
<p class="artist">Bon Jovi</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">All i need</p>
<p class="artist">Method Man</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListDark">
<p class="play"></p>
<p class="track">Jelousy</p>
<p class="artist">Bald Man</p>
</div>
<div class="playListLight">
<p class="play"></p>
<p class="track">Soul On fire</p>
<p class="artist">Spiritualized</p>
</div>
<div class="playListLight">
<p class="bot"> </p>
</div>
</div>
<div id="playListBot"></div>
</div>
<div id="centrCol">
<div class="banr"><img src="images/main_banr.jpg" width="275" height="182" border="0" alt="" /></div>
<div id="albmBlock">
<div id="albmBox">
<div class="topCont">
<h1><img src="images/lyf.gif" border="0" alt="" /></h1> <!-- Ini merupakan semantik elemen h1, mendefinisikan bahwa gambar tersebut sebagai gambar judul paling penting/utama/prioritas no.1 -->
<a href="http://all-free-download.com/free-website-templates/" class="headings">LYFE CHANGE <span>Lyfe Jennings</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
<div id="albmBox2">
<div class="topCont">
<h1><img src="images/rock.gif" width="61" height="56" alt="" /></h1>
<a href="http://all-free-download.com/free-website-templates/" class="headings">ROCKBERRY <span>Duffy</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
<div id="albmBox3">
<div class="topCont">
<h1><img src="images/that_day.gif" width="63" height="54" alt="" /></h1>
<a href="http://all-free-download.com/free-website-templates/" class="headings">THAT DAY WILL <span>Jungle. Various Artists</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
<div id="albmBox4" class="totalheight">
<div class="topCont">
<h1><img src="images/lyf.gif" border="0" alt="" /></h1>
<a href="http://all-free-download.com/free-website-templates/" class="headings">ROCKBERRY <span>Duffy</span></a></div>
<div class="botCont"> <a class="left" href="http://all-free-download.com/free-website-templates/">play</a> <a class="right" href="http://all-free-download.com/free-website-templates/">view details</a> </div>
</div>
</div>
</div>
<div id="rightCol">
<div id="videoBlock">
<div id="videoBlockTop">
<h3>FEATURED VIDEOS</h3>
<p>The latest music, videos, exclusive live footage interviews and more</p>
</div>
<div id="videoBlockBody">
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/dj_design.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>AMP LIVE</b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/amp_live.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>BLACK SPADE </b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/miller.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/black.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/dj_design.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>AIR BOURNE</b></p>
<p class="light">"Behind The Scene Featurette"</p>
<p class="dark">File under.Music Video</p>
</div>
<p class="rightBox"><img src="images/air_bourn.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>DJ DESIGN</b></p>
<p class="light">Great Album Podcast (main version)</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/ozo_matli.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>TOMC3</b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Great Albums</p>
</div>
<p class="rightBox"><img src="images/tomc3.gif" width="81" height="38" border="0" alt="" /></p>
</div>
<div class="vidBox">
<div class="leftBox">
<p class="bold"><b>VAN HUNT</b></p>
<p class="light">Great Album Podcast</p>
<p class="dark">File under.Interview</p>
</div>
<p class="rightBox"><img src="images/van_hint.gif" width="81" height="38" border="0" alt="" /></p>
</div>
</div>
</div>
<div id="videoBlockBot"></div>
</div>
</div>
<div id="footer">
<div id="footerMenu"> <a href="http://all-free-download.com/free-website-templates/">HOME</a><a href="http://all-free-download.com/free-website-templates/">ABOUT US</a> <a href="http://all-free-download.com/free-website-templates/">AGENDA</a><a href="http://all-free-download.com/free-website-templates/">DJS </a> <a href="http://all-free-download.com/free-website-templates/">GALLERY </a><a href="http://all-free-download.com/free-website-templates/">SHOP </a></div>
<div class="rights">Copyright © gatewan.com 2003-2008 <a href="http://www.gatewan.com/">GATEWAN<a>All Rights Reserved.</div>
<div class="rights">Designed by: <a href="http://www.elegant-templates.com">Elegant Templates</a></div>
</div>
</div>
<div align=center>This template downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div></body>
<!-- Penjelasan tag pada komentar di atas, telah mewakili maksud dari tag-tag serupa lainnya
terimakasih, salam cendekia muda -->
</html>
Referensi:
