HTML5 introduction

 HTML DOCTYPE
 Semantic Elements
 Structural Tags
 Form Elements

 The <!DOCTYPE> declaration is not an HTML
tag.
 HTML5 is not based on SGML.
 Tip: Always add the <!DOCTYPE> declaration
to your HTML documents, so that the browser
knows what type of document to expect.

 The purpose of a DTD (Document Type
Definition) is to define the legal building
blocks of an XML document.
 A DTD defines the document structure
with a list of legal elements and
attributes.
 The Standard Generalized Markup
Language is for defining
generalized markup languages for
documents.

 Semantics means (from Ancient Greek), is
the study of meaning.
 Semantic elements are elements with a
meaning.
Examples of non-semantic elements: <div>
and <span> - Tells nothing about its
content.
Examples of semantic elements: <form>,
<table>, and <img> - Clearly defines its
content.

 The <section> element represents a generic
section of a document or application.
 According to W3C's HTML5 documentation: "A
section is a thematic grouping of content,
typically with a heading."
 A Web site's home page could be split into
sections for introduction, content, and contact
information.
 With Section elements, you can use h1
elements through out, without having to worry
about whether a particular section is at the top
level, the second level, the third level and so
on.

 The article element represents a complete,
or self-contained, composition in a
document, page, application, or site and
that is, in principle, independently
distributable or reusable, e.g. in syndication.
 This could be a forum post, a magazine or
newspaper article, a blog entry, a user-
submitted comment, an interactive widget
or gadget, or any other independent item
of content.

 Typical Page Structure
 Header (or masthead) at the top of the page, usually
containing the top level heading of the page, and/or
a company logo. This is the big bold statement at the
top of the page that says what the web site is, and
who it belongs to.
 Main content column, which holds the main content
of functionality you are here to use.
 One of more sidebars, holding tributary content that
is either related to that page's main content and
changes as new pages are loaded (eg related links),
or is always relevant and persists across the whole site
(eg "your basket" information on an e-commerce
site).

 Navigation menu going across the page
or down the page in a column. This often
put in a sidebar, or may form part of the
header.
 A footer that goes across the bottom of
the site and contains secondary
information such as copyright
information and contact details.

 <body>
› <div id="header">
› 
› </div>
› <div id="nav">
› 
</div>
<div id="sidebar1">
 
</div>
<div id="main">
 
</div>
<div id="sidebar2">
 
</div>
<div id="footer">
 
</div>
 </body>

 <header>: Used to contain the header content of a
site.
 <footer>: Contains the footer content of a site.
 <nav>: Contains the navigation menu, or other
navigation functionality for the page.
 <article>: Contains a standalone piece of content
that would make sense if syndicated as an RSS item,
for example a news item.
 <section>: Used to either group different articles into
different purposes or subjects, or to define the
different sections of a single article.
 <aside>: Defines a block of content that is related to
the main content around it, but not central to the
flow of it.

 The <nav> element is for marking up the
navigation links or other constructs (eg a
search form) that will take you to
different pages of the current site, or
different areas of the current page.
 Other links, such as sponsored links, do
not count. You can of course include
headings and other structuring elements
inside the <nav>, but it's not compulsory.

 <aside> element to mark-up the 2nd
sidebar: the one containing latest gigs and
contact details.
 <aside> is for marking up pieces of
information that are related to the main
flow, but don't fit in to it directly.
 Other good choices for an <aside> would
be information about the author of the blog
post(s), a band biography, or a band
discography with links to buy their albums.

 An HTML element in a web page may not be
recognised by browsers.
 By default the browser will just treat it like
a <span>, i.e., an anonymous inline element.
 Most of the HTML5 elements we have looked at
are supposed to behave like block elements,
therefore the easiest way to make them
behave properly in older browsers is by setting
them to display: block; in your CSS.
 You can do this by including the following CSS
rule at the top of your CSS, whether it is
contained in the head of your HTML file, or an
external CSS file.

 article, section, aside, hgroup, nav, header,
footer, figure, figcaption
{
display: block;
}
Note: for IE 6 & below
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>

 The <form> element represents a user-
submittable form.
<form action="http://www.google.com/search"
method="get">
<label>Google:
<input type="search" name="q">
<input type="submit" value="Search...">
</form>

HTML5 introduction

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML5 introduction

Similar to HTML5 introduction (20)

Recently uploaded

Recently uploaded (17)

HTML5 introduction