structure html

Arbre.

Dressez l'arbre de la page html ci-dessous.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> arbre </title>
    </head>
    <body>
           <h1> Le titre </h1>
           
           <article> 
            <p> Du texte et une image <img src="images/logohtml5.png" alt="logohtml5"> </p>
            <p> Encore du texte.</p>
           </article>  
           
           <footer>
           Un pied de page
           </footer>     
    </body>
</html>

Arbre, bis.

Dressez l'arbre de la page html ci-dessous.

On a volontairement supprimé les indentations et passages à la ligne : voyez comme c'est pénible à lire !!

Tout le code que vous aurez à rendre devra être proprement indenté, et avec des passages à la ligne.

Une bonne façon d'indenter du code html est de faire en sorte que l'arborescence DOM soit apparente avec cette indentation : les noeuds de même niveau présentent le même écart à la marge gauche.

<!DOCTYPE html>
<html lang="fr">
<head><meta charset="utf-8">
<title> arbre </title></head>
<body>
<header><h1> Mon super titre </h1></header><section><h2> Titre de section</h2><article> 
<h3>Titre 1</h3><p> Du texte et <mark>encore du texte</mark> !! </p><p> Encore.</p>
</article>  
<article> <h3>Titre  2</h3><p> captivant.</p><footer> Un pied d'article</footer></article>  
</section><footer>Un pied de page</footer></body>
</html>

L'arbre

Et une présentation plus convenable du code

<!DOCTYPE html>
<html lang="fr">
	
	<head>
		<meta charset="utf-8">
		<title> arbre </title>
	</head>
	
	
	<body>
		
		<header>
			<h1> Mon super titre </h1>
		</header>
		
		
		<section>
			<h2> Titre de section</h2>
			
			<article> 
				<h3>Titre 1</h3>
				<p> Du texte et <mark>encore du texte</mark> !! </p>
				<p> Encore.</p>
			</article>  
			
			<article> 
				<h3>Titre  2</h3>
				<p> captivant.</p>
				<footer> 
					Un pied d'article
				</footer>
			</article>  
		</section>
		
		
		<footer>
			 Un pied de page
		</footer>
	</body>
	
</html>