WHAT IS HTML5?

HTML5 is the latest

evolution of HTML to this
date. Again, HTML is the
set of rules for describing
the format and structure
of web documents.
HTML5 New Elements
HTML5 came with new elements. Here are
some of the new elements plus their
descriptions.
With the addition of these elements, there are elements
that have been removed. Below is a list of tags/elements
from HTML4 which are no longer available in HTML5:
<acronym>
<applet>
<basefront>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
APPLYING HTML5 SEMANTIC ELEMENTS
(In a more detailed explanation) HTML5 introduces new elements that are helpful in
establishing the structure of a webpage.
Article Tag <article>
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 website. Potential sources for the article element would be, forum posts, blog
posts, new stories and comments.
Aside Tag <aside>
The <aside> tag defines some content aside from the content it is placed in. The aside
content should be related to the surrounding content.

Details Tag <details>

The <details> tag specifies additional details that the user can view or hide on
demand. The <details> tag can be used to create an interactive widget that the user
can open and close. Any sort of content can be put inside the <details> tag. The
content of a <details> element should not be visible unless the open attribute is set.
The <figcaption> tag defines a caption for a <figure> element. The
<figcaption> element can be placed as the first or last child of the
<figure> element.
Footer Tag <footer>
The <footer> tag now defines a footer for a document or section.
Usually, a footer element should contain information about its
containing element. A footer element typically contains authorship
information, copyright information, site map, contact information, back
to top links and related documents. You can also have several <footer>
elements in one document.
Header Tag <header>
The <header> element represents a container for introductory content
or a set of navigational links. A header is typically used and contains one
or more heading elements, logo or icon and authorship information.
You can also include the navigation here.
Main Tag <main>
The <main> tag specifies the main content of a document. The content
inside the <main> element should be unique to the document. It should
not contain any content that is repeated across documents such as
sidebars, navigation links, copyright information, site logos, and search
forms.
Figure Tag <figure>
The <figure> tag specifies self-contained content, like illustration, diagram, photos, code listing,
etc. While the content of the <figure> element is related to the main flow, its position is
independent of the main flow and if removed it should not affect the flow of the document.
Figure Caption Tag <figcaption>
The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be
placed as the first or last child of the <figure> element.
Footer Tag <footer>
The <footer> tag now defines a footer for a document or section. Usually, a footer element
should contain information about its containing element. A footer element typically contains
authorship information, copyright information, site map, contact information, back to top links
and related documents. You can also have several <footer> elements in one document.
Header Tag <header>
The <header> element represents a container for introductory content or a set of navigational
links. A header is typically used and contains one or more heading elements, logo or icon and
authorship information. You can also include the navigation here.
Main Tag <main>
The <main> tag specifies the main content of a document. The content inside the <main>
element should be unique to the document. It should not contain any content that is repeated
across documents such as sidebars, navigation links, copyright information, site logos, and
search forms.
Mark Tag <mark>
The <mark> tag defines marked text. You should use the <mark> tag if you want to
highlight the parts of your text.
Navigation Tag <nav>
The <nav> tag defines a set of navigation links. Notice that not all links of a
documents should be inside the navigation tag element. The navigation element is
only intended for major blocks of navigation links. However, browsers such as screen
readers for disabled users can use this elements to determine whether to omit the
initial rendering of this content.
Section Tag <section>
The <section> tag defines sections in a document such as chapters, headers, footers,
or any other sections of the document. It will serve as one of the biggest part in your
website to hold your contents.
Summary Tag <summary>
The <summary> tag defines a visible heading for the <details> element. The heading
can be clicked to view/hide the details.
Now let’s start creating webpages! In this hands - on exercise, you will learn how to
start creating a project as well as building your website’s HTML structures.
Additional knowledge:
The CSS Box Model
In CSS, developers refer to the term box
model when dealing about design and layout.
A box model is a box that wraps around every
HTML element. Basically, it consists of:
Margins - Area outside the border.
Borders - A border that goes around the
padding and content.
Padding - An area around the content
Thank you