Scribd
Upload
91 views

HTML5 Ibm

HTML5 is the next major revision of the HTML standard superseding previous versions. It introduces new semantic elements, forms improvements, local storage capabilities, and embedded audio/video among other features. It is designed to be backward compatible and supports uppercase/optional tags and attributes.

Uploaded by

Chitram Subaraminaim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
91 views

HTML5 Ibm

HTML5 is the next major revision of the HTML standard superseding previous versions. It introduces new semantic elements, forms improvements, local storage capabilities, and embedded audio/video among other features. It is designed to be backward compatible and supports uppercase/optional tags and attributes.

Uploaded by

Chitram Subaraminaim
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.

0, and
XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.

Browser Support
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support
many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5
functionality.

The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all
have excellent support for HTML5.

New Features
HTML5 introduces a number of new elements and attributes that can help you in building
modern websites. Here is a set of some of the most prominent features introduced in
HTML5.

 New Semantic Elements − These are like <header>, <footer>, and <section>.
 Forms 2.0 − Improvements to HTML web forms where new a5ributes have been
introduced for <input> tag.
 Persistent Local Storage − To achieve without resor6ng to third-party plugins.
 WebSocket − A next-generation bidirectional communication technology for web
applications.
 Server-Sent Events − HTML5 introduces events which flow from web server to the
web browsers and they are called Server-Sent Events (SSE).
 Canvas − This supports a two-dimensional drawing surface that you can program
with JavaScript.
 Audio & Video − You can embed audio or video on your webpages without resor6ng
to third-party plugins.
 Geolocation − Now visitors can choose to share their physical loca6on with your web
application.
 Microdata − This lets you create your own vocabularies beyond HTML5 and extend
your web pages with custom semantics.
 Drag and drop − Drag and drop the items from one loca6on to another loca6on on
the same webpage.

Backward Compatibility
HTML5 is designed, as much as possible, to be backward compatible with existing web
browsers. Its new features have been built on existing features and allow you to provide
fallback content for older browsers.

It is suggested to detect support for individual HTML5 features using a few lines of
JavaScript.
HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag
names, quoting our attributes, an attribute had to have a value and to close all empty
elements.

HTML5 comes with a lot of flexibility and it supports the following features −

 Uppercase tag names.


 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional.

The DOCTYPE
 DOCTYPEs in older versions of HTML were longer because the HTML language was
SGML based and therefore required a reference to a DTD.
 HTML 5 authors would use simple syntax to specify DOCTYPE as follows −
 <!DOCTYPE html>
 The above syntax is case-insensitive.

Character Encoding
HTML 5 authors can use simple syntax to specify Character Encoding as follows −

<meta charset = "UTF-8">

The <script> tag


It's common practice to add a type attribute with a value of "text/javascript" to script
elements as follows −

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML 5 removes extra information required and you can use simply following syntax −

<script src = "scriptfile.js"></script>

The <link> tag


So far you were writing <link> as follows −

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML 5 removes extra information required and you can simply use the following syntax −

<link rel = "stylesheet" href = "stylefile.css">


HTML5 Elements
HTML5 elements are marked up using start tags and end tags. Tags are delimited using
angle brackets with the tag name in between. The difference between start tags and end
tags is that the latter includes a slash before the tag name.

Following is the example of an HTML5 element −

<p>...</p>

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case,
although the most common convention is to stick with lowercase. Most of the elements
contain some content like <p>...</p> contains a paragraph. Some elements, however, are
forbidden from containing any content at all and these are known as void elements. For
example, br, hr, link, meta, etc.

A complete list of standard tags available in HTML5 is given below. All the tags are ordered
alphabetically along with an indication if they have been introduced newly or they have
been deprecated in HTML5.

