Comentario: HTML5 también agrega algunos elementos puramente semánticos de nivel de bloque: aparte del diálogo de figura. He estado usando los dos primeros elementos en mis artículos y libros. El tercer elemento que no uso con frecuencia, se usa principalmente en el texto escrito. Dejando a un lado el elemento representa una descripción, indicaciones, barras laterales, citas, comentarios adicionales, etc., es decir, contenido fuera de la línea principal de la narrativa. Por ejemplo, en el desarrollador
HTML5 también agrega algunos elementos puramente semánticos de nivel de bloque:aparte de diálogo de figura
He estado usando los dos primeros elementos en mis artículos y libros. El tercer elemento que no uso con frecuencia, se usa principalmente en el texto escrito.
aparte
El elemento aparte representa una descripción, indicaciones, barras laterales, citas, comentarios adicionales, etc., es decir, contenido fuera de la línea principal de la narrativa. Por ejemplo, en los artículos de Developerworks, a menudo se ve barras laterales escritas en forma de tabla, consulte el Código 3, Barra lateral Developerworks escrita en HTML4.
<TableLeLign = 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 =#eeeeee>
<P> <aname = xf-value> <spanclass = smalltitle> .xf-value </span> </a> </p>
<p>
<CodeType = inline> .xf-value </code> SelectorusedHeRestyLestheInput
FieldValueButnotitsLabel. Esto es realmente inconsistente
con thecurrentcss3draft.
<codeType = inline> :: valor </code> pseudo-classinsteadlikeso:
</p>
<tableBorder = 0CellPadding = 0CellPacing = 0Width = 100%>
<tbody> <tr> <tdclass = code-outline>
<preclass = DisplayCode> Input :: Value {Width: 20em;}
#ccnumber :: valor {ancho: 18em}
#zip :: valor {ancho: 12em}
#State :: Value {Width: 3em} </pre>
</td> </tr> </tbody> </table> <br>
<p>
Sin embargo, Firefox no tiene un tyetsupport ThisSyntax.
</p>
</td> </tr> </table>
En HTML5, puede escribir esta barra lateral de una manera más significativa, consulte la barra lateral del Código 4 Developerworks escrita en HTML5.
<Sectante>
<h3> .xf-value </h3>
<p>
<CodeType = inline> .xf-value </code> SelectorusedHeRestyLestheInput
FieldValueButnotitsLabel. Esto es realmente inconsistente
con thecurrentcss3draft.
<codeType = inline> :: valor </code> pseudo-classinsteadlikeso:
</p>
<preclass = DisplayCode> Input :: Value {Width: 20em;}
#ccnumber :: valor {ancho: 18em}
#zip :: valor {ancho: 12em}
#State :: Value {Width: 3em} </pre>
<p>
Sin embargo, Firefox no tiene un tyetsupport ThisSyntax.
</p>
</aparte>
El navegador puede decidir dónde colocar esta barra lateral (puede requerir un pequeño código CSS).
Cifra
El elemento de la figura representa una imagen de nivel de bloque y también puede incluir descripciones. Por ejemplo, en muchos artículos Developerworks, puede ver que el resultado del etiquetado del Código 5 del diagrama Developerworks escrito en HTML4 se muestra en la Figura 1.
<name = fig2> <b> figura2.installmozillaxformsdialog </b> </a> <br/>
<imgalt = awebsiteisrequestingpermissiontoinstallthefollowIntem:
Mozillaxforms0.7unsigned
src = installDialog.jpgBorder = 0Height = 317Hspace = 5VSpace = 5Width = 331/>
<br/>
Figura 1. InstalarMozillaxFormSDialog
En HTML5, puede escribir este diagrama de una manera más semántica, consulte el diagrama del código 6 Developerworks escrito en HTML5.
<figuraD = fig2>
<Legend> Figura2.installMozillaxFormsDialog </legend>
<imgalt = awebsiteisrequestingpermissiontoinstallthefollowIntem:
Mozillaxforms0.7unsigned
src = installDialog.jpgBorder = 0Height = 317Hspace = 5VSpace = 5Width = 331/>
</figura>
Lo más importante es que los navegadores (especialmente los lectores de pantalla) pueden asociar claramente imágenes y descripciones.
Los elementos de figura no solo pueden mostrar imágenes. También puede usarlo para especificar elementos de audio, video, iframe, objeto e incrustación.
diálogo
El elemento de diálogo representa una conversación entre varias personas. El elemento HTML5DT puede representar el altavoz, y el elemento HTML5DD puede representar el contenido del habla. Por lo tanto, las conversaciones también se pueden mostrar de manera razonable en los viejos navegadores. El Código 7 muestra una conversación famosa sobre el diálogo de Galileo, los Sistemas de TwoChiefWorlds.
Código 7. Diálogo galileano escrito en HTML5
<diálogo>
<dt> simplicius </dt>
<dd> Según TheStrightLineAf,
y no de acuerdo con la curva, tal vez
Por supuesto. </dd>
<dt> sagredo </dt>
<dd> butishouldtakene tampoco
viendo eso thestraightlineeafrunsobliquilmente.
DrawlinePerpendicular TOCD, FUENTIS parecería tomo
tobetheshortest, también esbeinguniquelongthe
infinitenumberoflongerandunequalones que tal vez
Extraído del punto de punto para el punto opuesto
Linecd. </dd>
<dt> Salviati </dt>
<dd> <p> YourChoice y ThereTime You
aduceitseemtomEmostExcellent.sonowwehaveit
que la primera dimensión está determinada por línea de línea;
estos (a saber, amplitud) Byanotherstraightline, y
Noonlystraight, butatanglestothat que
Determinationsthelgenty. Por lo que hemos definido
dimensionSofasurface; eso es, longandbreadth. </p>
<p> butsupponeyouhadtodetermineaheight - para
Ejemplo, HowNthEcthSplatformisFromThEpavementDown
debajo de allí. Viendo eso deMyPointinthePlatformwe
Maydrawinfinitelines, CurvedorStraight y Allof
diferentes longitudes, al punto infinito para el pavimento
A continuación, ¿qué líneas de caída te harían usar? </p>
</dd>
</diálogo>
Todavía existe una controversia sobre la sintaxis exacta de este elemento. Algunas personas quieren incrustar textos no di-diálogo en elementos de diálogo (como descripciones de etapas en los guiones), y a otras no les gusta el papel de extender los elementos DT y DD. A pesar de la controversia sobre la gramática específica, la mayoría de las personas piensan que expresar conversaciones de una manera tan semántica es algo bueno.
(continuará)