HTML5 Interview Concepts

HTML:

how many types of doctypes in html??

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

HTML4 – has 3 doctypes like

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;
HTML5 has only one doctype  <!DOCTYPE html>
################################################################################
What are html meta elements??
Meta elements are tags used in HTML or XHTML documents to provide structured metadata about a Web page. They are part of a web page’s head section.
A special HTML tag that provides information about a Web page. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the page’s content. Many search enginesuse this information when building their indices.Metadata will not be displayed on the page, but will be machine parsable.

The scheme attribute is not supported in HTML5.

HTML5 has a new attribute, charset, which makes it easier to define charset:

  • HTML 4.01: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  • HTML5: <meta charset=”UTF-8″>

Example 1 – Define keywords for search engines:

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

Example 2 – Define a description of your web page:

<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

Example 3 – Define the author of a page:

<meta name=”author” content=”Hege Refsnes”>

Example 4 – Refresh document every 30 seconds:

<meta http-equiv=”refresh” content=”30″>
##################################################################
Computer coding formatting elements in html?
<em> Renders as emphasized text
<strong> Defines important text
<dfn> Defines a definition term
<code> Defines a piece of computer code
<samp> Defines sample output from a computer program
<kbd> Defines keyboard input
<var> Defines a variable

#################################################################

What are HTML attributes?

Attributes provide additional information about HTML elements. like id,name,class,value etc etc. For images..src,width,height,alt etc etc like that.

###################################################################

Styling HTML with CSS

CSS styling can be added to HTML elements the following 3 ways:

  • Inline – using the style attribute in HTML elements
  • Internal – using the <style> element in the <head> section
  • External – using external CSS files

The common way to add styling, is to put CSS syntax in separate CSS files.

#####################################################################

HTML Block Elements and Inline Elements

Most HTML elements are defined as block level elements or inline elements.

Block level elements normally start (and end) with a new line, when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

Inline elements are normally displayed without line breaks.

Examples: <b>, <td>, <a>, <img>

The HTML <div> element is a block level element that can be used as a container for other HTML elements.

The HTML <span> element is an inline element that can be used as a container for text.

############################################################################

Website Layout Using HTML5

HTML5 offers new semantic elements that define different parts of a web page:

HTML5 Semantic Elements
header Defines a header for a document or a section
nav Defines a container for navigation links
section Defines a section in a document
article Defines an independent self-contained article
aside Defines content aside from the content (like a sidebar)
footer Defines a footer for a document or a section
details Defines additional details
summary Defines a heading for the details element

This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout

section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”

aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”

nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.

footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

