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.