HTML5 APPLICATIONS DEVELOPMENT MANUAL (2016)
11 - Organize Content
To improve the structure of your web pages, you need HTML5’s new semantic elements. The names of these tags are representative of semantic markup.
In HTML 4.01 and before, developers had to rely on the use of the <div> tag to perform a variety of functions. The <div> tag often includes a class or id attribute, which may also include CSS styles such as background-color, height, and width.
- class and id are global attributes, which means that they can be used with all HTML elements
- class is used to identify a group of elements
- id is used to identify individual elements
A simple example of a <div> tag is:<div id="header"> This is a header </div>
Markup in HTML 4.01 vs. HTML5
HTML5 offers new semantic elements to define different parts of a web page:
Structural Tags
The <header> and <footer> elements
The <header> element specifies a header for a document or section. A header typically features titles, logos, or photos and may be the first thing a user sees upon visiting a site
The <footer> element specifies a footer for a document or section. A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
You may have several <footer> and <header> elements in one document.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<<h1>Learning HTML5</h1>
<h2>Semantic Elements</h2>
</header>
<p>Super HTML5 tags</p>
<footer>
<p>Posted by: AnySolution</p>
<p>Contact information:<a href="mailto:contact@anysolution.ro">contact@anysolution.ro</a>.</p>
</footer>
</body>
</html>
The <section> element
The <section> element defines a section in a document. According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."
A home page could normally be split into sections for introduction, content, and contact information. However, there are situations in which you should not use the section element:
The <hgroup> element
The <hgroup> element is used to group headings. This allows you to organize heading tags, but won’t impact the way things look on a web page.
<section>
<hgroup>
<h1>HTML5</h1>
<h3>Structuring a Web page</h3>
</hgroup>
<article>
<p>With semantic tags, structuring a web page is easier!</p>
</article>
</section>
The <nav> element
The <nav> element is used to organize links that allow users to navigate from one page to another. The <nav> tag shouldn’t be used for every link on a page, but rather to group the links together.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
</nav>
</body>
</html>
The <article> and <aside> elements
The <article> element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
Examples of where <article> can be used:
- Forum post
- Blog post
- Newspaper article
The <aside> element defines some content aside from the content it is placed in (like a sidebar). The aside content should be related to the surrounding content.
Tables and Lists
An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<caption>Number of hours worked on writing the second HTML5 manual.</caption>
<table border="1">
<tr>
<th>Month</th>
<th>Hours</th>
</tr>
<tr>
<td>September</td>
<td>100</td>
</tr>
<tr>
<td>October</td>
<td>45</td>
</tr>
<tr>
<td>November</td>
<td>120</td>
</tr>
</table>
</body>
</html>
Common table tags
|
Tag |
Description |
|
<table> |
Defines a table |
|
<th> |
Defines a header cell in a table |
|
<tr> |
Defines a row in a table |
|
<td> |
Defines a cell in a table |
|
<caption> |
Defines a table caption |
|
<colgroup> |
Specifies a group of one or more columns in a table for formatting |
|
<col> |
Specifies column properties for each column within a <colgroup> element |
|
<thead> |
Groups the header content in a table |
|
<tbody> |
Groups the body content in a table |
|
<tfoot> |
Groups the footer content in a table |
There are two primary types of lists in HTML5: ordered and unordered. Ordered lists use the <ol> tag and order items in a list using numbers. Unordered lists use the <ul> tag and display items in a bulleted list. You can add items to both types of lists using the <li> tag.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