##############################################################################

Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS

  1. Tables are usually more bytes of markup.(Longer to download, and more bytes of traffic for the host.)
  2. Tables usually prevent incremental rendering.(Takes longer for the user to see anything on the page.)
  3. Tables may require you to chop single, logical images into multiple ones.(This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
  4. Tables break text copying on some browsers.(That’s annoying to the user.)
  5. Tables prevent certain layouts from working within them (like height:100% for child elements of <td>).(They limit what you can actually do in terms of layout.)
  6. Once you know CSS, table-based layouts usually take more time to implement.(A little effort up-front learning CSS pays off heavily in the end.)
  7. Tables are semantically incorrect markup for layout.(They describe the presentation, not the content.)
  8. Tables make life hell for those using screen readers.(Not only do you get the other benefits of CSS, you’re also helping out the blind/partially-sighted. This is a Good Thing.)
  9. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.(Have you seen CSS Zen Garden?)

##################################################################################

What is Responsive Web Design?

  • RWD stands for Responsive Web Design
  • RWD can deliver web pages in variable sizes
  • RWD is a must for tablets and mobile devices

Using Bootstrap

Another way to create a responsive design, is to use an already existing CSS framework.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive webs.

Bootstrap helps you to develop sites that look nice at any size; screen, laptop, tablet, or phone

#######################################################################################

HTML Form Tags

= Tag added in HTML5.

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

#######################################################################################

New HTML5 Elements

The most interesting new elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.

New form controls like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

New HTML5 API’s (Application Programming Interfaces)

The most interesting new API’s are:

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage(Local storage is a powerful replacement for cookies)
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

###############################################################################

HTML5 Browser Support

HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can “teach” old browsers to handle “unknown” HTML elements. How to teach??

HTML5 defines 8 new semantic HTML elements. All these are block level elements.

To secure correct behavior in older browsers, you can set the CSS display property to block:

Teach example

header, section, footer, aside, nav, main, article, figure {
display: block;
}
##################################################################

New Semantic/Structural Elements

HTML5 offers new elements for better document structure:

Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

Read more about HTML5 Semantics.


New Form Elements

Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

##########################################################################

New Input Types

New Input Types New Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

#########################################################################

HTML5 Graphics

Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG

 


New Media Elements

Tag Description
<audio> Defines sound or music content
Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content

###################################################################################

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <img> – Clearly defines its content.

 

New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”>
to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figure>
  • <figcaption>
  • <footer>
  • <details>
  • <summary>
  • <mark>
  • <time>
HTML5 Semantic Elements

The <section> element defines a section in a document. Grouping of content.

Eg: A Web site’s home page could be split into sections for introduction, content, and contact information.

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

Examples of where an <article> element can be used:

  • Forum post
  • Blog post
  • Newspaper article

An article can contains sections also..

#####################################################################

Difference between DIV & Section elements?

<div>: The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

<section>: The HTML Section element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

the only difference between the DIVelement and the SECTION element is semantics. In other words, it’s themeaning of the section of code you’re dividing up.

Any content that is contained inside a DIVelement does not have any inherent meaning.

###############################################################

Difference between section and article?

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

################################################################################

The <header> element specifies a header for a document or section.

The <footer> element specifies a footer for a document or section.

The <nav> element defines a set of navigation links.

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

With HTML5, images and captions can be grouped together in <figure> elements:

<figure>
<img src=“pic_mountain.jpg” alt=“The Pulpit Rock” width=“304” height=“228”>
<figcaption>Fig1. – The Pulpit Pock, Norway.</figcaption>
</figure>
###############################################################################

Why Semantic HTML5 Elements?

With HTML4, developers used their own favorite attribute names to style page elements:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …

This made it impossible for search engines to identify the correct web page content.

With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.

##############################################################################

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

The <datalist> element is used to provide an “autocomplete” feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element’s list attribute to bind it together with a <datalist> element.

<form action=“demo_form.asp” method=“get”>
<input list=“browsers”>
<datalist id=“browsers”>
<option value=“Internet Explorer”>
<option value=“Firefox”>
<option value=“Chrome”>
<option value=“Opera”>
<option value=“Safari”>
</datalist>
</form>

In the above example, input list (browsers) and datalist id should be always same

####################################################################################

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> tag specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

<form action=“demo_keygen.asp” method=“get”>
Username: <input type=“text” name=“usr_name”>
Encryption: <keygen name=“security”>
<input type=“submit”>
</form>

#################################################################################

The <output> element represents the result of a calculation (like one performed by a script).

##################################################################################

HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow better input control and validation.

This chapter covers the new input types:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

<input type=“number” name=“quantity” min=“1” max=“5”>

<input type=“date” name=“bday”>

<input type=“color” name=“favcolor”>

<input type=“range” name=“points” min=“0” max=“10”>

<input type=“month” name=“bdaymonth”>

<input type=“week” name=“week_year”>

<input type=“time” name=“usr_time”>

<input type=“datetime” name=“bdaytime”>

<input type=“email” name=“email”>

<input type=“search” name=“googlesearch”>

<input type=“search” name=“googlesearch”>

<input type=“url” name=“homepage”>

#########################################################################

HTML5 New Form Attributes

HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:

  • autocomplete
  • novalidate

New attributes for <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

#################################################################

<video width=“320” height=“240” controls>
<source src=“movie.mp4” type=“video/mp4”>
<source src=“movie.ogg” type=“video/ogg”>
Your browser does not support the video tag.
</video>

MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video – Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

######################################################################

Audio on the Web

Before HTML5, there was no standard for playing audio files on a web page.

Before HTML5, audio files could only be played with a plug-in (like flash).

The HTML5 <audio> element specifies a standard way to embed audio in a web page.

<audio controls>
<source src=“horse.ogg” type=“audio/ogg”>
<source src=“horse.mp3” type=“audio/mpeg”>
Your browser does not support the audio element.
</audio>

The controls attribute adds audio controls, like play, pause, and volume.

Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.

############################################################################

The <object> element defines an embedded object within an HTML document.

It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.

<object width=“400” height=“50” data=“bookmark.swf”></object>

The element is supported in all major browsers.

The element also defines an embedded object within an HTML document.

<embed width=“400” height=“50” src=“bookmark.swf”>

Youtube:

<object width=“420” height=“315”
data=
http://www.youtube.com/v/XGSy3_Czz8k&#8221;>
</object>

<embed width=“420” height=“315”
src=
http://www.youtube.com/v/XGSy3_Czz8k&#8221;>

##############################################################################

What is HTML Local Storage?

With HTML local storage, web pages can store data locally within the user’s browser.

Earlier, this was done with cookies. However, local storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance.

The data is stored in name/value pairs, and a web page can only access data stored by itself.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

HTML Local Storage Objects

HTML local storage provides two objects for storing data on the client:

  • window.localStorage – stores data with no expiration date
  • code.sessionStorage – stores data for one session (data is lost when the tab is closed)

Before using local storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage) !== “undefined”) {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

// Store
localStorage.setItem(“lastname”, “Smith”);
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);

Example explained:

  • Create a localStorage name/value pair with name=”lastname” and value=”Smith”
  • Retrieve the value of “lastname” and insert it into the element with id=”result”

The example above could also be written like this:

// Store
localStorage.lastname = “Smith”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;

The syntax for removing the “lastname” localStorage item is as follows:

localStorage.removeItem(“lastname”);
Advertisements

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