Features of HTML5,
Lots talk about theory, now time to getting started.
Doctype,
<!DOCTYPE html>
Enconding (required for security reasons),
<meta charset="utf-8"> (charset=utf-8 , charset='utf-8' , charset="utf-8" all are allowed, follow whatever you prefer, you can write like older long way).
Sample HTML5 page,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web2 Students blog</title>
</head>
<body>
<p>Introduction to html5</p>
</body>
</html>
Adding external CSS and JS,
<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>
<article> - It is self-contained content. It can be like div but with special semantic. Like articles can be list of posts in blog, news items, forum posts, comments on posts, etc. So, individual article is like single entry of list of items. It can contain <h1> , <p>, (like div )etc.
<header> - it's in header of html page. Normally, it contains, title, logo, link to home page, and other links, etc. It can be in the article containing heading of the article.
<hgroup> - It used to group heading (h1-h6) elements. It is used inside header.
<nav> - It's used for navigation links.
<footer> - As the name suggest, it's used as footer. Like header, it can be used in multiple times (in section). While multiple times, header and footer will be header and footer part of that section (like, in article). Example,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web2 Students blog</title>
</head>
<body>
</html>
More coming soon.
- There are many new elements like <article> , <canvas> , <footer> , <header> , <section> , <hgroup> , <nav> , <audio> , <video> , <datalist> , etc
- Removed elements,<acronym> , <applet> , <basefont> , <big> , <center>, <frame>, etc
- Added New Attributes even we can add custom attributes. Custom attributes starts with data- string like ,
<div data-customfield="value" data-language="html"> .... </div>
- Full CSS3 Support
- 2D/3D Graphics
- Local Storage
- Local SQL Database (we can run sql query in browser but that is no longer active.
- HTML5 is simplified.HTML5 is much more Semantic than html4.
- Many more...
Lots talk about theory, now time to getting started.
Doctype,
<!DOCTYPE html>
Enconding (required for security reasons),
<meta charset="utf-8"> (charset=utf-8 , charset='utf-8' , charset="utf-8" all are allowed, follow whatever you prefer, you can write like older long way).
Sample HTML5 page,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web2 Students blog</title>
</head>
<body>
<p>Introduction to html5</p>
</body>
</html>
Adding external CSS and JS,
<link rel="stylesheet" href="styles.css" />
<script src="scripts.js"></script>
<article> - It is self-contained content. It can be like div but with special semantic. Like articles can be list of posts in blog, news items, forum posts, comments on posts, etc. So, individual article is like single entry of list of items. It can contain <h1> , <p>, (like div )etc.
<header> - it's in header of html page. Normally, it contains, title, logo, link to home page, and other links, etc. It can be in the article containing heading of the article.
<hgroup> - It used to group heading (h1-h6) elements. It is used inside header.
<nav> - It's used for navigation links.
<footer> - As the name suggest, it's used as footer. Like header, it can be used in multiple times (in section). While multiple times, header and footer will be header and footer part of that section (like, in article). Example,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web2 Students blog</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/blog/">Blog</a></li>
</ul>
</nav>
<article>
<header>
<hgroup>
<h1>Introduction to HTML5</h1>
<h2>Example of HTML5</h2>
</hgroup>
</header>
<footer>
<p>Published: <time datetime="2013-04-12T00:00:00-00:00" pubdate>April 12,2013 0:00 am EDT</time></p>
</footer>
</article>
</body></html>
More coming soon.
No comments:
Post a Comment