Learning Objectives Tags in HTML5
New features in HTML5 Attributes In HTML5
Backward compatibility Inserting pictures in HTML5
Points to remember for writing Inserting Audio and video files in
HTML5 Code HTML5
List the various tags for HTML you have learnt so far
<strong>, <body>, <Frameset>, <frame>, <div>, <p>, <style>, <h1>, <tr>, <td>, <table>, <ul>,
<li>, <a>, <span>, <footer>, <head>
Introduction
Hypertext markup language
Used to create webpages with hypertext and hyperlinks that can be viewed using any browser
HTML5 is the latest version of HTML
Supported by google chrome, Mozilla Firefox, Opera 12, Internet Explorer 8, and safari 6.
New features
HTML5 is an independent mark up language and is no longer a part of SGML
Used on desktop as well as mobile devices like tablets and smartphones.
Treated as a web document having a specific structure with new tags :
Header, footer, article, nav, sections, aside, figure.
New audio tags
Audio, Video
Dynamic webpage
Menus, command, details, DataGrid.
Drawing graphics
Canvas
Back compatibility
Backwards compatibility means that compatibility of the new HTML5 with the older versions of
the markup language features to run in older versions of web browsers, along with new
features supported by latest web browsers.
Points to remember for writing HTML5 codes
Tags are not case sensitive
Quotes are optional for attributes as well as attributes values
The first line of the document should be <doctype html>
<html> tag and the <body> tag can be omitted
Advisable to write: <meta charset=” UTF-8”
We can use any text editor to write HTML code
Structural elements
A group of elements which are used to create the structure of HTML5 and also called section
elements.
Header- defines the header of a webpage document.
Nav- defines the section in the document with the navigation links to other webpages or to the
same webpage.
Article- defines a section of the document which can be an independent block in the whole
document.
Section- defines a portion of a document as one section.
Aside- defines a portion of content that can be set aside as a sidebar or extra information in the
webpage.
Footer- defines the footer of a webpage.
Attributes in HTML5
The value assigned to an attribute can be enclosed in double or single quotes.
Standard attributes
Also called global attributes and are supported by almost all the elements in HTML.
Attributes Use Example
background Used to place an image as a <table
background for the element background= “image1.jpg”>
it is used with. <body
background= “image2.jpg”>
accesskey Gives the shortcut keys to <a href= “file1.html”
access the element. accesskey= “f”>
align Horizontally aligns the <table align=left>
elements as left, right or <img align=right>
center. <p align=center>
valign Vertically aligns the elements <tr valign=top>
as top, middle, bottom.
bgcolor Sets the background color of <body bgcolor=red>
the elements used. <tr bgcolor=green>
<td bg color=blue>
height Sets the height of the <img height=200>
element. <table height=300>
width Sets the width of the <img width=300>
element. <table width=400>
Custom Attributes
These are created by user for a specific element. To create a custom attribute we use “data-“,
followed by the desired custom attribute name and then set to the desired string value.
Inserting Images
1. Using the <img> tag
The <img> tag is used to insert simple or animated images in a webpage.
Src, Alt, Height, Width, Border, Align
2. Using the <picture> tag
This tag is new in HTML5 and gives more flexibility in specifying picture resources.
The <source> tag is used as a child element.
Inserting audios and videos
The <audio> tag is used to add audio files in a webpage.
Control, Loop, Autoplay, Muted
The <video> tag is used to insert video files in a HTML5 webpage. The three different video files
supported by the browsers Chrome, Firefox and Opera are MP4, WEBM and OGG.
Control, Autoplay, Muted, Height, Width, Loop, Poster
Fact File
Multiple <source src= “file”> can be included in <audio> and <video> tags to give multiple alternatives
to the browser to run the audio or video file.
