So you think you know HTML?

HTML HyperText Markup Language

Format <taginanglebrackets> Informations relevant to tag </taginanglebrackets> <img src=“picture.jpg”
alt=“My picture of…” /> Which tag/element is important! Acessibility, readablity, useability – it DOES make your life easier!

Page structure !DOCTYPE html <html> <head> </head> <body> </body>
</html>

You probably know: <h1> <h2> <h3>… <h6> <p> <a>
<b> <strong> <i> <em> <br /> <span> <ul> <ol> <dl> <li> <dt> <dd> <table> <caption> <thead> <tr> <th> <td> <blockquote> <pre>&<code> <form> <input> <select>

SecKoning <div> <section> <article> <header> <nav> <footer> <main> is
on its way!

FormaLng <del> deleted text <mark> highlighted <ins>
inserted <dfn title=“definition”>term</dfn> <abbr title=“United Kingdom”>UK</abbr> <kbd> keyboard <samp> sample output from program <var> equaKon variable <small> <sub> <sup> <bdi> <bdo> <wbr> word break opportunity <ruby> <rt> <rp>

Forms <input> Lots of new types: • email
• search • url • date • color • number • range <output> <button> more use

Media et al <video src="videofile.ogg" poster="posterimage.jpg" controls> Sorry, your
browser doesn't support embedded videos, but don't worry, you can <a href="videofile.ogg">download it</a> </video> <audio src=”myaudio.ogg" controls> Sorry, your browser does not support the <code>audio</code> element. </audio> <figure> <figcaption> <canvas>

Other <details> <summary>This is a summary</summary> <p>This is where
the details would go…</p> </details> <menu> It’s back! <time> <meter> <progress>

Not all the things More to think about… ﬁnd
out more

Further reading W3C HTML5 DocumentaKon hYp://dev.w3.org/html5/html-‐author/ HTML5
Rocks! hYp://www.html5rocks.com/en/ HTML5 Doctor hYp://html5doctor.com Mozilla Docs hYps://developer.mozilla.org/en-‐US/docs/HTML/ HTML5

So you think you know HTML?

So you think you know HTML?

Ruth John (Rumyra)

More Decks by Ruth John (Rumyra)

Other Decks in Programming

Featured

Transcript

So you think you know HTML?

HTML HyperText Markup Language

Format <taginanglebrackets> Informations relevant to tag </taginanglebrackets> <img src=“picture.jpg”

Page structure !DOCTYPE html <html> <head> </head> <body> </body>

You probably know: <h1> <h2> <h3>… <h6> <p> <a>

SecKoning <div> <section> <article> <header> <nav> <footer> <main> is

FormaLng <del> deleted text <mark> highlighted <ins>

Forms <input> Lots of new types: • email

Media et al <video src="videofile.ogg" poster="posterimage.jpg" controls> Sorry, your

Other <details> <summary>This is a summary</summary> <p>This is where

Not all the things More to think about… ﬁnd

Further reading W3C HTML5 DocumentaKon hYp://dev.w3.org/html5/html-‐author/ HTML5