Uploaded by Taleni Junior

Lecture 3 - HTML5 Semantic elements

Web Design and Programming
Lecture 3 – More HTML and Semantic
In this session:
• Block level vs. inline elements
• <span> and <div> elements
• Creating a basic web page layout
• HTML Semantic Elements
• Why use semantic elements
Block level vs. inline elements
• HTML elements are historically categorized as "block-level" or "inline-level"
A block-level
• starts on a new line
• takes up the full width available
• browser places a margin of whitespace between block elements for
• may contain inline elements and other block-level elements
• Examples include: <p>,<div>, <article>,<aside><lists>
can start anywhere in a line
occupy space bounded by the tags defining the element
browser allows many inline elements to appear on same line
may contain only data and other inline elements
Examples include: <a>, <span>, <bold>, <img>
<span> and <div> elements
• generic HTML elements that group related parts
• serve different functions:
• div:
• used for block-level organization
• styling of page elements
• span
• inline organization
• also widely used for styling
<span> and <div> elements
What are semantic elements
• HTML provides a standard way of describing content of a
• Semantic elements help describe this content better
• A semantic element clearly describes its meaning both to the
browser and developer
• Examples of non-semantic elements: <div> and <span>
• These elements do not describe the content – rely on ids or classes for
• E.g. <div id=“nav”>, <div id=“header”>, <div id=“footer”>
Semantic Elements
Element type
specifies independent, self-contained content such as a blogpost, forum post
newspaper article
Content other than page content
Additional details that the user can view or hide
Caption for the <figure> element
Self contained content
Footer for section or document
Semantic Elements
Element type
header for a section or document
used as a container for introductory content or a set of navigational links
Main content of the specified document
Marked and highlighted text
defines a set of navigation links
defines a section in a document
Visible heading for the details element
Creating a basic web page layout
• Layout considerations:
• Various ways to create multi-column style layouts
• Each way has its strengths and weaknesses
<div id = “header”>
<div id = “nav”>
<div id = “section”>
<div id =
<div id = “article”>
<div id = “article”>
<div id = “footer”>
• Not all browsers are compatible with HTML5
• Some render HTML5 in limbo state
• You may need specific code for backward
• HTML5 is still under development
General Outline of a document
<!-- Header of the webpage body (e.g. logo, navigation bar) -->
<!-- Main section of the webpage body (where most content is) -->
<!-- Footer of the webpage body (e.g. copyright info) -->
Using HTML5 Semantic Tags to Define
• a self-contained composition in a document
• Examples include:
• a forum post, a magazine or newspaper article, or a blog entry
• defines some content
indirectly related to the
surrounding content
• often placed as a sidebar in a
• does not render as anything
special in a browser but can
be styled using CSS
<details> and <summary>
• <summary> tag is used in conjuction with
<details> to specify a visible heading for
the details.
• <details> tag specifies additional details
that the user can open and close on
• often used to create an interactive widget
that the user can open and close.
• The widget is closed by default but
expands and displays the content within
when opened
Figure and figcaption
• <figure> specifies self-contained content,
like illustrations, diagrams, photos, code
listings, etc.
• its position is independent of the main
flow, and if removed it should not affect
the flow of the document
• Used with <figcaption> to add a caption
for the <figure> element.
• represents a group of
introductory content
• typically contains:
some heading elements
a logo
navigational aids
a search form
an author name, and
other elements.
• defines a footer for a document
or section.
• typically contains:
authorship information
copyright information
contact information
back to top links
related documents
• You can have several <footer>
elements in one document.
• represents the dominant content of a document
• commands presidential status
• contains content directly related to or expands on central topic
of a page
• There should be no more than one instance
• should not be included inside other elements e.g. nav
• The content inside should be unique and not contain content
that is repeated across pages ( e.g. sidebars, nav link, search
bars, etc.)
• provides navigation links to other documents or sections
• Used for links to other pages, menus, tables of contents, and
• defines sections in a document
• A section of a bigger whole such as chapters or any other sections of
the document.
• The <article> tag specifies independent, self-contained content
• An article should make sense on its own and it should be possible to
distribute it independently from the rest of the site.
• Potential sources for the article element:
Forum post
Blog post
News story
the only real difference between them are readability and design preference.
Why use semantic elements?
• Aids accessibility
• Optimization of Searching
• Semantic code is generally shorter
• Easy to understand for other developers
End of lecture