HTML5 Flashcards
Define: Metadata
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>
Define: Embedded
Content that imports other resources into the document.
Elements: <audio>, <video>, <canvas>, <iframe>, <img></img>, <math>, <object>, <svg></svg></object></math></canvas></video></audio>
Define: Interactive
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>
Define: Heading
Defines a section header.
Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>
Define: Phrasing
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>
Define: Flow content
Contains the majority of HTML5 elements that would be included in the normal flow of the document.
Define: Sectioning content
Defines the scope of headings, content, navigation, and footers.
Elements: <article>, <aside>, <nav>, <section>
<header>
</header>
contains the brandings like logo
<nav>
</nav>
contains navigational section of the site
<article>
</article>
web page main content
<article>
<section>
</section></article>
divided section of main content
<aside>
</aside>
contains extra information and related content or links
<footer>
</footer>
information about copyright, privacy policy, terms of use, etc.
<footer></footer>
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
The <nav> Element
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.
The <article> Element
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.
The <section> Element
<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>
The <aside> Element
<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>
Audio on the Web
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>
autoplay
When this attribute is defined, audio starts playing as soon as it is ready, without asking for the visitor’s permission.
<audio>
</audio>
loop
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>
Videos in HTML
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>
Attributes of <video></video>
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>
Progress Bar
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>
HTML 5 Web Storage
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.
Types of Web Storage Objects
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.
Working with Values
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.
What is the Geolocation API?
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.
Using HTML Geolocation
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.
Presenting Data
User location can be presented in two ways: Giodetic and Civic.
- The geodetic way to describe position refers directly to latitude and longitude.
- 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.
Making Elements Draggable
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:
<img draggable=“true” />
Any HTML element can be draggable.
Th API for HTML5 drag and drop is event-based.
Drawing Shapes
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.
Inserting SVG Images
An SVG image can be added to HTML code with just a basic image tag that includes a source attribute pointing to the image:
<img src=“image.svg” alt=“” height=“300” />
SVG defines vector-based graphics in XML format.
Drawing a Circle
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”></svg>
To create a circle, add a <circle> tag:
<svg width=“2000” height=“2000”>
<circle cx=“80” cy=“80” r=“50” fill=“green” />
</svg></circle>
- 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.
