Meaningful HTML

Talk on meaningful HTML @Big Design Day http://buxpa.org/bigdesignday

Transcript

1. Meaningful HTML Importance of Semantic HTML BIG DESIGN DAY2015 Shajed Evan
2. Organizers
3. WHAT?? & WHY??
4. Website Contents of different types =
5. Contents with Meaning Goals & for target group!!
6. Which Target Group?
7. Human ……
8. of Human different cultures, ages, values, tastes & needs
9. Human Interacts better with Visual Interface
10. User Interface
11. limited to Visuals Not only…
12. Human Machine &
13. Improving accessibility, search engine indexing, most important of all …. browser compatibility, &
14. Smart Capabilities on Enhance Devices Systems
15. Smart Phones
16. Smart TV
17. Voice-Guided GPS Navigation Device Accessible Web Apps
18. Localization Service
19. Structured Data Markup https://support.google.com/webmasters/answer/3069489?topic=3070267&rd=1
20. HTML serves Specific Meaning to Machines
21. <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
22. 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
23. Sample Page Layout
24. Intended Page Layout
25. <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 ….
26. Introducing HTML5 Section <section>, <header> <aside>, <article> <nav>, <footer> http://diveintohtml5.info/semantics.html
27. HTML5 Input
28. <!-­‐-­‐  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
29. Visual Webpage Safari
30. Text View Lynx Browser
31. “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
32. BIG DESIGN DAY2015 Thanks You Shajed Evan http://byevan.com