Scribd
Upload
11 views16 pages

HTML 5 Semantics: Digital Media I

Uploaded by

djptech231
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
11 views16 pages

HTML 5 Semantics: Digital Media I

Uploaded by

djptech231
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/ 16

HTML 5 Semantics

Digital Media I
Objectives

01 Discuss the HTML Semantics


element

02 Understand how to use various


semantics element
HTML Semantics
Let's brainstorm
HTML Semantics
HTML layouts provide a way to arrange web pages in well-mannered, well-
structured, and in responsive form or we can say that HTML layout specifies a way
in which the web pages can be arranged.

Web-page layout works with arrangement of visual elements of an HTML document.

A semantic element clearly describes its meaning to both the browser and the developer.

HTML layouts create an individual space for every part of the web page. So that every
element can arrange in a significant order.
HTML Semantics Cont.
HTML <section> Element
The <section> element is a structural HTML element used to group together
related elements.

Each <section> typically includes one or more heading elements and additional
elements presenting related content.

The <section> element defines a section in a document.

According to W3C's HTML documentation: "A section is a thematic grouping


of content, typically with a heading."
HTML <article> Element
The <article> element 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 web site.
Examples of where an <article> element can be used:
Forum post

Blog Post

Newspaper article
Nesting <article> in <section>
or Vice Versa

The <article> element specifies independent, self-contained content.

The <section> element defines section in a document.

Can we use the definitions to decide how to nest those elements? No, we cannot!

So, you will find HTML pages with <section> elements containing <article> elements, and
<article> elements containing <section> elements.
HTML <header> Element
The <header> element represents a container for introductory
content or a set of navigational links.
You can use several <header> elements in one document, but a <header>
element cannot be placed within a <footer>, <address> or another <header>
element.

A <header> element typically contains:


one or more heading elements (<h1> - <h6>)
Logo or icon

Authorship information
HTML <footer> Element
The <footer> element defines a footer for a document or section.

A <footer> element typically contains:


Authorship information
Copyright information
Contact information

sitemap

Back to top links


Related documents

You can have several <footer> elements in one document.


HTML <nav> Element
The <nav> element defines a set of navigation links.

NOT all links of a document should be inside a <nav> element. The <nav>
element is intended only for major block of navigation links.
HTML <nav> tag is used to represent a section which contains navigation
links, either within current document or to another document. Examples of
some navigation links are menu, table of contents, indexes, etc.
The <nav> tag is newly added tag in HTML5.
HTML <aside> Element
The <aside> element defines some content aside from the content
it is placed in (like a sidebar).

According to W3C definition, the <aside> element represents content that


forms the main textual flow of a document.
The <aside> content should be indirectly related to the surrounding
content.
HTML <figure> and <figcaption>
Elements
The <figure> tag specifies self-contained content, like illustrations,
diagrams, photos, code listings, etc.

The <figcaption> tag defines a caption for a <figure> element. The <figcaption>
element can be placed as the first or as the last child of a <figure> element.
The <img> element defines the actual image/illustration.
Semantics Elements in HTML
Summary
HTML layouts provide a way to
arrange web pages in well- You will find HTML pages with
mannered, well-structured, and <section> elements containing
in responsive form or we can say <article> elements, and <article>
that HTML layout specifies a elements containing <section>
way in which the web pages can elements.
be arranged.

A semantic element clearly The <header> element represents a


describes its meaning to both the container for introductory content
browser and the developer. or a set of navigational links.
Thank You
ANY QUESTIONS?

You might also like