Komentar: HTML5 juga menambahkan beberapa elemen level blok semantik murni: dialog gambar saya telah menggunakan dua elemen pertama dalam artikel dan buku saya. Elemen ketiga yang tidak sering saya gunakan, ini terutama digunakan dalam teks tertulis. Selain elemen selain mewakili deskripsi, petunjuk, bilah samping, kutipan, komentar tambahan, dll., yaitu konten di luar garis utama narasi. Misalnya, di pengembang
HTML5 juga menambahkan beberapa elemen tingkat blok semantik murni:di samping dialog gambar
Saya telah menggunakan dua elemen pertama dalam artikel dan buku saya. Elemen ketiga yang tidak sering saya gunakan, ini terutama digunakan dalam teks tertulis.
ke samping
Elemen samping mewakili deskripsi, petunjuk, bilah samping, kutipan, komentar tambahan, dll., Yaitu konten di luar jalur utama narasi. Misalnya, dalam artikel pengembang, Anda sering melihat bilah samping yang ditulis dalam bentuk tabel, lihat Kode 3, sidebar pengembang yang ditulis dalam HTML4.
<tablealign = rightborder = 0cellpadding = 0cellpacing = 0width = 40%>
<tbody> <tr> <tdwidth = 10>
<imgalt = src = // www.ibm.com/i/c.gifheight=1width=10> </td>
<td>
<TABLEBORDER = 1CELLPADDING = 5CELLPACING = 0WIDTH = 100%>
<tbody> <tr> <tdbgcolor =#eeeeeee>
<p> <aname = xf-value> <spanclass = smallTitle> .xf-value </span> </a> </p>
<p>
<Codetype = inline> .xf-value </code> selector digunakan herestyestheinput
FieldValueButnotitsLabel. Ini sebenarnya mungkin
withthecurrentcss3draft.theexamplereally harus menggunakannya
<codetype = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<TABLEBORDER = 0CELLPADDING = 0CELLPACING = 0WIDTH = 100%>
<tbody> <tr> <tdclass = code-outline>
<preclass = displayCode> input :: value {width: 20em;}
#ccnumber :: value {width: 18em}
#zip :: value {width: 12em}
#state :: value {width: 3em} </pre>
</td> </tr> </tbody> </able> <br>
<p>
Namun, Firefox tidak memiliki tyetsupport Thissyntax.
</p>
</td> </tr> </able>
Di HTML5, Anda dapat menulis bilah sisi ini dengan cara yang lebih bermakna, lihat Code 4 Developerworks Sidebar yang ditulis dalam HTML5.
<sander>
<h3> .xf-value </h3>
<p>
<Codetype = inline> .xf-value </code> selector digunakan herestyestheinput
FieldValueButnotitsLabel. Ini sebenarnya mungkin
withthecurrentcss3draft.theexamplereally harus menggunakannya
<codetype = inline> :: value </code> pseudo-classinsteadlikeso:
</p>
<preclass = displayCode> input :: value {width: 20em;}
#ccnumber :: value {width: 18em}
#zip :: value {width: 12em}
#state :: value {width: 3em} </pre>
<p>
Namun, Firefox tidak memiliki tyetsupport Thissyntax.
</p>
</side>
Browser dapat memutuskan di mana harus meletakkan sidebar ini (mungkin memerlukan kode CSS kecil).
Angka
Elemen gambar mewakili gambar tingkat blok dan juga dapat mencakup deskripsi. Misalnya, dalam banyak artikel pengembang, Anda dapat melihat bahwa hasil pelabelan kode 5 dari diagram pengembang yang ditulis dalam HTML4 ditunjukkan pada Gambar 1.
<name = gbr2> <b> figure2.installmozillaxformsdialog </b> </a> <br/>
<imgalt = AwebebsiteisRequestPerMissionToinstalltheffollowingitem:
Mozillaxforms0.7unsigned
src = installDialog.jpgborder = 0Height = 317hspace = 5vspace = 5width = 331/>
<br/>
Gambar 1. InstallmozillaxformsDialog
Di HTML5, Anda dapat menulis diagram ini dengan cara yang lebih semantik, lihat diagram Code 6 DeveloperWorks yang ditulis dalam HTML5.
<figureD = gbr2>
<fegend> figure2.installmozillaxformsdialog </agendang>
<imgalt = AwebebsiteisRequestPerMissionToinstalltheffollowingitem:
Mozillaxforms0.7unsigned
src = installDialog.jpgborder = 0Height = 317hspace = 5vspace = 5width = 331/>
</tigur>
Yang paling penting, browser (terutama pembaca layar) dapat dengan jelas mengaitkan gambar dan deskripsi.
Elemen gambar tidak hanya dapat menampilkan gambar. Anda juga dapat menggunakannya untuk menentukan elemen audio, video, iframe, objek dan embed.
dialog
Elemen dialog mewakili percakapan antara beberapa orang. Elemen HTML5DT dapat mewakili pembicara, dan elemen HTML5DD dapat mewakili konten pidato. Jadi, percakapan juga dapat ditampilkan dengan cara yang masuk akal di browser lama. Kode 7 menunjukkan percakapan terkenal di dialogueconing Galileo The TwoChiefWorldsystems.
Kode 7. Dialog Galilea Ditulis dalam HTML5
<Salog>
<dt> simplicius </dt>
<dd> Menurut Thestrightlineaf,
dan tidak sesuai dengan kurva, suchbeingalready -excludeded
forsuchause. </dd>
<dt> sagredo </dt>
<dd> butishouldtakene-them,
melihat tHESTRAIGHTLINEARAFRUNSOLIQUELY.IsHOULD
TOCD drawlineperpendicular, Forthis akan tampak tome
Tobetheshortest, AswellasbeingUliqueamongthe
Infinitenumberoflongerandunequalones yang mungkin
Ditarik dari titik di atas titik untuk yang sebaliknya
linecd. </dd>
<dt> Salviati </dt>
<dd> <p> YourChoice dan karenanya Anda
adduceForitseemtomemostexcellent.sonowwehaveit
bahwa dimensi pertama ditentukan oleh garis waktu;
Ini (yaitu, luas) Byanotherstraightline, dan
Notonlystraight, butatanglestothat yang
DEXENTIRATIONSTHELLG.thusWehave mendefinisikan thetwo
Dimensionofasurface; itu, panjang danbreadth. </p>
<p> ButsupposeyouhadtodetermineaHeight - for
Contohnya, HowHightHisplatformisFromThepavementdown
Di bawah sana. Mengingat bahwa dariPointintheplatformwe
Maydrawinfinitelines, melengkung, dan semua
panjang yang berbeda, ke titik tak terbatas sehingga ke trotoar
Di bawah ini, jatuhnya tesele yang akan Anda lakukan? </p>
</dd>
</dialog>
Masih ada kontroversi tentang sintaksis yang tepat dari elemen ini. Beberapa orang ingin menanamkan teks-teks non-dialog dalam elemen dialog (seperti deskripsi panggung dalam skrip), dan yang lain tidak menyukai peran memperluas elemen DT dan DD. Terlepas dari kontroversi tentang tata bahasa tertentu, kebanyakan orang berpikir bahwa mengekspresikan percakapan dengan cara semantik adalah hal yang baik.
(untuk dilanjutkan)