Meaningful HTML - A talk on structured markups

Meaningful HTMLImportance of Semantic HTML

Shajed Evan

WHAT??&

WHY??

WebsiteContents of different types

=

Contents withMeaning

Goals&

for target group!!

Which Target Group?

Human……

of

Human

differentcultures, ages,

values, tastes&needs

HumanInteract

s betterwith

Visual Interface

User Interface

limited to

Visuals

Not

only…

Human

Machine&

Improving

accessibility,search engine indexing,

most important of all ….

browser compatibility,&

Smart

Capabilitieson

Enhance

Devices Systems

Smart Phones

Smart TV

Voice-Guided

GPS Navigation

Device Accessible Web Apps

Localization

Service

Structured Data Markup

https://support.google.com/webmasters/answer/3069489?topic=3070267&rd=1

HTML

serves Specific

Meaning to

Machines

<div>

Come hear the Tiny Tim Tribute Band, live in concert on

July 6, 2013 at the beautiful Regency Theater!

</div>

Structured Data Markup

Example

Common structure

Structured Data Markup

Example

Microdata structure

<div itemscope itemtype="http://schema.org/Event">

Come hear the

<span itemprop="name">Tiny Tim Tribute Band</span>,

live in concert on

<span itemprop="startDate"

content="2013-07-06>July 6, 2013</span>

at the beautiful

<span itemprop="location" itemscope

itemtype="http://schema.org/Place">

<span itemprop="name">Regency Theater</span>!

</span>

</div>

http://schema.org

Sample

Page Layout

Intended

Page Layout

<div class="parent"> <h2>Heading</h2> <p>Some content...</p> <div class="child"> <h2>Another heading</h2> <p>Some other content...</p> </div> </div>

Not Helping ….

Introducing

HTML5 Section

<section>, <header>

<aside>, <article>

<nav>, <footer>

http://diveintohtml5.info/semantics.html

HTML5Input

<!-- A common form that includes input tags --><form action="getform.php" method="get"> First name: <input type="text" name="first_name" /><br /> Last name: <input type="text" name="last_name" /><br /> E-mail: <input type="email" name="user_email" /><br /><input type="submit" value="Submit" /></form>

HTML5 Input

Visual

Webpage Safari

Text ViewLynx Browser

“HTML is not a collection of tags that we used to see. It is at it’s best when it reflects the meaning of the contents, made for it’s users”

- Shajed Evan

Thanks YouShajed Evan

http://byevan.com