Tag Description
<!--...--> Specifies a comment
<!DOCTYPE> Specifies the document type
<a> Specifies an anchor
<abbr> Specifies an abbreviation
<acronym> Deprecated:Specifies an acronym
<address> Specifies an address element
<applet> Deprecated: Specifies an applet
<area> Specifies an area inside an image map
New Tag: Specifies an independent piece of content of a
<article>
document, such as a blog entry or newspaper article
New Tag:Specifies a piece of content that is only slightly related
<aside>
to the rest of the page.
<audio> New Tag:Specifies an audio file.
<base> Specifies a base URL for all the links in a page
<basefont> Deprecated: Specifies a base font
<bdo> Specifies the direction of text display
<bgsound> Specifies the background music
<blink> Specifies a text which blinks
<blockquote> Specifies a long quotation
<body> Specifies the body element
<br> Inserts a single line break
<button> Specifies a push button
New Tag:This is used for rendering dynamic bitmap graphics on
<canvas>
the fly, such as graphs or games.
<caption> Specifies a table caption
<center> Deprecated: Specifies centered text
<col> Specifies attributes for table columns
<colgroup> Specifies groups of table columns
<command> New Tag:Specifies a command the user can invoke.
<comment> Puts a comment in the document
New Tag:Together with the a new list attribute for input can be
<datalist>
used to make comboboxes
<dd> Specifies a definition description
<del> Specifies deleted text
New Tag:Specifies additional information or controls which the
<details>
user can obtain on demand.
<dir> Deprecated: Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<embed> New Tag:Defines external interactive content or plugin.
<fieldset> Specifies a fieldset
New Tag:Specifies a piece of self-contained flow content,
<figure> typically referenced as a single unit from the main flow of the
document.
<b> Specifies bold text
<big> Deprecated:Specifies big text
<i> Specifies italic text
<small> Specifies small text
<tt> Deprecated:Specifies teletype text
<font> Deprecated: Specifies text font, size, and color
New Tag:Specifies a footer for a section and can contain
<footer>
information about the author, copyright information, et cetera.
<form> Specifies a form
<frame> Deprecated:Specifies a sub window (a frame)
<frameset> Deprecated:Specifies a set of frames
<head> Specifies information about the document
<header> New Tag:Specifies a group of introductory or navigational aids.
<hgroup> New Tag:Specifies the header of a section.
<h1> to <h6> Specifies header 1 to header 6
<hr> Specifies a horizontal rule
<html> Specifies an html document
<isindex> Deprecated: Specifies a single-line input field
<iframe> Specifies an inline sub window (frame)
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
<ins> Specifies inserted text
<keygen> New Tag:Specifies control for key pair generation.
<keygen> Generate key information in a form
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
<map> Specifies an image map
New Tag:Specifies a run of text in one document marked or
<mark> highlighted for reference purposes, due to its relevance in
another context.
<marquee> Create a scrolling-text marquee
<menu> Deprecated: Specifies a menu list
<meta> Specifies meta information
<meter> New Tag:Specifies a measurement, such as disk usage.
<multicol> Specifies a multicolumn text flow
New Tag:Specifies a section of the document intended for
<nav>
navigation.
<nobr> No breaks allowed in the enclosed text
Specifies content to be presented by browsers that do not
<noembed>
support the <embed>tag
<noframes> Deprecated:Specifies a noframe section
<noscript> Specifies a noscript section
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list
<output> New Tag:Specifies some type of output, such as from a
calculation done through scripting.
<p> Specifies a paragraph
<param> Specifies a parameter for an object
<cite> Specifies a citation
<code> Specifies computer code text
<dfn> Specifies a definition term
<em> Specifies emphasized text
<kbd> Specifies keyboard text
<samp> Specifies sample computer code
<strong> Specifies strong text
<var> Specifies a variable
Deprecated: Render the raminder of the document as
<plaintext>
preformatted plain text
<pre> Specifies preformatted text
New Tag:Specifies a completion of a task, such as downloading
<progress>
or when performing a series of expensive operations.
<q> Specifies a short quotation
New Tag:Together with <rt> and <rp> allow for marking up ruby
<ruby>
annotations.
<script> Specifies a script
<section> New Tag:Represents a generic document or application section.
<select> Specifies a selectable list
<spacer> Specifies a white space
<span> Specifies a section in a document
<s> Deprecated: Specifies strikethrough text
<strike> Deprecated: Specifies strikethrough text
<style> Specifies a style definition
<sub> Specifies subscripted text
<sup> Specifies superscripted text
<table> Specifies a table
<tbody> Specifies a table body
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table header
<thead> Specifies a table header
<time> New Tag:Specifies a date and/or time.
<title> Specifies the document title
<tr> Specifies a table row
<u> Deprecated: Specifies underlined text
<ul> Specifies an unordered list
<video> New Tag:Specifies a video file.
<wbr> New Tag:Specifies a line break opportunity.
<wbr> Indicate a potential word break point within a <nobr> section
<xmp> Deprecated: Specifies preformatted text

