Using section and article Elements - Exercise

Contact Us or call 1-877-932-8228
Using section and article Elements - Exercise

Using section and article Elements

Duration: 15 to 25 minutes.

In this exercise, you will modify an HTML page we worked on earlier in the course to replace meaningless div elements with meaningful section and article elements.

  1. Open html5-sections/Exercises/html5-layout.html.
  2. Replace meaningless div elements with meaningful section and article elements. Note that there is room for interpretation here, so there is no one correct solution.
  3. To keep the page looking as it did before, you will also need to modify html5-sections/Exercises/style-html5.css.

Solution:

html5-sections/Solutions/html5-layout.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----
<div id="content">
	<article id="services" title="HTML5 Solutions Services">
		<h1>Services</h1>
		<section id="training">

---- C O D E   O M I T T E D ----
		</section>
		<section id="consulting">

---- C O D E   O M I T T E D ----
		</section>
	</article>
	<article id="products" title="HTML5 Solutions Products">
		<h1>Products</h1>
		<section id="editor">

---- C O D E   O M I T T E D ----
		</section>
		<section id="templates">

---- C O D E   O M I T T E D ----
		</section>
	</article>
</div>
---- C O D E   O M I T T E D ----

An argument could be made for turning the "content" div into a section; however, the main reason for wrapping that content in a div tag is to be able to position the main content on the page, so we left it as a div.

Likewise, you could argue for making each partner div a section or even an article, but we wrapped them in div tags mostly so that we could float them left.

Finally, turning the "services" and "products" div elements into article elements is a bit arbitrary too. You could just as easily make them sections.

Solution:

html5-sections/Solutions/style-html5.css
body {
	font-family:tahoma;	
}

header, footer, aside, section, article, nav, hgroup {
	display: block;
}
---- C O D E   O M I T T E D ----
#content section h2  {
	float:right;
	font-size:xx-large;
	color:#006;
}

#content>article {
	clear:both;	
}

#content article section {
	float:left;
	padding:10px;
	width: 500px;
	border:1px solid #006;
	font-size:small;
}
---- C O D E   O M I T T E D ----

Next