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.
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
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:
Hinweis der Redaktion
Tooltip â text that appears when the cursor hovers on the element or while the element is loading
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
There are three internationalization attributes, which are available for most (although not all) XHTML elements.
Deprecated - a deprecated language entity is one that is tolerated or supported but not recommended. For example, a number of elements and attributes are deprecated in HTML 4.0 , meaning that other means of accomplishing the task are preferred.
A web page being rendered in the browser consists of many things - logo, informative text, pictures, hyperlinks, navigational structure and more. Semantic Markup because they convey their meaning and purpose clearly to the developer and to the browser.
A web page being rendered in the browser consists of many things - logo, informative text, pictures, hyperlinks, navigational structure and more. Semantic Markup because they convey their meaning and purpose clearly to the developer and to the browser.
Currently there are no rigid and precise rules dictating their nesting. Whenever you use them together try to ensure that the resultant structure meets the intended purpose of the respective element as given in the W3C specifications.Â
Think of it as a sidebar that gives some extra, related yet standalone information about the topic being discussed. Some examples of <aside> include - extra information, related links and contextual advertisements.Â
Currently there are no rigid and precise rules dictating their nesting. Whenever you use them together try to ensure that the resultant structure meets the intended purpose of the respective element as given in the W3C specifications.Â
(1) Semantic markup, (2) <div> and <span>, (3) accessibility, searchability, internationalization and interoperability (4) <section>, and (5) <aside>