HTML5 Attributes
Elements may contain attributes that are used to set various properties of an element.

Some attributes are defined globally and can be used on any element, while others are
defined for specific elements only. All attributes have a name and a value and look like as
shown below in the example.

Following is the example of an HTML5 attribute which illustrates how to mark up a div
element with an attribute named class using a value of "example" −

<div class = "example">...</div>

Attributes may only be specified within start tags and must never be used in end tags.

HTML5 attributes are case insensitive and may be written in all uppercase or mixed case,
although the most common convention is to stick with lowercase.

Standard Attributes
The attributes listed below are supported by almost all the HTML 5 tags.

Attribute Options Function


accesskey User Defined Specifies a keyboard shortcut to access an element.
align right, left, center Horizontally aligns tags
background URL Places an background image behind an element
numeric,
bgcolor Places a background color behind an element
hexidecimal, RGB
values
Classifies an element for use with Cascading Style
class User Defined
Sheets.
Specifies if the user can edit the element's content or
contenteditable true, false
not.
contextmenu Menu id Specifies the context menu for an element.
Custom attributes. Authors of a HTML document can
data-XXXX User Defined
define their own attributes. Must start with "data-".
Specifies whether or not a user is allowed to drag an
draggable true,false, auto
element.
height Numeric Value Specifies the height of tables, images, or table cells.
hidden hidden Specifies whether element should be visible or not.
Names an element for use with Cascading Style
id User Defined
Sheets.
item List of elements Used to group elements.
itemprop List of items Used to group items.
Specifies if the element must have it's spelling or
spellcheck true, false
grammar checked.
style CSS Style sheet Specifies an inline style for an element.
subject User define id Specifies the element's corresponding item.
tabindex Tab number Specifies the tab order of an element.
title User Defined "Pop-up" title for your elements.
valign top, middle, bottom Vertically aligns tags within an HTML element.
width Numeric Value Specifies the width of tables, images, or table cells.

HTML5 Document
The following tags have been introduced for better structure −

 section − This tag represents a generic document or applica6on sec6on. It can be


used together with h1-h6 to indicate the document structure.
 article − This tag represents an independent piece of content of a document, such as
a blog entry or newspaper article.
 aside − This tag represents a piece of content that is only slightly related to the rest
of the page.
 header − This tag represents the header of a sec6on.
 footer − This tag represents a footer for a section and can contain information about
the author, copyright information, et cetera.
 nav − This tag represents a sec6on of the document intended for naviga6on.
 dialog − This tag can be used to mark up a conversa6on.
 figure − This tag can be used to associate a caption together with some embedded
content, such as a graphic or video.

The markup for an HTML 5 document would look like the following −

<!DOCTYPE html>

<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>

<body>
<header>...</header>
<nav>...</nav>

<article>
<section>
...
</section>
</article>
<aside>...</aside>

