Lesson Twenty One: The Section, Article, and Time Elements

The latest version of HTML (HTML5) allows you to use the <section> element to structure and design important portions of your pages.

You will also be using the new <article> and <time> elements.

Enter this code just under the header element:

<section>
<article>
<h3>Introduction to the Blog</h3>
<time datetime="2016-2-4">2/4/2016</time>
<p>This blog is provided to encoarage all of the students at our school and
other schools to submit pictures and paragraphs about African Animals.
If you learn anything about an African animal that you would like
to share, please write down the information (in your own words)
and give your article to the <em> Web Team </em> at your school.</p>
</article><article>
<h3>Camels of North Africa</h3>
<time datetime="2016-2-6">2/4/2016</time>
<p>African camels are found in the northern most parts of Africa.
These creatures can go for many days without water and are
usually living in dry desert areas.</p>
<p>This animal played a vital part in history. The camel was used to carry expensive trade
goods through the harsh, dry desert. The trade goods found their way to all corners of the globe.</p>
<p>The camel was also used in war. Warriors rode into battles on the backs of
camels just like American indians on horse back.</p>
<p>Here is a link to pictures of African camels:
<a href="http://animals.nationalgeographic.com/animals/mammals/bactrian-camel/?source=A-to-Z">African Camels</a></p>
<p>This is a picture of a camel in Egypt:
<img src="images/camel1.jpg" alt="Camel"></p>
</article><article class="bottom">
<h3>The African Cheetah</h3>
<time datetime="2016-3-8">3/8/2016</time>
<p>Cheetahs are predators and eat primarily small animals.
They are worthy hunters, as they can hide well in the
dry grasses of the African plains. They sneak up on their
pray by keeping their bodies low and only
raise their heads above the grass.</p>
<p>The cheetah is the fastest mammal on Earth and can reach
speeds of 60 miles per hour or sometimes even more. Some
cheetahs can weigh as much as 140 pounds.</p>
<p>You can learn more about cheetahs at this site:</p>
<a href="http://kids.nationalgeographic.com/kids/animals/creaturefeature/cheetah/">The African Cheetah</a>
</article>
</section>

The new elements allow you to add more structure. The CSS is easier to understand and maintain. Consider what will happen as you enter this code to your CSS file:

section { width:580px; margin: 20px; }
article { border-right: solid 5px darkgreen; border-left: solid 5px darkgreen; border-top: solid 5px darkgreen;
border-bottom: solid 5px darkgreen; width: 400; padding: 10px; line-height: 1.8em; font-size: 120%; margin-bottom: 5px; }
a:link { color: darkgreen; border-bottom: none;}
a:visited { color: darkgreen; border-bottom: none;}
a:hover { background: darkgreen; color: lightgreen; border-bottom: none;}

Save your CSS file and test the results:

Lesson Twenty Two: The Aside Element

Coding

Lesson Twenty One: The Section, Article, and Time Elements