What I learned about HTML5 elements while preparing for the Microsoft 70-480 exam

December 1, 2018 Leave a comment

This is the follow-up of the post “What I learned while preparing for the Microsoft 70-480 exam“. Here, I want to share what I found interesting with HTML5 while preparing for the exam.

HTML5

From Wikipedia

HTML 5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard, and subsumes XHTML.

  • DOCTYPE declaration for HTML5 <!DOCTYPE HTML5 >
  • Few HTML5 apis
    1. HTML Geolocation
    2. HTML Drag and Drop
    3. HTML Local Storage
    4. HTML Web Workers
    5. HTML Web Sockets

Elements

  1. The HTML < meta > element represents metadata that cannot be represented by other HTML
  2. Form submission elements are <textarea>, <select>, <input>, and <button>
  3. Use a <button type=’submit’>, <input type=’submit’>, or <input type=’image’> to submit a form.
  4. The <output> tag represents the result of a calculation
  5. Video format .ogv .webm .mp4
  6. Audio formats .oga, .ogg, .mp3, .mp4, .wav
  7. draggable attribute has three value: true|false|auto(default)
  8. the storage limit for Microsoft Edge web storage.
    • Subdomains: up to 5 MBs of space
    • Domains: up to 10 MBs of space
    • Total for all domains: up to 50 MBs of space

input

  1. <input type=’date’> A date-only control (no time).
  2. <input type=’datetime’> A date and time control based on the UTC time zone.
  3. input type=’datetime-local’> A date and time control (no time zone).
  4. <input type=’month’> A month and year control.
  5. <input type=’range’> A control for entering a numeric value when the exact value is not important. On newer browsers, this renders as a slider control and is commonly referred to as a slider control. This control has a value attribute, which is the current slider value. The min attribute is the minimum settable value (default is 0). The max attribute is the maximum settable value (default is 100). The step attribute defines the granularity of the value, which is the amount of change the value will have as the slider moves (default is 1). The step attribute must be an int unless the min value is set to a non-int value.
  6. <input type=’reset’> A button that resets all form values to default values; note that this does not send data when the form is submitted.
  7. <input type=’search’> A text field for entering a search string.
  8. name attribute does not need to be unique. If you have multiple form submission elements with the same name, they will submit as an array.

SVG

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines the graphics in XML format
  • Every element and every attribute in SVG files can be animated

Advantages

SVG

  • is an open standard
  • graphics do NOT lose any quality if they are zoomed or resized
  • are
    • scalable
    • zoomable
  • can be
    • created and edited with any text editor
    • searched, indexed, scripted, and compressed
    • printed with high quality at any resolution

Example Shapes

  • <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  • <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  • <svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>

No z-order in SVG so you must re-arrange elements in DOM

Canvas

  1. The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
  2. Canvas Manipulates Pixels
  3. width and height attributes can be defined with the element
  4. Canvas should be used for complex calculations

Semantic Elements

  • HTML5 semantic elements provide the mechanisms necessary to structure the page more easily for accessibility via screen readers.
  • Search engines take advantage of HTML5 semantics by leveraging the
    element to determine the purpose of the page.
  • If you have h1 elements in nested sections they get smaller and smaller, like h2 and h3
  • New iframe attributes: sandbox and seamless
  • Please check my previous post regarding HTML5 Semantic Elements

Helpful links

Conclusion

This post does not include all about HTML5 elements that you need to know before you sit for 70-480. HTML5 elements have many more things to learn. I believe this list will help you to remember a few cool pieces of stuff about HTML5 elements. And don’t forget to check HTML5 Semantic Elements post.

Next up, I will share my learnings about HTML5 with Javascript (it is available now). What do you think about these posts? What would you like to add to the list? Please let me know if I could improve this. If you enjoyed this blog post, share it with a friend! And you can also follow me on twitter

I would like to hear your thoughts