0
HTML5 Semantic Web<br />Terry Ryan |  Worldwide Developer Evangelist<br />@tpryan<br />
Who are you?<br />2<br />
Not Sexy and Adventurous<br />3<br />
It’s everyday stuff<br />4<br />
Agenda<br />Introduction<br />Overview of Semantics<br />New Semantic elements <br />New Semantic attributes <br />New For...
Overview<br />6<br />Semantics <br />
Semantic HTML means your markup describes it’s content without Presenting it <br />7<br />
What do we mean by Semantic HTML<br />HTML where proper elements are used<br /><p> denotes paragraph<br /><ul> denotes an ...
Semantic HTML is a moving target<br />Not Boolean<br />Not always objective<br />A continuum<br />9<br />
Semantic HTML<br /><body background="css/bg.png"><br /><font face="Calibri”><center><br /><table width="800" bgcolor="#FFF...
HTML5?<br />11<br />What does this have to do with HTML5?<br />
HTML5 adds more semantics<br /><body><br /><header><br /><h1>The Awesome Blog of Awesome</h1><br /><p>Awesome is a State o...
Introducing The Awesome Blog of Awesome<br />13<br />HTML5<br />XHTML<br />
Elements<br />14<br />
Header<br />15<br />
Header<br /><div id="header"><br /><h1>The Awesome Blog of Awesome</h1><br />	<p class="tagline">Awesome is a State of Min...
Hgroup?<br />17<br />What’s the <hgroup> all about?<br />
Hgroup<br />18<br /><hgroup><br /><h1></h1><br />	<h2></h2><br /></hgroup><br />It’s for grouping related headers, that do...
Hgroup?<br />19<br />Huh?<br />
Effect of hgroup<br /><ul><li>H1 – Awesome Blog of Awesome
H2 - Awesome is a State of Mind
H2 - Recent Posts
H3 I Made a Post Thingie
H3 My Thoughts are made manifest </li></ul>20<br /><ul><li>H1 – Awesome Blog of Awesome
H2 Recent Posts
H3 I Made a Post Thingie
H3 My Thoughts are made manifest </li></ul>No Hgroup<br />With HGroup<br />
Hgroup?<br />21<br />Still huh?<br />
Outlines<br />Outlines seem really important to the people who push semantic HTML 5<br />Are they really important?<br />T...
Footer<br />23<br />
Footer<br /><div id="footer”><br /><p>Copyright 2011 - Terry Ryan</p><br /></div><br />24<br /><footer><br /><p>Copyright ...
Navigation<br />25<br />
Navigation<br /><div id="nav"><br />  <ul><br />    <li><a href="">Home</a></li><br />    <li><a href="">Blog</a></li><br ...
Articles<br />27<br />
Articles<br /><divclass="post”><br /><divclass="postheader"><br /><h3><ahref="">I Scream My Thoughts</a></h3><br /><pclass...
An article is a piece of content that can stand on it’s own<br />29<br />
Date and Time<br /><time datetime={datetime} pubdate>Human Readable String</time><br />Datetime<br />Date: 2011-09-20<br /...
Date Time<br />31<br />Just the <br />letter T<br />2011-09-20T20:00Z<br />Z for <br />Zulu Time<br />Hours:Minutes<br />Y...
Section?<br />32<br />There’s also this thing called “<section>” how does that work. <br />
An Article is a piece of stand-alone content<br />33<br />
Blog Post<br />34<br />
Or a comment<br />35<br />
A section is a collection of related pieces of content<br />36<br />
37<br />
Articles can contain Sections<br />38<br />
Blog Post<br />39<br />Article<br />Section<br />Section<br />Section<br />
Sections can contain Articles<br />40<br />
Articles can contain other articles<br />41<br />
42<br />Article<br />Section<br />Section<br />Section<br />Article<br />Article<br />
Content<br />43<br />
Content<br /><divclass=”content”><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> <...
Also can be correct<br /><divclass=”content”><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br />...
Umm<br />46<br />That’s great, but frankly not that much of a different, how is that better?<br />
Benefit 1<br />  </div><br /> </div>    <br /></div><br /><div id=“footer”><br /></div><br /></body><br />47<br />  </div>...
Benefit 2<br />Less monkeying with content hierarchies<br />48<br />
49<br />Post Page<br />Main Page<br />Archive Page<br /><article><br /> <header><br />  <h1><a href="">I Made a Post Thing...
Benefit 3<br />No longer bound to one header or one navcan have multiple. <br />50<br />
New Elements work across Modern Browsers without Fail<br />51<br />
What’s you’re definition of Modern?<br />52<br />
Use the HTML 5 Shiv<br />53<br />http://code.google.com/p/html5shiv/<br />
Attributes<br />54<br />
data<br />55<br /><ul><li>Add “data-” to anything to make your content contain data
Uses?
Scritping
Microformats
Perhaps future Search Engine hints.</li></ul><p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p><br />
These next things aren’t semantic, just kinda cool<br />56<br />
contenteditable<br />57<br /><ul><li>Allows any text to be user editable, not just input and textareas.
Uses
Better CMS systems
Comment previews</li></ul><p contenteditable="true” class="comment">Comment</p><br />
spellcheck<br />58<br /><ul><li>Allows any field that is user editable to trigger the browser’s spellcheck interface
Uses:
No one spellchecks anything they post on the web
But you will have the moral high ground to point out on your site they could have. </li></ul><p contenteditable="true" spe...
Form<br />59<br />Input<br />
HTML5 includes lots of new Input types<br />60<br />
They aren’t supported on every browser<br />61<br />
All browsers default to showing unknown input types as Text<br />62<br />
Search<br />63<br /><ul><li>Support is spotty
Browser vendors tend to round, add magnifying glass, etc. </li></ul><input type=“search” name=“search” /><br />
Email<br />64<br /><ul><li>Provides validation
Provides email keyboard on iOS devices.</li></ul><input type=“email” name=“email” /><br />
Url<br />65<br /><ul><li>Provides validation
Provides url keyboard on iOS devices.</li></ul><input type=“url” name=“url” /><br />
Number<br />66<br /><ul><li>Provides keypad on iOS and Android devices.
Provides a stepper on desktops
Takes attributes:
Min/Max
Step</li></ul><input type=“number” name=“cost” /><br />
Tel<br />67<br /><ul><li>Provides keypad on iOS and Android devices.</li></ul><input type=“tel” name=“cell” /><br />
Not well supported, but have potential<br />68<br />
Range<br />69<br /><ul><li>Provides a set of values
The slider allows you to pick one
Not terribly precise
Takes attributes:
Min/Max
Step</li></ul><input type=“range” name=“volume” /><br />
Date<br />70<br /><ul><li>Provides validation
On Opera
Displays a data picker
On Safari/Chrome
Displays ticker
Upcoming SlideShare
Loading in...5
×

