The document discusses HTML elements and web page layout. It defines various HTML tags like <header>, <nav>, <section>, <article>, and <footer> that are used to semantically mark up the different parts of a web page. These semantic elements clearly describe their meaning to both browsers and developers, and help structure the layout of web pages.

1. Web Development:
{ Understanding the Web Page Layout
in HTML5}
Presented by:
Mr. Jhaun Paul G. Enriquez
SHS Faculty

2. HTML Elements
Web Development: Using HTML5 & CSS3 2
• are marked up using start tags and end tags
• delimited using angle brackets with a tag
name in between
• HTML5 tag names are case-insensitive
• Tags can either be a container tag or an
empty tag
Opening Tag Closing Tag
<tagname> content </tagname>
angle brackets

3. HTML Attributes
Web Development: Using HTML5 & CSS3 3
• used to define the characteristics of an HTML
element and placed inside the element's
opening tag
• all attributes have a name and a value
Name
Value
<a href="index.html"> Click Link</a>
property you
want to set
the value of the property to be
set and within double quotes
Note: Attribute names and values are case-insensitive

4. HTML Core Attributes
Web Development: Using HTML5 & CSS3 4
id class
title style
• used to uniquely
identify any element
• <h1 id="header">
• associate an element
with a style sheet
• <p class="section">
• suggested title for the
element
• often displayed as a
tooltip
• <abbr title="Hello">
• specify Cascading Style
Sheet (CSS) rules within an
element
• <p style="color:#bbccff;">

5. HTML Internationalization Attributes
Web Development: Using HTML5 & CSS3 5
dir attribute
• indicate to the browser about the direction in which
the text should flow
Value Meaning
ltr - Left to right (default value)
rtl - Right to left (for Hebrew and Arabic)
CODE
OUTPUT

6. HTML Internationalization Attributes
Web Development: Using HTML5 & CSS3 6
lang attribute
• indicate the main language used in a document
• kept in HTML only for backwards compatibility with
earlier versions of HTML
CODE
OUTPUT

7. HTML Internationalization Attributes
Web Development: Using HTML5 & CSS3 7
xml:lang attribute
• XHTML replacement for the lang attribute
CODE
OUTPUT

8. Deprecated Attributes
Web Development: Using HTML5 & CSS3 8
• alink
• link
• vlink
• border
• height
• width
• clear
• hspace
• vspace
• align
• nowrap
• text
• background
• bgcolor
• start
• type
• language

9. HTML Formatting Tags
Web Development: Using HTML5 & CSS3 9
• Bold – <b> … </b>
• Italic – <i> … </i>
• Superscript – ^…
• Subscript – _…
• Insert – <ins> … </ins>
• Delete – <del> … </del>
• Big* – <big> … </big>
• Small – <small> … </small>
• Underline* – <u> … </u>
• Strike* – <strike> … </strike>
• Monospaced*
– <tt> … </tt>
Note:
Tags with
asterisk (*) are
deprecated

10. HTML Phrase Tags
Web Development: Using HTML5 & CSS3 10
• Emphasize – <em> … </em>
• Strong – <strong> … </strong>
• Abbreviation – <abbr> … </abbr>
• Acronym* – <acronym> … </acronym>
• Blockquote – <blockquote> … </blockquote>
• Short quotations – <q> … </q>
• Address – <address> … </address>
Note: Tags with asterisk (*) are deprecated

11. HTML Phrase Tags
Web Development: Using HTML5 & CSS3 11
• Text Citation – <cite> … </cite> == in italics
• Marked – <mark> … </mark> == with yellow mark
• Bi-Directional Override – <bdo> … </bdo>
• Definition – <dfn> … </dfn> == in italics
• Computer Code – <code> … </code> == in monospace
• Keyboard Text – <kbd> … </kbd>
• Programming Variables – <var> … </var> == in italics
• Program Output – <samp> … </samp>

12. 1. What is used to define the characteristics of
element?
2. Where should the element attribute be place?
3. What are the two parts of an attribute?
4. What are the four core attributes used in HTML?
5. Which XHTML attribute was replaced by the
lang attribute in HTML5?
6. In displaying the content by a web browser, what
is the default direction of the text on a web page?
Quick Learning Check:

13. Web Page Layout Elements
Web Development: Using HTML5 & CSS3 13
• clearly describes its meaning to both the browser
and the developer
Source: http://www.w3schools.com/html/html_layout.asp
• define the
different parts of
a web page
• create a
structured layout
for web pages
SEMANTIC MARKUPS

14. Web Page Layout Elements
Web Development: Using HTML5 & CSS3 14
Source: http://www.w3schools.com/html/html_layout.asp
Non-semantic Semantic
<div id="header">
<div
id="sid
ebar">
<div
class="section">
<div id="footer">
<header>
<aside> <section>
<footer>

15. Web Page Layout Elements
Web Development: Using HTML5 & CSS3 15
Source: http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

16. Web Page Layout Elements
Web Development: Using HTML5 & CSS3 16

17. Defining the Page Structure
Web Development: Using HTML5 & CSS3 17
Why use Semantics?
– accessibility - help assistive technologies read
and interpret your webpage
– searchability - help computers make sense of
your content
– internationalization - only 13% of the world are
English native speakers
– interoperability - help other programmers
understand the structure of your webpage
Source: https://codepen.io/mi-lee/post/an-overview-of-html5-semantics

18. Defining the Page Structure
Web Development: Using HTML5 & CSS3 18
Source: https://www.harding.edu/fmccown/classes/comp250-f15/notes/images/acu_screenshot_markup.png

19. Defining the Page Structure
Web Development: Using HTML5 & CSS3 19
The <header> Element
– specifies a header for a document or section
– should be used as a container for introductory content
– several <header> elements in one document are
allowed
SAMPLE CODE

20. Defining the Page Structure
Web Development: Using HTML5 & CSS3 20
• The <nav> Element
– specifies a navigation menus or links for a document
– contain links to the other pages from the website or
to other parts of the same web page
– not for minor set of hyperlinks
SAMPLE CODE

21. Defining the Page Structure
Web Development: Using HTML5 & CSS3 21
• The <section> Element
– a generic section of a document or application
– a thematic grouping of content, typically with a
heading (from W3C HTML5 Documentation)
– appropriate only if the contents would be listed
explicitly in the document's outline
SAMPLE CODE

22. Defining the Page Structure
Web Development: Using HTML5 & CSS3 22
• The <article> Element
– specifies independent, self-contained content
– can be used for a forum post, blog post or comment
– use <section> and <article> together or use nested
<article> elements
SAMPLE CODE

23. Defining the Page Structure
Web Development: Using HTML5 & CSS3 23
• The <aside> Element
– piece of content that is only slightly related to the
rest of the page
– used for extra information, related links and
contextual advertisements
SAMPLE CODE

24. Defining the Page Structure
Web Development: Using HTML5 & CSS3 24
• The <footer> Element
– specifies a footer for a document or section
– should contain information about its containing
element
– typically contains the author of the document,
copyright information, links to terms of use, contact
information, etc.
SAMPLE CODE

25. Defining the Page Structure
Web Development: Using HTML5 & CSS3 25
<header>
<nav>
<section>
<article>
<aside>
<footer>

26. 1. What HTML elements convey their meaning &
purpose clearly to the developer & to the browser?
2. Can you give a non-semantic markup?
3. Why should we use semantic markups?
4. What semantic markup represents a thematic
grouping of content, typically with a heading?
5. Which markup should be used for piece of
content that is only slightly related to the rest of
the page?
Quick Learning Check: