LESSON 5
THE NEW SEMANTIC
TAGS IN HTML 5
Learning Targets:
Write HTML codes using
HTML5 tags.
Use HTML5 semantic tags
correctly
Determine the appropriate
and specific location of the
semantics tags.
In HTML, there are semantic ways of writing
codes in your web pages.
Semantics means the relationship of meanings
of a sign or a set of signs.
You use HTML in a semantic way to reinforce
structural meaning. It's about using tags, class
names, and IDs that will support the meaning of
the content within the tags.
For example, if you are using the <div> tag (DIV
tag is a section of web page content), web
developers have to use an ID or class name
along with the tag to convey more meanings.
In previous versions of HTML, these semantic
ways of placing tags helped developers describe
tags within the code.
Example:
<div id = "header">
HTML5 adds semantic tags to define layouts in
more natural ways. They help both developer
and browsers get the purpose of the markup tags.
The new HTML5 semantic tag is one in which
the name of a tag reflects its purpose.
Here are the major semantic tags you
should know:
<header>
The section that contains an
introduction, or a group of navigation
elements.
<footer>
It defines the text at the bottom of a
page, such as the copyrigh or contact
information. It is typically repeated on
every page of the site.
<article>
The section that contains an
independent item of content, such as
magazine article or a forum post.
<aside>
It defines a block of text that is
tangential to the main discuss
such as a note, tip, or warning.
<section>
It defines a generic content or an
application section. Examples of sections
could be book chapters or the numbered
sections thesis; a site's home page could
be split into sections such as Introduction,
News, and Contact Information.
<nav>
The section that contains navigation
links.
<details>
The section that contains additional
details that the user can view hide
using an interactive widget.
<hgroup>
The section of headings, using <h1>
to <h6>, where the largest main
heading of the section, and the
others are subheadings.
BICOL STATE COLLEGE OF APPLIED SCIENCES AND TECHNOLOGY
COLLEGE OF EDUCATION
LABORATORY HIGH SCHOOL
Performance Task
WEB DIVISION USING
HTML5 Tags
Ms. Wennie Rose P. Camba
Subject Teacher
In this activity, you will create a simple color-
coded layout to your web page using the
HTML5 tags starting from top to bottom.
Putting a style in the HTML5 tags will allow you
to set the appearance or how the divisions of
your web page behave on the screen. You can
put various style attributes such as the
following:
You can put various style attributes such as
the following:
Border
Background
Margin
Width
Height
Open the Notepad.
Type the following in your
documents:
Add the following style attributes
in the header:
For the top navigation, add the
following:
For the top navigation, add the
following:
For the bottom navigation, add
the following:
For the copyright, add the
following
Save the File .
Test it on a browser