<footer>...</footer>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
<meta charset = "utf-8">
<title>...</title>
</head>

<body>
<header role = "banner">
<h1>HTML5 Document Structure Example</h1>
<p>This page should be tried in safari, chrome or Mozila.</p>
</header>

<nav>
<ul>
<li><a href = "https://www.tutorialspoint.com/html">HTML Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li>
<li><a href = "https://www.tutorialspoint.com/javascript">
JavaScript Tutorial</a></li>
</ul>
</nav>

<article>
<section>
<p>Once article can have multiple sections</p>
</section>
</article>
<aside>
<p>This is aside part of the web page</p>
</aside>

<footer>
<p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p>
</footer>

</body>
</html>

Custom Attributes
A new feature being introduced in HTML 5 is the addition of custom data attributes.

A custom data attribute starts with data- and would be named based on your requirement.
Here is a simple example −

<div class = "example" data-subject = "physics" data-level = "complex">


...
</div>

When users visit your website, they perform various activities such as clicking on text and
images and links, hover over defined elements, etc. These are examples of what JavaScript
calls events.

We can write our event handlers in Javascript or VBscript and you can specify these event
handlers as a value of event tag attribute. The HTML5 specification defines various event
attributes

SOME EXAMPLES ARE

offline script Triggers when the document goes offline


onabort script Triggers on an abort event
onafterprint script Triggers after the document is printed
onbeforeonload script Triggers before the document loads
onbeforeprint script Triggers before the document is printed
onblur script Triggers when the window loses focus

Web Forms 2.0 is an extension to the forms features found in HTML4. Form elements and
attributes in HTML5 provide a greater degree of semantic mark-up than HTML4 and free us
from a great deal of tedious scripting and styling that was required in HTML4.

The <input> element in HTML4


HTML4 input elements use the type attribute to specify the data type.HTML4 provides
following types −

SUCH AS text, password, radio, checkbox, submit, file, hidden etc,.

Following is the simple example of using labels, radio buttons, and submit buttons −

...
<form action = "http://example.com/cgiscript.pl" method = "post">
<p>
<label for = "firstname">first name: </label>
<input type = "text" id = "firstname"><br />

<label for = "lastname">last name: </label>


<input type = "text" id = "lastname"><br />

<label for = "email">email: </label>


<input type = "text" id = "email"><br>

<input type = "radio" name = "sex" value = "male"> Male<br>


<input type = "radio" name = "sex" value = "female"> Female<br>
<input type = "submit" value = "send"> <input type = "reset">
</p>
</form>
...

The <input> element in HTML5


Apart from the above-mentioned attributes, HTML5 input elements introduced several new
values for the type attribute. These are listed below.

NOTE − Try all the following example using latest version of Opera browser.

Sr.No. Type & Description


datetime
1
A date and time (year, month, day, hour, minute, second, fractions of a second)
encoded according to ISO 8601 with the time zone set to UTC.
datetime-local
2
A date and time (year, month, day, hour, minute, second, fractions of a second)
encoded according to ISO 8601, with no time zone information.
date
3
A date (year, month, day) encoded according to ISO 8601.
month
4
A date consisting of a year and a month encoded according to ISO 8601.
week
5
A date consisting of a year and a week number encoded according to ISO 8601.
time
6
A time (hour, minute, seconds, fractional seconds) encoded according to ISO 8601.
number
7
It accepts only numerical value. The step attribute specifies the precision, defaulting
to 1.
range
8
The range type is used for input fields that should contain a value from a range of
numbers.
email

9 It accepts only email value. This type is used for input fields that should contain an e-
mail address. If you try to submit a simple text, it forces to enter only email address
in [email protected] format.
url

10 It accepts only URL value. This type is used for input fields that should contain a URL
address. If you try to submit a simple text, it forces to enter only URL address either
in http://www.example.com format or in http://example.com format.

The <output> element


