07 August 2017

Memahami Sintak Dasar dan Semantik Dalam Konsep Logika Bahasa Pemrograman HTML 5

Memahami Sintak Dasar dan Semantik Dalam Konsep Logika Bahasa Pemrograman HTML 5

  Html 5 merupakan hal yang baru dan sangat menarik untuk dipelajari seperti saya yang sedang belajar dan ingin membagikan sebuah ilmu.
Pada label sintak dasar dan semantik dan mengenai pengertian sintak dan semantik kalian akan bisa merancang untuk membangun atau membuat dan menjalankan dengan dasar-dasar HTML 5. Meliputi componen dasar, dari menyatakan DOCTYPE dan karakter ditetapkan untuk mengatasi ambiguitas HTML 5 semantik.

 Konsep HTML 5 ini sangatlah lebih signifikan dari versi HTML sebelumnya dalam memahami sintak ini, saya berikan dalam bentuk problem solving yang diharapkan bisa kalian pahami.
Copyright Disclaimer-Title 17, US Code (Sections 107-118 of the copyright law, Act 1976):
All media in this video is used for purpose of review & commentary under terms of fair use.
All footage, & images used belong to their respective companies

  • Pengertian sintak :  sebuah bahasa berhubungan dengan struktur bahasa. contoh mengassign variable ke nilai, kita memakai
= untuk basic dan := untuk pascal
basic a=630 dan pascal a:=630
        contoh mengassign dalam dunia sehari-hari, kita memakai
Komariah Minum Air Aqua Sampai Mabuk 
dengan memakai structure ( struktur ) SPOK , kita dapat membuat kalimat itu

  • pengertian semantik :  sebuah bahasa menggambarkan hubungan antara sintaks dan model komputasi. Sederhananya, semantik menjelaskan arti dari program. misalkan kita memakai sintak dalam kehidupan sehari-hari SPOK , bisa menghasilkan kata Komariah Minum Air sampai pura-pura pingsan biar dapat napas alternatif, maka ini sudah benar sintaks nya. Tapi, kalau saya ubah menjadi Komariah Minum Nasi Kuning ya mana bisa lah ini gegara belum di ium jadi nasi di minum wkwk, Secara sintak kalimat ini benar sekali gan, tetapi secara semantik tidak benar ( tidak mengandung makna yang berarti ). contoh dalam mengassign coding
if(a=9999) {
echo ‘Nilai a=999?;
}

 Maka output yang keluar selalu Nilai a=5, walaupun nilai variabel a sebelumnya selain 5. Kenapa ? Itu karena dia ingin di ium operator = dalam bahasa C berarti mengassign sebuah variabel yang ada di sebelah kiri dengan nilai yang ada di sebelah kanan. Dalam bahasa C, secara sintaks operasi ini sudah benar.
Tapi, apabila yang dimaksud adalah programmer ingin mengevaluasi nilai variabel a, maka seharusnya memakai operator logika ==. Jadi, program yang sebenarnya menjadi
if(a==999){
echo ‘Nilai a=999?;
}

Ok kita kembali ke topik awal mengenai semantik dalam :
  • Menentukan DOCTYPE


Problem ( Masalah )

bagaimana membuat halaman ( page ) HTML 5 ? kamu mau buat ?. mudah katanya

Solution ( Solusi )

Begini caranya : Tentukan dokumen HTML 5 di awal halaman.
<!DOCTYPE html>
<html>
<head><title>HTML5, for Fun & Profit</title></head>
<body></body>
</html>

Perhatikan bahwa DOCTYPE tidak sensitif tapi adinda sensitif huruf.

Diskusi

