Inside the Body. Tag; <article>
The body of our document is ready. The basic structure of our website is finished, but we still have to work on the content. The HTML5 elements studied so far help us identify every section of the layout and assign an intrinsic purpose for each one of them, but what is really important for our website is what is inside those sections.
Most of the elements already examined were created to provide a structure to the HTML document that can be identified and recognized by browsers and new devices.
We learned about the <body> tags to declare the body or the visible part of the document, the <header> tags to enclose important information for the body, the <nav> tags to supply navigational aids, the <section> tags containing the most relevant content, and the<aside> and <footer> tags to provide additional information. But none of these elements are declaring anything about the content itself. All of them have a very specific structural purpose. |
The further inside the document we go, the closer we get to defining the content. This information will be composed of different visual elements such as titles, texts, images, videos, and interactive applications among others. We need to be able to differentiate these elements and establish relationships between them.
<article>
In the same way that blogs are divided into entries, websites usually present relevant information divided into parts that share similar characteristics. The <article> element let us identify each of these parts.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an HTML5 example">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Web and Html Tutorials</li>
<li>Android Game Tutorials</li>
<li>Java for beginners Tutorials</li>
<li>Sql Tutorials</li>
<li>Contact</li>
</ul>
</nav>
<section>
<article>
JAVA VIDEO TUTORIALS
In these series of tutorials we will learn to develop java from scratch. Some of the concepts we will learn are valid for generic programming but we will look at them in a java environment.
</article>
<article>
SQL VIDEO TUTORIALS
Sql tutorials for beginners. We will learn how to use the Structured Query Language.
</article>
</section>
<aside >
Spanish Version
</aside>
<footer>
Copyright © 2012-2013
</footer>
</body>
</html>
As you can see in the code, the <article> tags are between the <section> tags. The <article> tags belong to that section. They are its children, in the same way that every element between the <body> tags is a child of the body. But, as with every child of the body, the <article> tags are placed one after another, because each one is an independent part of the <section>.
This is the result;
As we said before, the HTML structure can be described as a tree, with the <html> element as its root. Another way to describe the relationships between elements is to name them as parents, children or siblings according to their position in the tree structure. For example, in a typical HTML document the <body> element is child of the <html> element and sibling of the <head> element. Both, <body> and <head>, has the <html> element as their parent.
The <article> element is not limited by its name—so not limited to news articles, for example.
The <article> element is intended to contain an independent item of content so can include a forum post, a magazine article, a blog's entry, user's comment, etc. This element will group portions of information that are related to each other regardless of the nature of that information.
As an independent part of the document, the content of every <article> element will have its own independent structure. To define this structure we can take advantage of the versatility of the <header> and <footer> tags studied before. These tags are portable and can be used not only in the body, but also in every section of our document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an HTML5 example">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Web and Html Tutorials</li>
<li>Android Game Tutorials</li>
<li>Java for beginners Tutorials</li>
<li>Sql Tutorials</li>
<li>Contact</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>JAVA VIDEO TUTORIALS </h1>
</header>
In these series of tutorials we will learn to develop java from scratch. Some of the concepts we will learn are valid for generic programming but we will look at them in a java environment.
<footer>
<p>comments (0)</p>
</footer>
</article>
<article>
<header>
<h1>SQL VIDEO TUTORIALS </h1>
</header>
Sql tutorials for beginners. We will learn how to use the Structured Query Language.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
Spanish Version
</aside>
<footer>
Copyright © 2012-2013
</footer>
</body>
</html>
Both portions of information inserted in the code were built with the <article> element and have a specific structure. First we have the <header> tags containing the title defined with the <h1> element. Below is the content itself, the text describing the tutorial. And finally, after the text comes the <footer> tag specifying the number of comments.
This is the result of our code:
| << Body Structure tags:<footer> | Inside the Body. Tag:<hgroup> >> |