HTML5
Hyper Text Markup Language
Used to design web pages
Markup Language
o Made up of
Tag or element
Data or content
Information enclosed in opening and closing tags
E.g.
<title>test</title>
o where
<title>: opening tag
test: data or content
</title>: closing tag
standardized language by W3C (World Wide Web Consortium)
case in-sensitive language
Every html document contains
o Head part
Contains extra (meta) information about the page
Contains
title: used to set the current tab’s title
meta:
o used to add extra information
o E.g.
<meta charset=”utf-8”>
<meta name=”keywords” content=”html”>
link:
o Used to attach/link external files
o E.g.
<link rel=”shortcut icon” href=”favicon.ico”>
where
rel: relationship of external file with this
page
o stylesheet
o shortcut icon
href: path/url/file name of the external
file
script: used to add JavaScript code
style: used to CSS code
base: used to set the base URL of the page
o Body part
Contains the actual page design
Tag
Word enclosed in < and >
Also known as element
Pre-defined by W3C
E.g.
<h1>, <p>, <table>
Types
o Opening tag
Used to open the information
E.g.
<title>, <html>
o Closing tag
Used to close the information
E.g.
</title>, </html>
o Empty tag
Tag with no data/content
Can be written
<br></br>
<br />
E.g.
<br/>, <hr/>
o Root tag
Tag which starts and ends the document
Every html file must have <html> as its root tag
Root tag is also called as
Root element
Document element
Document Type
Attribute
o Used to add extra information about the tag
o It is always present in name = value format
o An element may contain zero or more attributes
o E.g.
<meta charset=”utf-8”>
Where
Meta: element / tag
Charset: attribute name
Utf-8: attribute value
o Every html element contains
name:
class:
id:
style:
Body
Textual
o Heading
Used to create heading
<h1>-<h6>
o Paragraph: <p>
o Span:
o Div:
Resources
o Image:
Use tag: <img>
E.g.
<img src=”path of file” alt=””>
where
o src: relative path of the file
o alt: alternate to src
will be displayed only when the source is
missing
o Audio/Video:
Used <audio> to play audio and <video> to play video
E.g.
<audio>
<source src=”path”>
</audio>
attributes
controls: display the controls (to play/scrub/mute)
autoplay: to play the audio/video automatically when page
loading completed
List
o Ordered List
Maintains the order
E.g.
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
o Unordered List
Does not maintain the order
E.g.
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
o Definition List
List of definitions
E.g.
<dl>
<dt>HTML</dt>
<dd>Hyper Text Markup Language</dd>
</dl>
Table
o Contains 3 sections
Header
Body
Footer
o E.g.
<table>
<thead>
<tr>
<th>col1</th>
</tr>
</thead>
<tbody>
<tr>
<td>col1 data </td>
</tr>
</tbody>
<tfoot>
<tr>
<td>summary</td>
</tr>
</tfoot>
</table>
Links (anchor)
o Used to link external file with the page
o
Form
o Used to get input from user
o Elements
textarea:
used to take multi-line input from user
select:
used to create a drop-down list
E.g.
<select>
<option>India</option>
</select>
Input:
used to take input from user
attributes
o maxlength: maximum length of input
o minlength: minimum length of input
o placeholder: hint to the user
o type: decides the type of input
text:
number:
date: dd/MM/yyyy
time: hh:mm a
email:
tel:
radio: option button
checkbox:
submit:
reset:
password:
HTML5 Semantic elements
HTML5 Geo-Location
HTML5 Web Storage
HTML5 Canvas
HTML5 Drag And Drop
HTML5 Web Sockets
