HTML5 Reviewer

  • Comments:
    HTML: <!– Comment –>
    CSS: /* comment */ or //
    JS: /* comment */ or //

New Features of HTML5

  • New Semantic Elements
  • Forms – new attribute for input tag
  • Canvas
  • Audio & Video – embedding audio/video
  • Geolocation
  • Drag and Drop
  • Local Storage
  • WebSocket
  • Server-Sent Events
  • Microdata

//<img src=”…” alt=”…” width=”*” height=”*” />
//<a href=”…” target=”_blank”></a>

What is the purpose of Header tag?
It represents the header of a section

What is the purpose of Nav tag?
It represents a section intended for navigation

What is the purpose of Footer tag?
It represents a footer for a section and can contain information about the author, copyright info etc

What is the purpose of Section tag?
It represents a generic document or application section. It can be used together with h1-h6

What is the purpose of Article tag?
It represents an independent piece of content of a document, such as a blog entry or article

What is the purpose of Aside tag?
It represents a piece of content that is only slightly related to the rest of the page

What is the purpose of Figure tag?
It can be used to associate a caption with graphic or video

What is the purpose of Canvas tag?
It gives you an easy way to draw graphics using JS. It can be used to draw graphs, make photo compositions or do simple animations.

What is the purpose of Dialog tag?
It can be used to mark up a conversation

Can you use SVG tags directly in HTML5 without any plugin?
Yes, HTML5 allows embedding SVG directly using //<svg></svg> tag.

What is the purpose of Datetime Input Control?
It represents a date and time.

What are Custom Attributes?
It starts with data- and would be named based on your requirement. You can get the values of the attribute using APIs or CSS
< //div data-subjects=”math”></div>

What is Local Storage in HTML5?
It is used to access a page’s local storage area without no time limit and this local storage will be available whenever you would use that page.

When is Local Storage Data gets deleted?
Local storage data has no time limit. To clear a local storage setting, you would need to call localStorage.remove(‘key’), where key is the key value you want to remove. If you want to clear all settings, you need to call localStorage.clear() method.

What is Session Storage in HTML5?
It is used to add data to the session storage and it will be accessible to any page from the same site opened in that window.

When is a Session Storage Data gets deleted?
The session storage data would be deleted by the browsers as soon as you close the window, session would be lost.

What are the Drawbacks of Cookies?

 

  • It is included with every HTTP request so it is slowing down your web app.
  • It is limited to about 4KB of data. Not Enough to store required data.

What is Geolocation API in HTML?
It lets you share your location with your websites.
It can capture your latitude & longitude and can be sent to backend web server
var geolocation = navigator.geolocation

What are Web Workers?
It does all the computationally expensive tasks without interrupting the user interface and typically run on separate threads.
It allows for long-running scripts that are not interrupted by scripts that respond to clicks or other user interaction, and allows long tasks to be executed without yielding to keep the page responsive.

What are Web Sockets?
It is a bidirectional communication technology for web apps which operates over a single socket and is exposed via JS in HTML5 compliant browsers.
You can send data from browser to server by calling a send() method, and receive data from server to browser by an onmessage event handler.
var Socket = new WebSocket(url, [protocol]);

What is the purpose of Socket.readyState?
The readonly attribute readyState represents the state of the connection. The values are:
0: connection has not yet been established
1: connection is established and communication is possible
2: connection is going through the closing handshake
3: connection has been closed or could not be opened

What is Server Side in HTML5?
Server Side Events flow from web server to the web browsers. You can push DOM events continuously from your web server to the visitor’s browser.
The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available, eliminating the need for continuous polling.

How to use a Server-sent Event?
To use server-sent events in a web app, you need to add an <eventsource> element to the document.
The src attribute of <eventsource> should point to an URL which should provide a persistent HTTP connection that sends a data stream containing the events. The URL should point to a PHP, PERL or any Python script which would take care of sending event data consistently.

What are the Steps of Server Side Scripts?
1. SSS should send Content-type header specifying the type text/event-stream.
2. SSS will send an Event – tag followed by event name
3. SSS will send event data using data – tag which would be followed by string value

 

 

 

Advertisements

About bernadetteengleman

Hello, I am Bernadette from New York City. I moved here from Chicago in 2013. I am originally from the Philippines. I started studying web programming in 2015. I love it because I like making fun websites and web apps. The projects that I built so far are posted below. I like to cook and I love to travel. I also like to volunteer and I am a team leader with the non-profit organization, NYCares.
This entry was posted in HTML/CSS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s