HTML5 introduced a new element <output> which is used to represent the result of
different types of output, such as output written by a script.

You can use the for attribute to specify a relationship between the output element and
other elements in the document that affected the calculation (for example, as inputs or
parameters). The value of the for attribute is a space-separated list of IDs of other elements.

<!DOCTYPE HTML>

<html>
<head>
<script type = "text/javascript">

function showResult() {
x = document.forms["myform"]["newinput"].value;
document.forms["myform"]["result"].value = x;
}
</script>
</head>

<body>

<form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">


Enter a value : <input type = "text" name = "newinput" />
<input type = "button" value = "Result" onclick = "showResult();" />
<output name = "result"></output>
</form>

</body>
</html>

TRY USING “placeholder, required and autofocus” attributes.

Scalable Vector Graphics

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and
graphical applications in XML and the XML is then rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an
X,Y coordinate system etc.

SVG became a W3C Recommendation 14. January 2003 and you can check latest version of
SVG specification at SVG Specification

HTML5 allows embedding SVG directly using <svg>...</svg> tag which has following simple
syntax −

<svg xmlns = "http://www.w3.org/2000/svg">


...
</svg>

Following is the HTML5 version of an SVG example which would draw a circle using <circle>
tag −

Live Demo
<!DOCTYPE html>

<html>
<head>

<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>SVG</title>
<meta charset = "utf-8" />
</head>

<body>
<h2 align = "center">HTML5 SVG Circle</h2>

<svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">


<circle id = "redcircle" cx = "50" cy = "50" r = "50" fill = "red" />
</svg>
</body>
</html>

This would produce the following result in HTML5 enabled latest version of Firefox

MathML elements.
Following is a valid HTML5 document with MathML −

Live Demo
<!doctype html>

<html>
<head>
<meta charset = "UTF-8">
<title>Pythagorean theorem</title>
</head>

<body>
<math xmlns = "http://www.w3.org/1998/Math/MathML">

<mrow>
<msup><mi>a</mi><mn>2</mn></msup>
<mo>+</mo>

<msup><mi>b</mi><mn>2</mn></msup>
<mo> = </mo>

<msup><mi>c</mi><mn>2</mn></msup>
</mrow>

</math>
</body>
</html>

This will produce result: a2 + b2 = c2.

Session Storage
HTML5 introduces two mechanisms, similar to HTTP session cookies, for storing structured
data on the client side and to overcome following drawbacks.
 Cookies are included with every HTTP request, thereby slowing down your web
application by transmitting the same data.
 Cookies are included with every HTTP request, thereby sending data unencrypted
over the internet.
 Cookies are limited to about 4 KB of data. Not enough to store required data.

For example, if a user buying plane tickets in two different windows, using the same site. If
the site used cookies to keep track of which ticket the user was buying, then as the user
clicked from page to page in both windows, the ticket currently being purchased would
"leak" from one window to the other, potentially causing the user to buy two tickets for the
same flight without really noticing. HTML5 introduces the sessionStorage attribute which
would be used by the sites to add data to the session storage, and it will be accessible to any
page from the same site opened in that window, i.e., session and as soon as you close the
window, the session would be lost.

Following is the code which would set a session variable and access that variable −

<!DOCTYPE HTML>

<html>
<body>
<script type = "text/javascript">

if( sessionStorage.hits ) {
sessionStorage.hits = Number(sessionStorage.hits) +1;
} else {
sessionStorage.hits = 1;
}
document.write("Total Hits :" + sessionStorage.hits );
</script>

<p>Refresh the page to increase number of hits.</p>


<p>Close the window and open it again and check the result.</p>

</body>
</html>

This will produce the following result −

Total Hits :1

Refresh the page to increase number of hits.

Close the window and open it again and check the result.

Local Storage
The Local Storage is designed for storage that spans multiple windows, and lasts beyond the current
session. In particular, Web applications may wish to store megabytes of user data, such as entire
user-authored documents or a user's mailbox, on the client side for performance reasons.
Example