HTML5 Semantic Web

1,951

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,951
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Semantic Web"

  1. 1. HTML5 Semantic Web<br />Terry Ryan | Worldwide Developer Evangelist<br />@tpryan<br />
  2. 2. Who are you?<br />2<br />
  3. 3. Not Sexy and Adventurous<br />3<br />
  4. 4. It’s everyday stuff<br />4<br />
  5. 5. Agenda<br />Introduction<br />Overview of Semantics<br />New Semantic elements <br />New Semantic attributes <br />New Form Input Types<br />New Form attributes<br />Pitfalls<br />Conclusions<br />5<br />
  6. 6. Overview<br />6<br />Semantics <br />
  7. 7. Semantic HTML means your markup describes it’s content without Presenting it <br />7<br />
  8. 8. What do we mean by Semantic HTML<br />HTML where proper elements are used<br /><p> denotes paragraph<br /><ul> denotes an list of items, where the order is not important <br /><address> contains address information<br /><div> and <span> are used to describe information<br />HTML where extraneous elements are not misused<br />No <p> for line breaking<br />No <blockquote> for indentation<br />No <h1> for big text<br />HTML without presentation information<br />No <font>, <b>, <i> tags<br />No inline styles<br />8<br />
  9. 9. Semantic HTML is a moving target<br />Not Boolean<br />Not always objective<br />A continuum<br />9<br />
  10. 10. Semantic HTML<br /><body background="css/bg.png"><br /><font face="Calibri”><center><br /><table width="800" bgcolor="#FFFFFF" border="10" bordercolor="#FFFFFF"><br /><tr><td><br /><tablewidth="100%" bgcolor="#f0f0f0" border="0“><br /><tr><br /><td><h1><br /><fontface="Palatino Linotype">The Awesome Blog ofAwesome</font><br /></h1><br /></td><br /></tr><br /><tr> <br /><td align="right"><p><i>Awesome is a State of Mind</i></p></td><br /></tr><br /></table><br />10<br /><body><br /><div id="header"><br /><h1>The Awesome Blog of Awesome</h1><br /><p class="tagline">Awesome is a State of Mind</p><br /></div><br />Relatively Unsemantic<br />Relatively Semantic<br />
  11. 11. HTML5?<br />11<br />What does this have to do with HTML5?<br />
  12. 12. HTML5 adds more semantics<br /><body><br /><header><br /><h1>The Awesome Blog of Awesome</h1><br /><p>Awesome is a State of Mind</p><br /></header><br /><nav><br /><ul><br /><li><ahref="">Home</a></li><br /><li><ahref="">Blog</a></li><br /><li><ahref="">About</a></li><br /><li><ahref="">Contact</a></li><br /></ul><br /></nav><br />12<br />
  13. 13. Introducing The Awesome Blog of Awesome<br />13<br />HTML5<br />XHTML<br />
  14. 14. Elements<br />14<br />
  15. 15. Header<br />15<br />
  16. 16. Header<br /><div id="header"><br /><h1>The Awesome Blog of Awesome</h1><br /> <p class="tagline">Awesome is a State of Mind</p><br /></div><br />16<br /><header><br /><hgroup><br /><h1>The Awesome Blog of Awesome</h1><br /><h2>Awesome is a State of Mind</h2><br /></hgroup><br /></header><br />HTML 5<br />Previously<br />
  17. 17. Hgroup?<br />17<br />What’s the <hgroup> all about?<br />
  18. 18. Hgroup<br />18<br /><hgroup><br /><h1></h1><br /> <h2></h2><br /></hgroup><br />It’s for grouping related headers, that don’t spawn their own node in the outline<br />
  19. 19. Hgroup?<br />19<br />Huh?<br />
  20. 20. Effect of hgroup<br /><ul><li>H1 – Awesome Blog of Awesome
  21. 21. H2 - Awesome is a State of Mind
  22. 22. H2 - Recent Posts
  23. 23. H3 I Made a Post Thingie
  24. 24. H3 My Thoughts are made manifest </li></ul>20<br /><ul><li>H1 – Awesome Blog of Awesome
  25. 25. H2 Recent Posts
  26. 26. H3 I Made a Post Thingie
  27. 27. H3 My Thoughts are made manifest </li></ul>No Hgroup<br />With HGroup<br />
  28. 28. Hgroup?<br />21<br />Still huh?<br />
  29. 29. Outlines<br />Outlines seem really important to the people who push semantic HTML 5<br />Are they really important?<br />Today: No<br />Tomorrow: Who knows?<br />But this is a semantically correct way of reducing classes and extraneous divs<br />22<br />
  30. 30. Footer<br />23<br />
  31. 31. Footer<br /><div id="footer”><br /><p>Copyright 2011 - Terry Ryan</p><br /></div><br />24<br /><footer><br /><p>Copyright 2011 - Terry Ryan</p><br /></footer><br />HTML 5<br />Previously<br />
  32. 32. Navigation<br />25<br />
  33. 33. Navigation<br /><div id="nav"><br /> <ul><br /> <li><a href="">Home</a></li><br /> <li><a href="">Blog</a></li><br /> <li><a href="">About</a></li><br /> <li><a href="">Contact</a></li><br /> </ul><br /></div><br />26<br /><nav><br /><ul><br /> <li><a href="">Home</a></li><br /> <li><a href="">Blog</a></li><br /> <li><a href="">About</a></li><br /> <li><a href="">Contact</a></li><br /> </ul><br /></nav><br />Previously<br />HTML 5<br />
  34. 34. Articles<br />27<br />
  35. 35. Articles<br /><divclass="post”><br /><divclass="postheader"><br /><h3><ahref="">I Scream My Thoughts</a></h3><br /><pclass="date">August 10, 2011</p><br /></div><br /><p>You probably haven't heard of them duis</p><br /></div><br />28<br /><article><br /> <header><br /> <h1><ahref="">I Scream My Thoughts</a></h1><br /> <time>August 10, 2011</time><br /> </header><br /> <p>You probably haven't heard of them duis</p><br /></article><br />Previously<br />HTML5<br />
  36. 36. An article is a piece of content that can stand on it’s own<br />29<br />
  37. 37. Date and Time<br /><time datetime={datetime} pubdate>Human Readable String</time><br />Datetime<br />Date: 2011-09-20<br />Datetime: 2011-09-20T20:00Z<br />Datetime: 2011-09-20T20:00+00:00<br />Pubdate<br />Used with article to denote that this particular time is the publication date. <br />30<br />
  38. 38. Date Time<br />31<br />Just the <br />letter T<br />2011-09-20T20:00Z<br />Z for <br />Zulu Time<br />Hours:Minutes<br />Year-Month-Day<br />Just the <br />letter T<br />2011-09-20T20:00+00:00<br />Year-Month-Day<br />Hours:Minutes<br />Time Zone Offset<br />
  39. 39. Section?<br />32<br />There’s also this thing called “<section>” how does that work. <br />
  40. 40. An Article is a piece of stand-alone content<br />33<br />
  41. 41. Blog Post<br />34<br />
  42. 42. Or a comment<br />35<br />
  43. 43. A section is a collection of related pieces of content<br />36<br />
  44. 44. 37<br />
  45. 45. Articles can contain Sections<br />38<br />
  46. 46. Blog Post<br />39<br />Article<br />Section<br />Section<br />Section<br />
  47. 47. Sections can contain Articles<br />40<br />
  48. 48. Articles can contain other articles<br />41<br />
  49. 49. 42<br />Article<br />Section<br />Section<br />Section<br />Article<br />Article<br />
  50. 50. Content<br />43<br />
  51. 51. Content<br /><divclass=”content”><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /></div><br />44<br /><divclass=”content”><br /> <article><br /> ...<br /> </article><br /><article><br /> ...<br /> </article><br /><article><br /> ...<br /> <article><br /></div><br />Previously<br />HTML5<br />
  52. 52. Also can be correct<br /><divclass=”content”><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /> <divclass="post”><br /> ...<br /> </div><br /></div><br />45<br /><section class=”content”><br /> <article><br /> ...<br /> </article><br /><article><br /> ...<br /> </article><br /><article><br /> ...<br /> <article><br /></section><br />Previously<br />HTML5<br />
  53. 53. Umm<br />46<br />That’s great, but frankly not that much of a different, how is that better?<br />
  54. 54. Benefit 1<br /> </div><br /> </div> <br /></div><br /><div id=“footer”><br /></div><br /></body><br />47<br /> </div><br /> </article> <br /></div><br /><footer><br /></footer><br /></body><br />Before these Elements<br />After<br />
  55. 55. Benefit 2<br />Less monkeying with content hierarchies<br />48<br />
  56. 56. 49<br />Post Page<br />Main Page<br />Archive Page<br /><article><br /> <header><br /> <h1><a href="">I Made a Post Thingie</a></h1><br /> <time datetime="2011-09-02">September 2, 2011</time><br /> </header><br /> <imgsrc="img/captain-awesome.jpg" width="300" height="200" alt="Image of Captain Awesome" /><br /> <p>DIY eanulla photo booth temporoccaecat, velitnihilmixtapescenester. <br /> Irony laboris echo park, wolf officia vice cupidatatlabore butcher freegan<br /> farm-to-table nisi velitaliqua gluten-free. Aliquipnesciuntassumenda, <br /> wayfarers seitan wolf reprehenderitnulla twee sartorial dolore food truck <br />voluptateex vinyl. Aliquip ex enim, irony terry richardson trust fund consectetur<br />fappariatur dolor. Lo-fi nulla whatever mlkshk, banksyamerican apparel carles<br />adipisicingincididunt wolf photo booth hipster. Wayfarers four loko ex cosby sweater, <br />adipisicingsartorial non cardigan craft beer cillumreprehenderit terry richardson<br /> 3 wolf moon mollit. Ethical utlabore beard, 3 wolf moon duis readymade assumenda<br /> hipster tofu mcsweeney's master cleanse.</p><br /></article><br />article header h1<br />Article<br />Article<br />Article<br />
  57. 57. Benefit 3<br />No longer bound to one header or one navcan have multiple. <br />50<br />
  58. 58. New Elements work across Modern Browsers without Fail<br />51<br />
  59. 59. What’s you’re definition of Modern?<br />52<br />
  60. 60. Use the HTML 5 Shiv<br />53<br />http://code.google.com/p/html5shiv/<br />
  61. 61. Attributes<br />54<br />
  62. 62. data<br />55<br /><ul><li>Add “data-” to anything to make your content contain data
  63. 63. Uses?
  64. 64. Scritping
  65. 65. Microformats
  66. 66. Perhaps future Search Engine hints.</li></ul><p data-firstname=“Terry” data-lastname=“Ryan”>Terry Ryan</p><br />
  67. 67. These next things aren’t semantic, just kinda cool<br />56<br />
  68. 68. contenteditable<br />57<br /><ul><li>Allows any text to be user editable, not just input and textareas.
  69. 69. Uses
  70. 70. Better CMS systems
  71. 71. Comment previews</li></ul><p contenteditable="true” class="comment">Comment</p><br />
  72. 72. spellcheck<br />58<br /><ul><li>Allows any field that is user editable to trigger the browser’s spellcheck interface
  73. 73. Uses:
  74. 74. No one spellchecks anything they post on the web
  75. 75. But you will have the moral high ground to point out on your site they could have. </li></ul><p contenteditable="true" spellcheck="spellcheck" class="comment">Comment</p><br />
  76. 76. Form<br />59<br />Input<br />
  77. 77. HTML5 includes lots of new Input types<br />60<br />
  78. 78. They aren’t supported on every browser<br />61<br />
  79. 79. All browsers default to showing unknown input types as Text<br />62<br />
  80. 80. Search<br />63<br /><ul><li>Support is spotty
  81. 81. Browser vendors tend to round, add magnifying glass, etc. </li></ul><input type=“search” name=“search” /><br />
  82. 82. Email<br />64<br /><ul><li>Provides validation
  83. 83. Provides email keyboard on iOS devices.</li></ul><input type=“email” name=“email” /><br />
  84. 84. Url<br />65<br /><ul><li>Provides validation
  85. 85. Provides url keyboard on iOS devices.</li></ul><input type=“url” name=“url” /><br />
  86. 86. Number<br />66<br /><ul><li>Provides keypad on iOS and Android devices.
  87. 87. Provides a stepper on desktops
  88. 88. Takes attributes:
  89. 89. Min/Max
  90. 90. Step</li></ul><input type=“number” name=“cost” /><br />
  91. 91. Tel<br />67<br /><ul><li>Provides keypad on iOS and Android devices.</li></ul><input type=“tel” name=“cell” /><br />
  92. 92. Not well supported, but have potential<br />68<br />
  93. 93. Range<br />69<br /><ul><li>Provides a set of values
  94. 94. The slider allows you to pick one
  95. 95. Not terribly precise
  96. 96. Takes attributes:
  97. 97. Min/Max
  98. 98. Step</li></ul><input type=“range” name=“volume” /><br />
  99. 99. Date<br />70<br /><ul><li>Provides validation
  100. 100. On Opera
  101. 101. Displays a data picker
  102. 102. On Safari/Chrome
  103. 103. Displays ticker
  104. 104. IE
  105. 105. Dashes your hopes and dreams the way only IE can</li></ul><input type=“date” name=“dob” /><br />
  106. 106. Form Elements<br />71<br />
  107. 107. Output<br />Semantically correct placeholder for calculated values.<br />Can also be used a label for input type=“slider”<br /><output /><br />
  108. 108. Output in Action<br />73<br /><form class="order"><br /><label for="quantity">Quantity:</label><br /><input id="quantity" name="quantity" type="number" value="1" onChange="calc()" /><br /><br/><br /><label for="price">Price: </label><br /><input id="price" name="price" type="number" value="19.99" disabled /><br /><br/><br /><label for="total">Total: </label><br /><output id="total" name="total" /><br /><br/><br /></form><br /><script type="application/javascript"><br />function calc(){<br />varquantity = document.getElementById("quantity").value;<br />varprice = document.getElementById("price").value; <br />vartotal = document.getElementById("total");<br />total.value= Math.round(quantity * price * 100)/100; <br />}<br /></script><br />
  109. 109. meter<br />74<br />Basically a Bar Chart of results<br /><meter min=“0” max=“20” value=“12”>12cm</meter><br />
  110. 110. progress<br />75<br />Could be used to indicate progress through a multistep form<br />Could be programmatically changed to indicate progress of program<br /><progress min=“100” value=“20”>20%</progress><br />
  111. 111. Pitfalls<br />76<br />
  112. 112. Remember 10 years ago?<br />77<br />
  113. 113. On Tableless designs<br />78<br />Don’t use tables for layout, use CSS.<br />Tables are for tabular data. They are just one of the tools in your toolkit. <br />Holzschlag<br />Shea<br />Icons by:<br />http://www.ngenworks.com/<br />Zeldman<br />
  114. 114. What people heard<br />79<br />Don’t use tables for layout, use CSS.<br />Tables are for tabular data. They are just one of the tools in your toolkit. <br />Holzschlag<br />Shea<br />Icons by:<br />http://www.ngenworks.com/<br />Zeldman<br />
  115. 115. I’m not saying<br />80<br />Don’t use div’swhen there are semantic elements that make sense. Div’s are stillgood fordenoting thingsthat have no semantic equivalent<br />
  116. 116. I’m not saying<br />81<br />Don’t use div’s when there are semantic elements that make sense. Div’s are still good for denoting things that have no semantic equivalent<br />
  117. 117. You are not requiredto do any of what I just said<br />82<br />
  118. 118. Article vs. Section<br />83<br />
  119. 119. Nav vs. Menu<br />84<br />
  120. 120. A lot of this stuff is in Flux<br />85<br />
  121. 121. Conclusions<br />86<br />
  122. 122. Can you use it?<br />87<br />
  123. 123. On Desktops<br />88<br />
  124. 124. The most common browsers have crappy HTML 5 support <br />89<br />Source: https://netaverages.adobe.com<br />
  125. 125. New Elements<br />Supported on most browsers<br />If they are not supported, can be enabled using the HTML 5 Shiv<br />90<br />
  126. 126. New Attributes<br />Supported on most browsers<br />If they are not supported, they have no impact.<br />91<br />
  127. 127. New Form Inputs<br />Support wildly varies<br />If they are not supported, they have no impact.<br />92<br />
  128. 128. New Form Elements<br />Support wildly varies<br />Mimic things that have been provided by JavaScript for years<br />93<br />
  129. 129. On Mobile<br />94<br />
  130. 130. 95<br />
  131. 131. Big Question: Why use this stuff??<br />96<br />
  132. 132. 97<br />It’s Also about the Annoyed Reader<br />Used to be about the “Blind Billionaire<br />
  133. 133. All They Care About is this<br />98<br />Content<br />
  134. 134. More Content here<br />More <br />Content here<br />More <br />Content here<br />We can tell them<br />99<br />Content<br />
  135. 135. And increase the understandability of your code<br />100<br />
  136. 136. For Future Reference<br />HTML 5 General <br />http://diveintohtml5.org<br />http://html5doctor.com<br />HTML5 Semantics<br />http://diveintohtml5.org/semantics.html<br />HTML 5 Forms<br />http://wufoo.com/html5<br />http://diveintohtml5.org/forms.html<br />101<br />
  137. 137. Follow up?<br />Feel free to contact me<br />terry.ryan@adobe.com<br />http://terrenceryan.com<br />Twitter: @tpryan<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×