<!DOCTYPE html>
2.Figure element
Used to semantically associate captions with their image counterparts.eg;
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>3.redefined <small>
Now refers to small print. For eg; copyrights on the bottom
4.'types' not required for scripts and links
eg:
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>5.No need for quotes for attributes
<p class=myClass id=someId>6.Content Editable
Allows users to edit any elements contained within the link
For eg: a to do list item.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <h2> To-Do List </h2> <ul contenteditable="true"> <li> Break mechanical cab driver. </li> <li> Drive to abandoned factory <li> Watch video of self </li> </ul> </body> </html>7.Email inputs
Not completely reliable, but still usable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form> </body> </html>8.Placeholders
'Values' can also be used but but is erased once the user deletes it.
<input name="email" type="email" placeholder="indrajith@gmail.com" />9.Semantic headers and footers
<header> ... </header> <footer> ... </footer>Not the headers or footers of the page, its just the containers
10. hgroup
Semantically illustrate the relationship between a heading and subheading. The flow of the document
remains unaffected.
<header> <hgroup> <h1> Recall Fan Page </h1> <h2> Only for people who want the memory of a lifetime. </h2> </hgroup> </header>11.required attribute
<input type="text" name="someInput" required>The form cannot be submitted if the someInput field is left blank.
12.autofocus
Autofocus allows us to focus at a particular field automatically. For example, when we go to
google.ca, the search field is autofocused so that we can start typing immediately without clicking.
<input type="text" name="someInput" placeholder="Indy" required autofocus>13.Audio support
Latest browsers support this feature
<audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.mp3" /> <a href="file.mp3">Download this file.</a> </audio>14.Video support
video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg; codecs='vorbis, theora'" /> <source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" /> <p> Your browser is old. <a href="cohagenPhoneCall.mp4">Download this video instead.</a> </p> </video>15.Preload video
<video preload>16.To display controls on video
<video preload controls>17.Support for regular expressions
<form action="" method="post">
<label for="username">Create a Username: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
autofocus
required>
<button type="submit">Go </button>
</form>
18. Mark elementA string wrapped with mark tag is relevant to the current action. For eg. when the user searches
for a particular tag, each occurance of the search element is displayed in mark tags
h3> Search Results </h3> <p> They were interrupted, just after Quato said, <mark>"Open your Mind"</mark>. </p>
No comments:
Post a Comment