Scribd
Upload
25 views26 pages

Web Pages

The document discusses HTML5 semantic tags and how to use them to structure web pages. It provides examples of major semantic tags like <header>, <footer>, <article>, <aside>, <section>, and <nav> and explains what content each one is intended for. It then gives instructions for an activity to create a simple web page layout using these tags and adding basic styling to sections.

Uploaded by

WENNIE ROSE P. CAMBA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
25 views26 pages

Web Pages

The document discusses HTML5 semantic tags and how to use them to structure web pages. It provides examples of major semantic tags like <header>, <footer>, <article>, <aside>, <section>, and <nav> and explains what content each one is intended for. It then gives instructions for an activity to create a simple web page layout using these tags and adding basic styling to sections.

Uploaded by

WENNIE ROSE P. CAMBA
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

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

You might also like