HTML5 introduces the localStorage attribute which would be used to access a page's local
storage area without no time limit and this local storage will be available whenever you
would use that page.

Following is the code which would set a local storage variable and access that variable every
time this page is accessed, even next time, when you open the window −

Live Demo
<!DOCTYPE HTML>

<html>
<body>
<script type = "text/javascript">

if( localStorage.hits ) {
localStorage.hits = Number(localStorage.hits) +1;
} else {
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>

<p>Refresh the page to increase number of hits.</p>


<p>Close the window and open it again and check the result.</p>

</body>
</html>

This will produce the following result −

You can also Delete Web Storage using localStorage.remove('key'); where 'key' is the key of the
value you want to remove. If you want to clear all settings, you need to call localStorage.clear()
method.

HTML5 - Web SQL Database

The Core Methods


There are following three core methods defined in the spec that I am going to cover in this
tutorial −

 openDatabase − This method creates the database object either using exis6ng
database or creating new one.
 transaction − This method gives us the ability to control a transaction and
performing either commit or rollback based on the situation.
 executeSql − This method is used to execute actual SQL query.
Executing queries
To execute a query you use the database.transaction() function. This function needs a single
argument, which is a function that takes care of actually executing the query as follows −

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});

The above query will create a table called LOGS in 'mydb' database.

TABLES

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A
table header is defined with the <th> tag. By default, table headings are bold and centered. A
table data/cell is defined with the <td> tag.

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

ALSO TRY ADDING BORDER, COLLAPSED BORDER ,ADDING CELL PADDING, LEFT ALLIGNED
HEADING, CELL THAT SPAN MANY COLUMNS

CELL THAT SPNAS MANY COLUMNS EXAMPLE

<!DOCTYPE html>

<html>

<head>
<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

text-align: left;

</style>

</head>

<body>

<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">

<tr>

<th>Name</th>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

<td>55577854</td>
<td>55577855</td>

</tr>

</table>

</body>

</html>

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:

<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

HTML Lists
HTML List Example

An Unordered List: <ul> </ul>

 Item
 Item
 Item
 Item

An Ordered List: <al> </al>

1. First item
2. Second item
3. Third item
4. Fourth item

<!DOCTYPE html>
<html>

<body>

<h2>An Unordered HTML List</h2>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

<h2>An Ordered HTML List</h2>

<ol>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

You can also include “styles” <ul style="list-style-type:disc;"> in to un ordered items list. Disc,
circle, square and none.

Ordered HTML List - The Type Attribute


The type attribute of the <ol> tag, defines the type of the list item marker: available styles are
Numbers, Uppercase letters, Lowercase letters, roman numbers.

HTML Description Lists


HTML also supports description lists.

A description list is a list of terms, with a description of each term.


The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd>
tag describes each term:

Nested HTML Lists


List can be nested (lists inside lists):

Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

<!DOCTYPE html>

<html>

<body>

Control List Counting


By default, an ordered list will start counting from 1. If you want to start counting from a
specified number, you can use the start attribute:

<h2>The start attribute</h2>

<p>By default, an ordered list will start counting from 1. Use the start attribute to start
counting from a specified number:</p>

<ol start="50">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>
<ol type="I" start="50">

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

</body>

</html>

HTML 5 LISTS SUMMARY

 Use the HTML <ul> element to define an unordered list


 Use the CSS list-style-type property to define the list item marker
 Use the HTML <ol> element to define an ordered list
 Use the HTML type attribute to define the numbering type
 Use the HTML <li> element to define a list item
 Use the HTML <dl> element to define a description list
 Use the HTML <dt> element to define the description term
 Use the HTML <dd> element to describe the term in a description list
 Lists can be nested inside lists
 List items can contain other HTML elements
 Use the CSS property float:left or display:inline to display a list horizontally

You might also like