Standards HTML et XHTML : quelle différence ?
PREMIÈRE PARTIE
© Groupe Eyrolles, 2005
26
Cette portion du document apparaîtra en deux parties : la première comprendra le
titre représenté par l’élément bloc

(contenant à son tour deux éléments en
ligne). Le bloc de paragraphe

constituera la seconde. Il contient lui aussi un élément en ligne.
Contenus autorisés selon les types de balises
Ces deux familles de balises diffèrent également par les contenus qu’elles acceptent,
en dehors du texte à proprement parler :
• Un élément bloc peut contenir un (ou plusieurs) éléments bloc et/ou en ligne, à
l’exception des éléments de paragraphe

et des titres

,

…, limités aux
contenus en ligne.
• Un élément en ligne ne peut renfermer que d’autres éléments en ligne.
Il existe aussi deux sortes d’éléments en ligne : « remplacés » et « non remplacés ».
• Seuls les éléments remplacés acceptent des attributs de dimensions (height,
width). Il s’agit des éléments , , , <select> et <object>.<br /> • Les autres n’ont pas de dimension à proprement parler, et n’occupent que la place<br /> nécessaire à leur contenu. C’est le cas des éléments <strong>, <em>, <a>, <span>, etc.<br /> Une mise en page se fera donc préférentiellement à l’aide de balises de type bloc. La<br /> plus indiquée pour cet usage est <div> (« division ») : c’est une balise générique servant de conteneur neutre.<br /> Voici une illustration de notre propos :<br /> La balise de bloc <div> englobe les deux blocs de paragraphe, ce qui est autorisé. En<br /> revanche, ce qui suit est invalide :<br /> En effet, la balise en ligne <span> ne peut contenir des blocs tel le paragraphe (<p>).<br /> Figure 2–4<br /> Affichage mixte d’un bloc<br /> avec éléments en ligne<br /> Figure 2–5<br /> Affichage mixte d’éléments<br /> bloc et en ligne<br /> <div><p>Paragraphe 1</p><p>Paragraphe 2</p></div><br /> <span><p>Paragraphe 1</p><p>Paragraphe 2</p></span> </div> </div> <div style="clear: both"></div> </div> <div id="viewer_control"> <a href="/viewer/alto/16182/52" class="href_previous">Précédent</a> <span class="title"> <h1><a href="https://virtuallibrary.enssmal.edu.dz/idurl/1/16182"></a> - 53/337</h1> <a href="/viewer/alto/16182/54" class="href_next">Suivant</a> </span> </div> </div> </body> </html> <script src="/assets/javascripts/jquery2.js"></script> <script src="/assets/javascripts/helpers.js"></script> <script> var height = $(window).height(); var width = $(window).width(); $('#viewer_img').height(height - 135); $('#viewer_alto').height(height - 135); </script> </body> </html>