meaningful html - a talk on structured markups
TRANSCRIPT
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