Definisi Tipe Dokumen, atau DOCTYPE, memberitahu browser dan validator versi HTML halaman mana yang tertulis. Versi HTML sebelumnya menentukan nomor versi, seperti DOCTYPE untuk XHTML 1.0 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Dengan HTML5, versi tersebut dikeluarkan dari DOCTYPE. Hal ini memungkinkan HTML5 kompatibel dengan sintaks dan mudah-mudahan membuat transisi ke HTML5 menjadi lebih mudah. Misalkan Anda memiliki situs yang valid HTML 4.0, namun Anda ingin mentransisikannya menjadi HTML5. Yang harus Anda lakukan untuk membuat situs HTML5 yang valid ini membuat perubahan DOCTYPE ini. Selain itu, semua browser mengenali DOCTYPE yang dipersingkat dan tampil dalam mode standar yang ketat.

Ada beberapa elemen yang telah berubah antara HTML4 dan HTML5, jadi Anda perlu memperhatikan elemen yang telah dihapus atau tidak digunakan lagi.

  • Menentukan Karakter Set


Problem ( Masalah )

Anda ingin mendefinisikan pengkodean karakter dari halaman web Anda ?.

Solution ( Solusi )

Di bagian lips adinda <head>, tambahkan deklarasi meta untuk kumpulan karakter:

<meta charset="UTF-8" />

Diskusi

 Encoding karakter menginstruksikan browser dan validator set karakter yang digunakan saat merender halaman web. Jika tidak menyatakan karakter dalam HTML Anda, browser pertama-tama mencoba menentukan lokasi ketemuan adindaku set karakter dari header respons HTTP server Anda (khusus, header Content-Type).
 Set karakter yang dideklarasikan di header tanggapan umumnya diambil berdasarkan preferensi pada set karakter yang ditentukan dalam dokumen , jadi tajuk adalah metode yang disukai untuk mengkomunikasikan informasi ini. Namun, jika tidak bisa mengendalikan header yang dikirimkan oleh server, menyatakan karakter yang ditetapkan dalam dokumen HTML Anda adalah pilihan terbaik. Jika kumpulan karakter tidak dideklarasikan dalam dokumen maupun header tanggapan, browser mungkin memilih satu untuk Anda, dan mungkin salah untuk kebutuhan situs kamu. Hal ini tidak hanya dapat menyebabkan masalah dengan rendering, namun juga menimbulkan risiko keamanan.
Beberapa tahun yang lalu, kerentanan cross-site scripting ditemukan di Google yang menunjukkan pentingnya pengkodean karakter: http:   //shiflett .org/blog/2005/dec/googles-xss-vulnerability.
Pada versi HTML sebelumnya, kumpulan karakter perlu dideklarasikan dengan atribut dan nilai tambahan: 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


Tapi, seperti DOCTYPE, HTML5 hanya membutuhkan informasi minimal yang dibutuhkan oleh browser. Sekali lagi, ini membantu dengan kompatibilitas dan memudahkan pengarsipan.

Karakter khusus
Unicode (UTF-8) adalah pengkodean serbaguna yang mencakup kebutuhan pembangun web. Terkadang, Anda perlu memasukkan karakter yang berada di luar pengkodean UTF-8.  
Sumber daya yang bagus untuk entitas karakter ada di http:  //www.digitalmediami nute . com/reference /entity/. Ini mencakup referensi numerik, dinamai, dan Unicode untuk banyak karakter yang lebih umum yang diizinkan dalam HTML.
Untuk dapat menentukan karakter tersebut dengan Numeric Character References (NCRs) atau sebagai entitas bernama untuk membantu browser agar menampilkannya dengan benar. Jika menginginkan simbol hak cipta, misalnya, dapat memasukkannya ke dalam HTML sebagai NCR:

