Scribd
Upload
20 views

HTML 5 Bsics

HTML 5 basics

Uploaded by

Awah Angu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

HTML 5 Bsics

HTML 5 basics

Uploaded by

Awah Angu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

Page Setup

1. <!DOCTYPE html> : start all webpages which specifies the type of electronic document you are
creating
2. <html> </html>: defines the web page content area as a markup language
3. <head> </head> : all the descriptive information and web page external links for webpage
behavior and design
4. <meta charset="utf-8"> : descriptive information for a webpage to encode characters
5. <title>Tutorials Point</title> : descriptive information for a webpage
6. <body></body>: defines webpage content area
7. <header> </header> : holds the header content for a webpage
8. <h1>HTML5 Document Structure Example</h1> : heading content
9. <p>This page should be tried in safari, chrome or Mozilla.</p> : paragraph content
10. <div></div>: container to hold any kind of web content
11. <footer> </footer> :holds footer content for a webpage
12. <p>Created by <a href="http://tutorialspoint.com/">Tutorials Point</a></p> : links a web
content to any other webpage page or content.
<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<title>Tutorials Point</title>
</head>

<body>

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

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

</body>
</html>

1
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.
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.
HTML5 − SYNTAX
Rules that govern how words are combined to form sentence or phrases
HTML5 comes with a lot of flexibility and it supports the following features −
 Uppercase tag names. (Tag is a piece of mark-up or a notation representing an element)
 Quotes are optional for attributes.
 Attribute values are optional.
 Closing empty elements are optional.

The DOCTYPE
<!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 above syntax is case-insensitive.

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.

2
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.
Checkout the complete list of HTML5 Elements.
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.
Check the complete list of HTML5 Attributes.
The following tags have been introduced for better structure −
 section: This tag represents a generic document or application section. 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 section.
 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 section of the document intended for navigation.
 dialog: This tag can be used to mark up a conversation.
 figure: This tag can be used to associate a caption together with some embedded content, such as a
graphic or video.

3
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>

4
<!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="http://www.tutorialspoint.com/html">HTML Tutorial</a></li>
<li><a href="http://www.tutorialspoint.com/css">CSS Tutorial</a></li>
<li><a href="http://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="http://tutorialspoint.com/">Tutorials Point</a></p>
</footer>

</body>

</html>

5
It will produce the following result –

HTML5 − ATTRIBUTES
As explained in the previous section, 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 attributes 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.
HTML5 − ATTRIBUTES
Attribute Options Function
Specifies a keyboard shortcut to access an
accesskey User Defined
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
class User Defined
Style Sheets.

6
Attribute Options Function
Specifies if the user can edit the element's
contenteditable true, false
content or not.
contextmenu Menu id Specifies the context menu for an element.
Custom attributes. Authors of a HTML document
data-XXXX User Defined can define their own attributes. Must start with
"data-".
Specifies whether or not a user is allowed to drag
draggable true, false, auto
an element.
Specifies the height of tables, images, or table
height Numeric Value
cells.
Specifies whether element should be visible or
hidden hidden
not.
Names an element for use with Cascading Style
id User Defined
Sheets.
item List of elements Used to group elements.
Item prop 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.
Tab index 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.
Specifies the width of tables, images, or table
width Numeric Value
cells.

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>
The above code will be perfectly valid HTML5 with two custom attributes called data-subject and data-
level. You would be able to get the values of these attributes using JavaScript APIs or CSS in similar way
as you get for standard attributes.

You might also like