Semantic Web

Table of Contents
Web Page
HTML, CSS and JavaScript
The Semantic HTML
HTML5 Semantic Tags
Other Semantics

Web Page

The Elements of a Web Page
A Web page consists of:
HTML markup
CSS rules
JavaScript code
JS libraries
Images
Other resources
Fonts, audio, video, etc…

The Elements of a Web Page:
HTML Markup
The HTML is used to define
the content of a Web page
Not the layout
Not the decorations
HTML's role is to present the
information in a meaningful manner
Like a paper document
Define headers, paragraphs, textboxes, etc…
Not define size, color and/or positioning

The Elements of a Web Page:
CSS Rules
Cascading Style Sheets (CSS) is the way to make a Web page look pretty
Define styling rules
Fonts, colors, positioning, etc.
Define the layout of the elements
Define the presentation
The CSS files are attached to a web page and the browser applies these styles to elements

The Elements of a Web Page:
JavaScript Code
JavaScript is the programming
language for the Web
Makes the Web pages dynamic
Dynamically adding / removing
HTML elements, applying styles, etc.
Modern JavaScript UI libraries provide UI components like dialog boxes, grids, tabs, etc.
Like CSS the JavaScript files are attached to a web page

The Elements of a Web Page:
Other Resources
Other resources are needed for a Web page to run properly
Images, audio files, video files
Flash / Silverlight / ActiveX objects

The Semantic HTML

Semantic HTML
Semantic HTML is:
The use of HTML markup to reinforce the semantics of the information in Web pages
Rather than merely to define its presentation
A kind of metadata about the HTML content
Semantic HTML is processed by regular Web browsers and other user agents
CSS is used to suggest its
presentation to human users

Why Use Semantic HTML?
Semantic HTML is:
Easier to read by developers
Easier to render by browsers
A way to show the search
engines the correct content

How To Write Semantic HTML
Just follow some guidelines
when creating a Web site
Use HTML5 semantic tags
,
,
,
,
,
Use Headings when you need
to structure the content into sub-headings
In increasing order, staring with
Do not use empty tags
Like a clearing

HTML5 Semantic Tags

HTML5 Semantic Tags
HTML5 introduces semantic structure tags
Imagine the following site:
This is a common Web page structure
Used in 90% of the web sites

HTML5 Semantic Tags (2)
This can be created using
all kind of HTML elements
,
, even Browsers will render invalid /
wrong / pseudo valid HTML
The correct way: use the HTML 5 semantic tags:
More about semantic tags: http://pavelkolev.com/html5-snippets/
…
…
…
…

HTML5 Semantic Tags (3)
Site header or section header or article header
Site footer (sometime can be a section footer)
Site navigation (usually in the header)
Site section (e.g. news, comments, links, …)
Article in a section (e.g. news item)

HTML5 Semantic Tags (4)
Sidebar (usually on the left or on the right)
Figure (a figure, e.g. inside an article)
A caption of a figure (inside the
tag)
/
Audio / video element (uses the built-in player)

HTML5 Semantic Tags (5)
+
Accordion-like widget (can be open / closed)
Group article header + subheader (
+
)
Specifies date / time (for a post / article / news)

details> +
Example
summary
Информация об авторе
Fox Mulder

Other Semantics
Headings, ems, strongs

Other Semantics
Headings
Always use headings (
–
) when you need a heading or title
Like in a MS Word document
Google uses it to mark important content
Strong
vs. Bold
does not mean anything
It just makes the text bolder
marks the text is "stronger" than the other, surrounding text

Other Semantics (2)
Emphasis
vs. Italic
Emphasis does not always mean, that the code should be italic
It could be bolder, italic and underlined
The styles for the emphasis text should be given with CSS
Not by HTML
Old browsers (like IE6)?
Use Modernizr or HTML5shiv
IE6-8, Safari 4.x, Firefox 3.x, iphone 3.x

Homework
Refactor the html web page and make its HTML semantic (use article, header, nav, section, h1…, footer)

Homework(2)
2. Create a web page using semantic HTML (use nav, header, section, h1). Logo is an image!

Homework(3)
Create a web page using semantic HTML
Use some kind of approach to support old (non-HTML5-compatible) Web browsers like IE6-IE8 for all exercises