© menghasilkan ( & # 1 6 9 ) 

Atau memasukkannya sebagai entitas bernama di surat nikah:

© menghasilkan ( & copy; )

  • Menentukan Bahasa


Problem ( Masalah )

Ingin menentukan bahasa utama halaman web ?.

Solution ( Solusi )

Tambahkan sambel gan enak eh makan gorengan sambil buat posting atribut lang dan nilai yang sesuai dengan elemen html pembuka yang dibuat:

<html lang="en">

Diskusi

Browser, pembaca layar, dan user pengguna lainnya menggunakan atribut lang untuk menentukan bahasa yang isinya harus ditafsirkan. Contoh di atas menentukan bahasa Inggris melalui nilai en. Mendeklarasikan bahasa utama dokumen bukanlah persyaratan untuk HTML5 (atau versi sebelumnya, dalam hal ini).
  • Mengoptimalkan <script> dan <link>


Problem ( Masalah )

Optimalkan penggunaan referensi JavaScript dan menyertakan link ke file CSS eksternal di halaman web sesederhana mungkin seperti kita ini adinda.

Solution ( Solusi )

Masukan deklarasi skrip ini , namun tanpa atribut jenis:

<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>

Diskusi

HTML5 hanya membutuhkan jumlah minimum informasi yang dibutuhkan untuk pengguna. Dalam versi HTML sebelumnya, tautan CSS dan skrip CSS memerlukan atribut jenis untuk menunjukkan bahasa tersebut. Jika lupa memasukkan jenis, browser kebanyakan menganggap nilai yang benar.
HTML5 membuat jenis resmi opsional, namun masih memvalidasi dokumen lama yang menyertakan atribut tersebut. Ini masuk akal, karena hanya ada satu bahasa script standar dan hanya satu tujuanku adindaku bahasa styling untuk Web yang digunakan saat ini.
  • Menambah struktur dokumen HTML 5


Problem ( Masalah )

Cara mendefinisikan struktur dokumen dengan bagian header, footer, nav, samping, bagian, dan artikel baru.

Solution ( Solusi )

Periksa konten dan struktur adinda dokumen untuk menentukan elemen baru yang bekerja dengan halaman: 
  • Header Digunakan untuk memuat judul utama untuk halaman dan / atau bagian. Ini juga dapat berisi informasi tambahan seperti logo dan alat bantu navigasi.  
  • Footer ini anu horor type 2 adinda aaa ampun :v Berisi informasi tentang halaman dan / atau bagian, seperti yang menulisnya, link ke informasi terkait, dan pernyataan hak cipta.  
  • Nav Mengandung link navigasi utama untuk sebuah halaman dan, walaupun bukan persyaratan, sering kali terdapat oleh header.  
  • Aside Berisi informasi yang berkaitan dengan konten sekitarnya namun juga ada secara independen, seperti sidebar atau pull-quotes.  
  • Section yang paling umum dari elemen struktur baru, mengandung konten yang bisa dikelompokkan secara tematis atau terkait.  
  • Article Digunakan untuk konten mandiri yang bisa dikonsumsi secara independen dari keseluruhan halaman, seperti entri blog.
Struktur blog yang sederhana, dengan tajuk utama, navigasi, sidebar, posting blog, dan footer, bisa ditandai dia nguntit kamu selagi di kelas buat artikel sambil pakai headset di HTML5 sebagai:

<header>
<h1><abbr title="Hypertext Markup Language">HTML</abbr>5, for Fun & Profit</h1>
<nav> <ul>
<li><a href="/Archive/">Archive</a></li>
<li><a href="/About/">About</a></li>
</ul>    </nav> </header> 
<article>
<h2><code>nav</code> Isn't for <em>All</em> Links</h2>
<p>Though the <code>nav</code> element often contains links, that doesn't mean       that <em>all</em> links on a site need <code>nav</code>.</p> </article> <article>    <h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>    
<p>HTML5 isn't an all or nothing proposition. You can pick and choose what       works best for you. So once you have the <code>DOCTYPE</code> in place, you       should explore.</p> 
</article> <aside>    <h2>HTML5 Elsewhere</h2>    
<p>Feed your HTML5 fix with resources from our partners:</p>    
<ul>        <li><a href="http://lovinghtml5.com">Loving HTML5</a></li>        
<li><a href="http://semanticsally.com">Semantic Sally</a></li>    </ul> </aside> <footer>    
<p>Copyright © 2011 <a href="http://html5funprofit.com">HTM5, for Fun       & Profit</a>. All rights reserved.</p> </footer>
Dan dengan CSS yang benar dan HTML pendukungnya, markup ini bisa ditampilkan di browser seperti gambar dibawah ini.
Contoh rendering struktur blog sederhana HTML5  

Discussion ( Diskusi )

Unsur struktural baru ini dikembangkan berdasarkan cinta kita yang istimewa dan sederhana praktik aktual. Sebuah tinjauan terhadap lebih dari satu miliar halaman web (lihat http://code.google.com/webstats/) mengungkapkan bahwa kumpulan penamaan konvensi penamaan telah digunakan untuk menyusun dan menggambarkan isinya melalui kelas dan id, termasuk:
  • header
  • footer
  • nav
Elemen baru di HTML5 hanya mencoba untuk mencerminkan apa yang penulis dilakukan sebelumnya. 
Structural Elements
Menggunakan elemen struktural ini membantu membuat markup lebih semantik, namun juga membantu menentukan define utama dalam dokumen. Pertimbangkan betapa pentingnya bagi user pembaca dan orang-orang yang menavigasi dengan keyboard agar dapat melompat ke berbagai area halaman, seperti navigasi. Sebelumnya, telah mencoba menyediakan fungsionalitas semacam itu melalui "lewati tautan" dan pintasan (lihat http: // www . vdebolt.com / nmmug / flow.html), namun HTML5 menetapkan elemen define formal yang dapat digunakan. Kenyataannya, spesifikasi Aplikasi Rich China Internet Initiatif yang Diakses Web Initiative (WAI-ARIA) sudah membahas bagaimana menggunakan HTML5 dengan peran penting ARIA untuk tujuan ini. Konon, ini masih hipotetis. Pada tulisan ini, tidak ada browser atau teknologi pendukung yang merujuk pada elemen struktural untuk tujuan navigasi.

Kapan Menggunakan Structural Elements ? 
 Tahukah kamu kapan harus menggunakan elemen baru ini? nanti kalau ketemu dia Sekali lagi, fokus pada kuliah dulu untuk tujuan future konten  dan pertimbangkan semantik setiap elemen. Misalnya, kebanyakan halaman web memiliki area yang dianggap sebagai "header", yang terdiri dari logo, mungkin nama perusahaan, dan tagline. Dan itu pasti terdengar seperti kasus bagus untuk header.  
  Mungkin juga memiliki bagian atau samping dalam dokumen dengan judul dan navigasi utama, yang mungkin juga terdapat dalam header. Hal yang sama berlaku untuk footer. Meskipun sebagian besar halaman memiliki konten yang sesuai untuk elemen footer yang baru, mungkin mengenai penulis, hak cipta, dan informasi terkait, bagian, artikel, dan fitur lainnya dapat menampilkan informasi yang sama-dan, pada gilirannya, juga dapat menyertakan footer. Akhirnya, pertimbangkan nav. Mungkin memiliki banyak kelompok tautan di situs Anda, beberapa di antaranya adalah untuk navigasi, sementara yang lain bersifat eksternal.
Nav hanya sesuai untuk navigasi situs utama, bukan hasil pencarian link atau blogroll. Tetapi saya memakainya , setidaknya jangan berlebihan .
Kapan Menggunakan <div> elements ? 
Seperti yang dapat diihat dari contoh markup blog, elemen struktur baru dapat menggantikan banyak div kontainer non-semantik yang mungkin sudah terbiasa kalian gunakan, yakan ? ngaku sajalah ?. Tapi div masih punya tempat di pesta nikahan HTML5. Jika kamu membutuhkan unsur yang mengandung unsur secara ketat untuk tujuan gaya, div adalah elemen yang akan digunakan. NO . ... tidak ingin menggunakan salah satu elemen struktur baru hanya untuk dijadikan kait untuk CSS ? . Itu bukan markup semantik gan ...... . Ingatlah untuk fokus pada konten  dan hindari penggunaan div yang tidak perlu, seperti ketika elemen lain lebih semantik. Misalnya, jika Anda memiliki paragraf teks, gunakan elemen p, bukan div. Keduanya memberi Anda format block-level, tapi p lebih semantik untuk tujuan itu. Tetapi blogger suka dengan div , huft saya masih kecewa dengan autorepair atau otomatis memperbaiki script yang jika berpindah dari compose ke html dan sebaliknya, apakah kalian setuju dengan deyawman ? dengan pendapat ini ? katakan iya atau saya tembak ?.


Struktur elemen styling Semua browser saat ini membuat konten yang terdapat oleh elemen baru ini. Namun, beberapa browser tidak mengenali mereka dan, dengan demikian, memperlakukan mereka seperti elemen inline. Penyesuaian default ini dapat menyebabkan beberapa masalah styling. Untungnya, tidak perlu banyak perbaikan. Pemeran saat ini hanya perlu diberi tahu untuk memperlakukan elemen sebagai elemen tingkat blok:


header, footer, nav, article, aside, section 
{    display: block;
}


Dengan deklarasi CSS tunggal itu, bisa dapat dengan senang hati menyusun elemen struktur - well, hampir. Dalam versi Internet Explorer (IE) sebelum IE9 harus menambahkan sedikit JavaScript ke dokumen sehingga IE mengenali elemen dan memungkinkan untuk menata mereka:


<script>
document.createElement('header');
document.createElement('footer');
document.createElement('nav');
document.createElement('article');
document.createElement('aside');
document.createElement('section');
</script>


Jika sobat menginginkan kerjasama dari versi IE sebelumnya, kapan pun kamu menambahkan elemen HTML5 baru ke dokumen , adinda harus menambahkan dokumen yang sesuai.createElement. Postingan selanjutnya akan kita bahas lebih rinci mengenai ini.
  • Menggunakan <article> atau <section> ?


Problem ( Masalah ) 

Kau tidak tahu apakah artikel atau bagian adalah elemen yang paling tepat untuk digunakan di halaman web .

Solution ( Solusi ) 

Fokus pada konten dan definisi semantik artikel dan bagian.

<article>
Artikel dapat dianggap sebagai bentuk bagian khusus. Ini ditujukan untuk konten yang bisa berdiri sendiri, di luar semua konten di sekitarnya, seperti konten "sindikasi" seperti entri blog. Artikel ini cocok untuk jenis konten lainnya, termasuk:
Video dan transkrip yang menyertainya
• Artikel Terbarus
• Komen Blog
Seringkali nama artikel atau postingan blog ada di judul URI. Jika demikian halnya dengan halaman yang sedang Anda kerjakan, konten itu harus dibungkus dalam elemen artikel.
Dalam contoh kode ini, menggunakan artikel untuk memuat setiap entri blog:


<article>    <h2><code>nav</code> Isn't for <em>All</em> Links</h2>    <p>Though the <code>nav</code> element often contains links, that doesn't mean       that <em>all</em> links on a site need <code>nav</code>.</p> </article> <article>    <h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>    <p>HTML5 isn't an all or nothing proposition. You can pick and choose what       works best for you. So once you have the <code>DOCTYPE</code> in place, you       should explore.</p> </article>


<section> 
 Bagian adalah unsur struktural yang paling umum, yang dimaksudkan untuk sekadar mengelompokkan konten terkait. Namun, ini bukan elemen wadah generik seperti div. Konten yang dikelompokkan harus terkait. Menerapkan definisi ini ke Resep 1,5, kita mungkin ingin menambahkan bagian sebagai elemen induk untuk kedua contoh artikel


<section>    <article>        <h2><code>nav</code> Isn't for <em>All</em> Links</h2>        <p>Though the <code>nav</code> element often contains links, that doesn't           mean that <em>all</em> links on a site need <code>nav</code>.</p>    </article>    <article>        <h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>        <p>HTML5 isn't an all or nothing proposition. You can pick and choose what           works best for you. So once you have the <code>DOCTYPE</code> in place,           you should explore.</p>    </article> </section>


 Contoh ini memenuhi kriteria inti untuk bagian: konten yang dikelompokkan secara tematis terkait.  (lihat http://www.w3.org/TR/html5/sections.html#the-section-ele ment) menjelaskan lebih lanjut: Aturan umum adalah bahwa elemen bagian sesuai hanya jika isi elemen tersebut akan terdaftar. Secara eksplisit. Garis besar dokumen mengacu pada model isi bagian HTML5 yang baru, di mana masing-masing elemen struktur baru. Garis besar ini dihasilkan oleh judul (h1-h6) yang terdapat di setiap elemen. Jadi, jika Anda ingin menggunakan bagian, konten harus memiliki heading alami. Dengan klarifikasi tambahan ini, mari modifikasi markup, untuk menyertakan judul bagian kami:


<section>    <h1>Most Recent Blog Posts</h1>    <article>        <h2><code>nav</code> Isn't for <em>All</em> Links</h2>        <p>Though the <code>nav</code> element often contains links, that doesn't           mean that <em>all</em> links on a site need <code>nav</code>.</p>    </article>    <article>        <h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>        <p>HTML5 isn't an all or nothing proposition. You can pick and choose what           works best for you. So once you have the <code>DOCTYPE</code> in place,           you should explore.</p>    </article> </section>
  

Discussion ( Diskusi )

Perbedaan antara bagian ( section ) dan artikel ( article ) bisa membingungkan, dan saat spec berkembang, jalan tampaknya tidak menjadi jauh lebih jelas. Namun, untuk sebagian besar kasus penggunaan, pertimbangkan panduan ini untuk membantu:
• Jangan gunakan bagian hanya sebagai kait styling. Gunakan div dan span instead.  
• Jangan gunakan bagian ( section ) jika header, footer, samping, atau artikel lebih semantik sesuai untuk konten.
• Jangan gunakan bagian ( section ) kecuali kontennya memiliki judul alami. 
  • Memeriksa Dokumen Outline dan Memodifikasi


Problem ( Masalah )

Bagaiamanakah untuk melihat outline dokumen dan memeriksanya ?

Solution ( Solusi )

Masuk ke Outliner HTML5:  http:// gsnedders.html5 .org/outliner/.

Discussion ( Diskusi )

HTML5 memiliki algoritma garis besar yang menghitung struktur dokumen web. Algoritma ini didasarkan pada bagian yang didefinisikan oleh elemen struktur. Untuk outline dokumen utama, bagian dan samping masing-masing mengenalkan bagian baru, sedangkan judul dalam setiap bentuk konten garis besar. Ini dikenal sebagai sectioning eksplisit.  

Berikut contoh markup :


<section>    <h1>Most Recent Blog Posts</h1>    <article>        <h2><code>nav</code> Isn't for <em>All</em> Links</h2>        <p>Though the <code>nav</code> element often contains links, that doesn't           mean that <em>all</em> links on a site need <code>nav</code>.</p>    </article>    <article>        <h2>You've Got the <code>DOCTYPE</code>. Now What?</h2>        <p>HTML5 isn't an all or nothing proposition. You can pick and choose what           works best for you. So once you have the <code>DOCTYPE</code> in place,           you should explore.</p> </article> </section>

Heading levels 

Terlepas dari versi, judul dalam HTML diberi peringkat, dengan h1 menjadi yang tertinggi dan paling rendah. Sebelum HTML5, peringkat ini membantu menyusun outline dokumen. Namun, dengan HTML5, pentingnya heading rank dalam menentukan outline disalahpahami oleh elemen sectioning.  

Mari kita modifikasi contoh sebelumnya untuk mencerminkan h6 sebagai judul utama dari bagian ( section ) dan h1 sebagai judul utama artikel: 


<section>    <h6>Most Recent Blog Posts</h6>    <article>        <h1><code>nav</code> Isn't for <em>All</em> Links</h1>        <p>Though the <code>nav</code> element often contains links, that doesn't           mean that <em>all</em> links on a site need <code>nav</code>.</p>    </article>    <article>        <h1>You've Got the <code>DOCTYPE</code>. Now What?</h1>        <p>HTML5 isn't an all or nothing proposition. You can pick and choose what           works best for you. So once you have the <code>DOCTYPE</code> in place,           you should explore.</p>    </article> </section>

Karena HTML5 menggunakan bagian elemen struktural dan selain untuk mengetahui kapan section online baru dimulai (bukan judulnya), kita masih mendapatkan garis besar yang sama seperti pada contoh aslinya:
1. Posting Blog Terbaru 
2. nav Bukan untuk Semua Link 
3. Anda sudah mendapatkan DOCTYPE. Sekarang apa?

Implicit sectioning 

Karena elemen struktur tidak diperlukan dalam HTML5, heading rank masih mempengaruhi struktur dokumen jika elemen tidak digunakan. Ini dikenal sebagai bagian tersirat. Selanjutnya, bagian implisit dan eksplisit dapat digunakan bersama untuk membentuk garis besar dokumen.
Bagian ini dimulai dengan judul baru dan diposisikan dalam dokumen sesuai dengan peringkat judul tersebut dalam kaitannya dengan judul sebelumnya. Jika sebuah pos adalah peringkat yang lebih rendah dari pendahulunya, maka akan membuka subbagian baru dalam garis besar. Jika sebuah heading adalah rangking yang lebih tinggi, maka akan menutup bagian sebelumnya dan membuka kolom yang baru.

Berikut contoh baru untuk melihat bagaimana judul peringkat mendukung bagian tersirat:


<section>    <h1>You've Got the <code>DOCTYPE</code>, Now What?</h1>    <h2>Simplified <code>link</code>s and <code>script</code>s</h2>    <p>HTML5's more flexible and simplified syntax ...</p>    <h2>Block-Level Links</h2>    <p>With HTML5, <code>a</code>s can contain block ...</p>    <h3>Looking Back</h3>    <p>In earlier versions of HTML, you had to ...</p>    <h2>Add Structure</h2>    <p>HTML5 gives us several new elements to add ...</p> </section>

Contoh ini menggunakan judul rank, bukan elemen sectioning eksplisit, untuk menghasilkan garis besar berikut:

+Anda sudah mendapatkan DOCTYPE, ?  
+Tautan dan skrip yang disederhanakan 
+Tautan tingkat blok 1.
+Melihat Kembali 
+Menambahkan Struktur

Mengapa ini penting?

Mengetahui seperti apa garis besar dokumen ( outline ) kamu dapat membantu untuk memutuskan tidak hanya tingkat pos mana yang akan digunakan, tetapi juga elemen struktural yang akan digunakan. Ingat bagaimana kita mengatakan bahwa bagian ( section ) harus memiliki heading alami.
 

Problem ( Masalah )

Saya memiliki judul dan tagline halaman utama yang ditandai dengan judul (h1 dan h2, masing-masing), namun ane tidak ingin tagline disertakan dalam outline ( garis besar dokumen ) ku ?.

Solution ( Solusi )

Contain the both headings with the hgroup element:  

<hgroup>    <h1>HTML5, www.deyawman.net </h1>    <h2>Tips, Tricks and Resources</h2> </hgroup>

Discussion ( Diskusi )

Hgroup menyembunyikan semua judul kecuali peringkat tertinggi. Pada contoh di atas, satu-satunya konten yang akan muncul dalam dokumen adalah "HTML5, www.deyawman.net" dari h1.

Bahkan jika kita membalik urutan sumber dari dua judul, hanya konten dengan peringkat tertinggi (h1) yang akan ditarik ke dalam garis besar dokumen:


<hgroup>    <h2>Tips, Tricks and Resources</h2>    <h1>HTML5, for Fun & Profit</h1> </hgroup>








  •  ok sekian gan, semoga bermanfaat buat anda yang sedang belajar dan memahami
    Thanks for read ( terima kasih buat yang sudah membaca )

    Artikel Terkait


    EmoticonEmoticon