HTML5

Question 1

Define: Metadata

Answer 1

Content that sets up the presentation or behavior of the rest of the content. These elements are found in the head of the document.

Elements: <base></base>, <link></link>, <meta></meta>, <noscript>,

, <style>, <title></title></style>

</noscript>

Question 2

Define: Embedded

Answer 2

Content that imports other resources into the document.

Elements: <audio>, <video>, <canvas>, <iframe>, <img></img>, <math>, <object>, <svg></svg></object></math></canvas></video></audio>

Question 3

Define: Interactive

Answer 3

Content specifically intended for user interaction.

Elements: <a>, <audio>, <video>, <button>, <details>, <embed></embed>, <iframe>, <img></img>, <input></input>, <label>, <object>, <select>, <textarea></textarea></select></object></label></details></button></video></audio></a>

Question 4

Define: Heading

Answer 4

Defines a section header.

Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>

Question 5

Define: Phrasing

Answer 5

This model has a number of inline level elements in common with HTML4.

Elements: <img></img>, <span>, <strong>, <label>, <br></br>, <small>, _{, and more.}</small></label></strong></span>

Question 6

Define: Flow content

Answer 6

Contains the majority of HTML5 elements that would be included in the normal flow of the document.

Question 7

Define: Sectioning content

Answer 7

Defines the scope of headings, content, navigation, and footers.

Elements: <article>, <aside>, <nav>, <section>

Question 8

<header>
</header>

Answer 8

contains the brandings like logo

Question 9

<nav>
</nav>

Answer 9

contains navigational section of the site

Question 10

<article>
</article>

Answer 10

web page main content

Question 11

<article>
<section>
</section></article>

Answer 11

divided section of main content

Question 12

<aside>
</aside>

Answer 12

contains extra information and related content or links

Question 13

<footer>
</footer>

Answer 13

information about copyright, privacy policy, terms of use, etc.

Question 14

<footer></footer>

Answer 14

Generally, we refer to a section located at the very bottom of the web page as the footer.

The following information is usually provided between these tags:
- Contact Information
- Privacy Policy
- Social Media Icons
- Terms of Service
- Copyright Information
- Sitemap and Related Documents

Question 15

The <nav> Element

Answer 15

This tag represents a section of a page that links to other pages or to certain sections within the page. This would be a section with navigation links.

Here is an example of a major block of navigation links:

<nav>
<ul>
<li><a href=“#”>Home</a></li>
<li><a href=“#”>Services</a></li>
<li><a href=“#”>About us</a></li>
</ul>
</nav>

Not all of the links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Typically, the <footer> element often has a list of links that don’t need to be in a <nav> element.

Question 16

The <article> Element

Answer 16

Article is a self-contained, independent piece of content that can be used and distributed separately from the rest of the page or site. This could be a forum post, a magazine or newspaper article, a blog entry, a comment, an interactive widget or gadget, or any other independent piece of content.

The <article> element replaces the <div> element that was widely used in HTML4, along with an id or class.

Ex:

<article>
<h1>The article title</h1>
<p>Contents of the article element </p>
</article>

When an <article> element is nested, the inner element represents an article related to the outer element. For example, blog post comments can be <article> elements nested in the <article> representing the blog post.

Question 17

The <section> Element

Answer 17

<section> is a logical container of the page or article. Sections can be used to divide up content within an article.

For example, a homepage could have a section for introducing the company, another for news items, and still another for contact information.

Each <section> should be identified, typically by including a heading <h1-h6> as a child of the <section> element.

<article>
<h1>Welcome</h1>
<section>
<p>content or image</p>
</section>
</article>
</section></h1-h6></section></section>

Question 18

The <aside> Element

Answer 18

<aside> is secondary or tangential content which could be considered separate from but indirectly related to the main content. This type of content is often represented in sidebars. When an <aside> tag is used within an <article> tag, the content of the <aside> should be specifically related to that article.

When an <aside> tag is used outside of an <article> tag, its content should be related to the surrounding content.
</article></aside></aside></article></aside></aside>

Question 19

Audio on the Web

Answer 19

Before HTML5, there was no standard for playing audio files on a web page. The HTML5 <audio> element specifies a standard for embedding audio in a web page.</audio>

There are two different ways to specify the audio source file’s URL. The first uses the source attribute:
<audio src=“http://www.sololearn.com/uploads/audio.mp3” controls>
Audio element not supported by your browser
</audio>

The second way uses the <source></source> element inside the <audio> element:</audio>

<audio>
<source src=“audio.mp3” type=“audio/mpeg”>
<source src=“audio.ogg” type=“audio/ogg”>
</audio>

Question 20

autoplay

Answer 20

When this attribute is defined, audio starts playing as soon as it is ready, without asking for the visitor’s permission.

<audio>
</audio>

Question 21

