NexTGen Web
Session: 8
Creating Navigational Aids
and Division-Based Layout
Objectives
Explain HTML5 semantic tags
Explain HTML5 semantic tag layouts
Explain the usage of navigation bar
Describe a text-based and graphic navigation bar
Explain image mapping
Explain divisions in HTML5
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 2
HTML5 Semantic Tags
HTML5 has evolved by introducing new elements that brought
semantics to higher level.
Earlier version of HTML had the universal tag div which was used
to accomplish various tasks in the HTML structure.
Constraint with div tag is that, it confused the user when
multiple div tag was used in large coding.
HTML5 has introduced two types of semantic tags namely, text-
level and structural.
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 3
Structural Semantic Tags
Are block level elements and are used to
structure pages.
New structural semantic elements are as
follows:
Articl Nav
e
Structur Aside
al
Semantic
Sectio Tags
n
Foote
Header r
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 4
Text-level Semantic Tags
Are currently inline elements.
New text-level semantic elements are
as follows:
Progress
Text-
level Meter
Mark Semantic
Tags
Time
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 5
HTML5 Semantic Layout 1-6
<header> element provides introductory
information.
<head> tag provides information about the entire
document.
<header> tag is used only for the body of the Web page or for the
sections inside the body.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>My First Page</title>
</head>
<body>
<header>
<h1>Sample Blog </h1>
</header>
</body
</html>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 6
HTML5 Semantic Layout 2-6
nav element is a section which contains the
navigation link to other pages or links to
different sections within the page.
Navigational elements are helpful in identifying
large blocks of navigational data.
<body>
<header>
<h1>Sample Blog</h1>
</header>
<nav>
<ul>
<li> home </li>
<li> help </li>
<li> contact </li>
</ul>
</nav>
</body>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 7
HTML5 Semantic Layout 3-6
<section> is the main information bar that
contains the most important information of the
document.
It can be created in different formats. For
example, it can be divided into several blocks
or columns.
<body>
<header>
<h1>Sample Blog </h1> <section>
</header> <h1>Links</h1>
<nav> <ul>
<ul>
<li> home </li> <li><a href=”#”>Link 1</a></li>
<li> help </li> <li><a href=”#”>Link 2</a></li>
<li> contact </li> <li><a href=”#”>Link 3</a></li>
</ul>
</nav> </ul>
</section>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 8
HTML5 Semantic Layout 4-6
<aside> element is a column or a section that generally
contains data linked to the main information.
This element is used for typographical effects, such as
for sidebars, for groups of nav elements, for
advertising purposes, and so on.
<!DOCTYPE html> <section>
<html lang=”en”> <h1>Links</h1>
<body> <ul>
<header> <li><a href=”#”>Link 1</a></li>
<h1>Sample Blog </h1> <li><a href=”#”>Link 2</a></li>
</header> <li><a href=”#”>Link 3</a></li>
<nav> </ul>
<ul> </section>
<li> home </li> <aside>
<li> help </li> <blockquote>Archive Number One</blockquote>
<li> contact </li> <br>
</ul> <blockquote>Archive Number Two</blockquote>
</nav> </aside>
</body>
</html>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 9
HTML5 Semantic Layout 5-6
The Code Snippet demonstrates the use of <footer> tag.
<body> <aside>
<header> <blockquote>Archive Number One</blockquote>
<h1>Sample Blog</h1> <br>
</header> <blockquote>Archive Number Two</blockquote>
<nav> </aside>
<ul> <footer>
<li> home </li> Copyright © 2012-2013
<li> help </li> </footer>
<li> contact </li> </body>
</ul> </html>
</nav>
<section>
<h1>Links</h1>
<ul>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
</ul>
</section>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 10
HTML5 Semantic Layout 6-6
<article> element helps to insert a self-contained
composition in an application, page, document, or
site.
<body>
<header> </section>
<h1>Sample Blog</h1> <aside>
</header> <blockquote>Archive Number 1</blockquote>
<nav> <br>
<ul> <blockquote>Archive Number 2</blockquote>
<li> home </li> </aside>
<li> help </li> <footer>
<li> contact </li> Copyright © 2012-2013
</ul> </footer>
</nav> </body>
<section> </html>
<article>
First Blog entry
</article>
<article>
Second Blog entry
</article>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 11
Navigation Bar
Is one of the most important elements in Web design.
Web-layouts do not have any specific physical
representation except for a consistent navigation menu.
In Web designing, navigation menu are always on
navigation bars, which can be horizontal or vertical.
Navigation bar is a section of a Website or online page
intended to support visitors in browsing through the
online document.
Web pages will have a primary and a secondary
navigation bar on all pages which will include links to
the most important sections of the site.
Advantage of using a text-based navigation bar is that
it reduces the loading time of a page.
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 12
Text-based Navigation Bar
The Code Snippet demonstrates the HTML code for a text-based
navigation bar.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<a href=”/home/”><font size=”6”>Home</font></a> |
<a href=”/news/”><font size=”6”>News</font></a> |
<a href=”/contact/”><font size=”6”>Contact</font></a>
|
<a href=”/about/”><font size=”6”>About</font></a>
</nav>
<h1>This is a Text-based Navigation Bar</h1>
</body>
</html>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 13
Graphical Navigation Bar with Rollover Effects
Similar to the graphical navigation bar except for
additional feature.
Moving the mouse over the linked image leads to a
change in the state of image.
State change of image leads to an image swapping
process.
When the mouse is moved off the image, the image
swaps back to the previous view.
This rollover effect creates an interactive
activity between the Web site and the visitor.
Rollover effect has two different activities that
include the image in the original view and the
changed image after mouse rollover.
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 14
Image Map
Are images with clickable areas linked to another page
Be Defined by using the <map> tag
<map> element contains a number of <area> elements for
defining the clickable areas in the image map.
The id attribute of the <map> tag when specified, must have
the same value as the name attribute.
<img src=”6.jpg” width=”600”
height=”300” alt=”cake”
usemap=”#cakemap” />
<map name=”cakemap”>
<area shape=”circle”
coords=”0,0,200,600”
href=”4.html” alt=”cake” />
</map>
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 15
Divisions 1-2
<div> tag defines a division in an HTML Web page.
Is used to group block-elements and format them with CSS.
New structural semantic tags reasonably reduce a lot of <div>
tag’s usage.
can be used when there is no other semantically appropriate
element left that suits the purpose in a Web page development.
It can be commonly used for stylistic purposes such as
wrapping some semantically marked-up content in a CSS-styled
container.
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 16
Division Positioning and Formatting 1-2
Elements can be positioned using the top, bottom, left,
and right properties.
These properties will not work unless the position of
the property is set.
There are five position properties in DIV elements
namely, static, relative, absolute, fixed, and inherit.
Only three properties are used namely, absolute,
relative, and fixed.
Positioning can be applied to any block element.
Default position for a block element (DIV) is static.
© Aptech Ltd. Creating Navigational Aids and Division-Based Layout / Session 8 17
Summary
HTML 5 has introduced two types of semantic tags. They are namely, text-level and
structural.
Structural semantic tags : Section, Header , Footer , Aside, Nav, Article
Text level semantic tags : Mark, Time, Meter, Progress
Navigation is the most significant element in Web design. Since Web-layouts does not have
any physical representation, a user can depend on consistent navigation menu.
Text-based navigation bars are created as stand-alone navigation bars that are not
associated with icons. Text-based navigation bar is easy to create and can be displayed in
any Web browsers.
Graphical navigation bar is better than text-based navigation as it gives a visual appeal to
the visiting users.
The new structural semantic tags reasonably
© Aptech Ltd.
capture
Creating a lotAids
Navigational ofand
<div>‘s territory,
Division-Based but
Layout <div>8 tag
/ Session 18