loop

Answer 21

This attribute is used to have the audio replay every time it is finished.

<audio>

Currently, there are three supported file formats for the <audio> element: MP3, WAV, and OGG.
</audio></audio>

Question 22

Videos in HTML

Answer 22

The video element is similar to the audio element. You can specify the video source URL using an attribute in a video element, or using source elements inside the video element:

<video>
<source src=“video.mp4” type=“video/mp4”>
<source src=“video.ogg” type=“video.ogg”>
Video is not supported by your browser
</video>

Question 23

Attributes of <video></video>

Answer 23

Another aspect shared by both the audio and the video elements is that each has controls, autoplay, and loop attributes.

In this example, the video will replay after it finishes playing:

<video>
<source src=“video.mp4” type=“video/mp4”>
<source src=“video.ogg” type=“video/ogg”>
Video is not supported by your browser
</video>

Question 24

Progress Bar

Answer 24

The <progress> element provides the ability to create progress bars on the web.
The progress element can be used within headings, paragraphs, or anywhere else in the body.</progress>

Progress Element Attributes
Value: Specifies how much of the task has been completed.
Max: Specifies how much work the task requires in total.

Example:
Status: <progress min=“0” max=“100” value=“35”>
</progress>

Question 25

HTML 5 Web Storage

Answer 25

With HTML5 web storage, websites can store data on a user’s local computer. Before HTML5, we had to use JavaScript cookies to achieve this functionality. The Advantages of Web Storage - More secure - Faster - Stores a larger amount of data - Stored data is not sent with every server request Local storage is per domain. All pages from one domain can store and access the same data.

Question 26

Types of Web Storage Objects

Answer 26

There are two types of web storage objects: - sessionStorage() - localStorage() Local vs. Session - Session Storage is destroyed once the user closes the browser - Local Storage stores data with no expiration date You need to be familiar with basic JavaScript in order to understand and use the API.

Question 27

Working with Values

Answer 27

The syntax for web storage for both local and session storage is very simple and similar. The data is stored as key/value pairs. Storing a Value: localStorage.setItem(“key1”, “value1”); Getting a Value: //this will print the value alert(localStorage.getItem(“key1”)); Removing a Value: localStorage.removeItem(“key1”); Removing All Values: localStorage.clear(); The same syntax applies to the session storage, with one difference: Instead of localStorage, sessionStorage is used.

Question 28

What is the Geolocation API?

Answer 28

In HTML5, the Geolocation API is used to obtain the user’s geographical location. Since this can compromise user privacy, the option is not available unless the user approves it. Geolocation is much more accurate for devices with GPS, like smartphones and the like.

Question 29

Using HTML Geolocation

Answer 29

The Geolocation API’s main method is getCurrentPosition, which retrieves the current geographic location of the user’s device. navigator.geolocation.getCurrentPosition(); Parameters: showLocation (mandatory): Defines the callback method that retrieves location information. ErrorHandler (optional): Defines the callback method that is invoked when an error occurs in processing the asynchronous call. Options (optional): Defines a set of options for retrieving the location information.

Question 30

Presenting Data

Answer 30

User location can be presented in two ways: Giodetic and Civic. 1. The geodetic way to describe position refers directly to latitude and longitude. 2. The civic representation of location data is presented in a format that is more easily read and understood by the average person. Each parameter has both a geodetic and a civic representation: Attribute Geodetic Civic Position 59.3, 18.6 Stockholm Elevation 10 meters 4th floor Heading 234 degrees City center Speed 5km / h Walking Orientation 45 degrees North-East The getCurrentPosition() method returns an object if it is successful. The latitude, longitude, and accuracy properties are always returned.

Question 31

Making Elements Draggable

Answer 31

The drag and drop feature lets you “grab” an object and drag it to a different location. To make an element draggable, just set the draggable attribute to true: Any HTML element can be draggable. Th API for HTML5 drag and drop is event-based.

Question 32

Drawing Shapes

Answer 32

SVG stands for Scalable Vector Graphics, and it is used to draw shapes with HTML-style markup. It offers several methods for drawing paths, boxes, circles, text, and graphic images. SVG is not pixel-based, so it can be magnified infinitely with no loss of quality.

Question 33

Inserting SVG Images

Answer 33

An SVG image can be added to HTML code with just a basic image tag that includes a source attribute pointing to the image: SVG defines vector-based graphics in XML format.

Question 34

Drawing a Circle

Answer 34

To draw shapes with SVG, you first need to create an SVG element tag with two attributes: width and height. svg width=“1000” height=“1000”> To create a circle, add a tag: - cx pushes the center of the circle further to the right of the screen - cy pushes the center of the circle further down the top of the screen - r defines the radius - fill determines the color of our circle - stroke adds an outline to the circle Every element and every attribute in SVG files can be animated.