MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

HTML 5 tags you may not have used so far

Published on 18 May 15
1902
0
2
HTML 5 tags you may not have used so far - Image 1
The latest version of HTML standard, HTML5, is a markup language for web developers to use for structuring and presenting content to the user. Basically, HTML 5 is the language computer systems used to communicate with each other.
I will be providing a few programming tips for HTML 5 users that would certainly assist you in your web development or to just boost your knowledge on HTML 5 itself.

Couple of basic points to note before I proceed, if your website is coded in standards which are compliant to the XHTML strict, there isnât a need for you to change to HTML 5. Also, as HTML 5 is still a relatively new development under the World Wide Web consortium, there are still many patches to update and changes to be made, so applying HTML 5 may cause occasional issues to your website.

By having HTML 5, there are additional features that would be incredibly useful for you. Such features include syntactic ones like <video>, <audio> and <canvas>. Page structuring features are also included such as <article>,<header>, <footer>, <nav> and <figure>.

Listed below are ways to input some of these tags.
The canvas tag (HTML5 Canvas element used to draw visualizations, similar to the <div> and <table> tag)
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="NewCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('NewCanvas');
var context = canvas.getContext('2d');

// do cool things with the context
context.font = '40pt Calibri';
context.fillStyle = 'blue';
context.fillText('Welcome to HTML5!', 150, 100);
</script>
</body>
</html>
The header tag (explains a header for a document or section)
<article>
<header>
<h1>What does MyTechLogy do?</h1>
<p>MyTechLogy's mission:</p>
</header>
<p>A unique meaningful platform, dedicated for Technology Enthusiasts and IT professionals to collaborate & share the knowledge, consult & learn, and to achieve career goals & aspirations. </p>
</article>
The footer tag (Similar to the header tag, contains information about the parent section)
<body>
<footer><a href=..>Go to home...</a></footer>
<hgroup>
<h1>Title</h1>
<h2>Sub-title</h2>
</hgroup>
<p>Lorem ipsum...</p>
<footer><a href=..>Go to home...</a></footer>
</body>
The article tag (Used for enabling blog posts):
<article>
<header>
<h1> Blog Title</h1>
<p>25/12/2045</p>
</header>
<p>Blog post</p>
<p>...</p>
<section>
<h2>Comments</h2>
<article>
<footer>
<p>Posted by: <span>Blogger</span></p>
<p>Time: 10 minutes ago</p>
</footer>
<p> Comment text starts here</p>
</article>
<article>
<footer>
<p>Posted by: <span>Blogger Name</span></p>
<p>Time: 15 minutes ago</p>
</footer>
<p>New comment here</p>
</article>
</section>
</article>
Standard HTML 5 template
Consolidating the HTML tags together, you will get a functional webpage. See below an example of a standard set of codes for a HTML 5 template.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Template</title>
<meta name="description" content="">
<link rel="stylesheet" href="css/style.css">
<!-- IE6-8 support of HTML5 elements --> <!--[if lt IE 9]>
<script src="//html5.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<header>
<hgroup>
<h1> Template for HTML5 </h1>
<h3>Standard template</h3>
</hgroup>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</nav>
</header>
<section>
</section>
<footer>
<div class="footer_navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About HTML5</a></li>
</ul>
</div>
<hgroup>
<h3>By James</h3>
<h4>from GreenBelt, MA</h4>
</hgroup>
<address>
<a href="mailto:abc.xyz@gamail.com">Email James</a>
</address>
</footer>
</body>
</html>
Other tips for HTML 5
With the standard template provided for those who are starting to learn HTML 5, letâs look at more advance tips for your programming pleasure.

Do use lower key characters when coding

Why? Well, here are my reasons. Firstly, many programmers are very used to the XHTML set of codes meaning they still prefer to use lowercase names. Lowercase are simpler to write and lastly, having a mixture of uppercase and lowercase names can cause major errors in your programming.

This is problematic when coding with uppercase and lowercase characters. For example,
<Section>
<p>This is a new paragraph.</p>
</SECTION>
This is what you should do,
<section>
<p>This is a new paragraph.</p>
</section>
Uploading Video on HTML 5
Of course, who wouldnât like videos on their browser. Being able to upload YouTube videos on your webpage would be beneficial for you. Hereâs an example of a set of codes for you to program your videos.
<video controls preload>
<source src="homeRun.ogv" type="video/ogg; codecs='vorbis, theora'" />
<source src="homeRun.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<p> If your browser is old. <a href="homeRun.mp4">Download this video right away.</a> </p>
</video>
Points to take note of, it is recommended to set and declare the type attribute as the browser may have to figure out the type itself. Also, not all browsers understand HTML 5 videos. What you can do is by using the source tab, you can provide a download link or embed a flash video.

Another useful tip is to enable to preload function for your videos (<video preload>). You wouldnât want your site visitors to wait for a video to load as it may cause them to leave your webpage if the information is not transmitted instantaneously.

Lastly, another useful video tip is to allow your videos to appear with display controls (such as the pause function and the volume control). To do so, you have to specify the controls attribute within the video element. The code to use would be <Video controls preload>
Prevent using inline JavaScript
Do be mindful not to use inline JavaScript events under your HTML markup.
An example would be this:
<button onclick="validate()">Submit</button>.
By doing this, you will be breaking the clean separation between the markup, presentation and the systemâs behavior which is necessary for your webpage to function. Furthermore, by using inline JavaScript, you might allow a user to interact with the page which he would then activate an event and may try to call a script that has not loaded yet. This will then cause an infuriating error for the user.
Adding email functions
To enable email validation functions into your websites, you have to enter the email to form inputs that teaches the browser to only accept strings that contain proper email address structure.
For example,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Email Check</title>
</head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit">Submit</button>
</form>
</body>
</html>
Well, thatâs all from my humble post on HTML 5. Hope the various tips and information will come in handy for you. If you are interested to know more about other programming tips such as on Python and JavaScript, you can check out My Blog Page at MyTechLogy.com.




















































































HTML 5 tags you may not have used so far - Image 1

The latest version of HTML standard, HTML5, is a markup language for web developers to use for structuring and presenting content to the user. Basically, HTML 5 is the language computer systems used to communicate with each other.

I will be providing a few programming tips for HTML 5 users that would certainly assist you in your web development or to just boost your knowledge on HTML 5 itself.

Couple of basic points to note before I proceed, if your website is coded in standards which are compliant to the XHTML strict, there isnât a need for you to change to HTML 5. Also, as HTML 5 is still a relatively new development under the World Wide Web consortium, there are still many patches to update and changes to be made, so applying HTML 5 may cause occasional issues to your website.

By having HTML 5, there are additional features that would be incredibly useful for you. Such features include syntactic ones like , and . Page structuring features are also included such as ,, , and .

Listed below are ways to input some of these tags.

The canvas tag (HTML5 Canvas element used to draw visualizations, similar to the and tag)

The header tag (explains a header for a document or section)

What does MyTechLogy do?

MyTechLogy's mission:

A unique meaningful platform, dedicated for Technology Enthusiasts and IT professionals to collaborate & share the knowledge, consult & learn, and to achieve career goals & aspirations.

The footer tag (Similar to the header tag, contains information about the parent section)

Go to home...

Title

Sub-title

Lorem ipsum...

Go to home...

The article tag (Used for enabling blog posts):

Blog Title

25/12/2045

Blog post

...

Comments

Posted by: Blogger

Time: 10 minutes ago

Comment text starts here

Posted by: Blogger Name

Time: 15 minutes ago

New comment here

Standard HTML 5 template

Consolidating the HTML tags together, you will get a functional webpage. See below an example of a standard set of codes for a HTML 5 template.

HTML5 Template

Template for HTML5

Standard template





By James

from GreenBelt, MA

Email James

Other tips for HTML 5

With the standard template provided for those who are starting to learn HTML 5, letâs look at more advance tips for your programming pleasure.

Do use lower key characters when coding

Why? Well, here are my reasons. Firstly, many programmers are very used to the XHTML set of codes meaning they still prefer to use lowercase names. Lowercase are simpler to write and lastly, having a mixture of uppercase and lowercase names can cause major errors in your programming.

This is problematic when coding with uppercase and lowercase characters. For example,

This is a new paragraph.

This is what you should do,

This is a new paragraph.

Uploading Video on HTML 5

Of course, who wouldnât like videos on their browser. Being able to upload YouTube videos on your webpage would be beneficial for you. Hereâs an example of a set of codes for you to program your videos.

If your browser is old. Download this video right away.

Points to take note of, it is recommended to set and declare the type attribute as the browser may have to figure out the type itself. Also, not all browsers understand HTML 5 videos. What you can do is by using the source tab, you can provide a download link or embed a flash video.

Another useful tip is to enable to preload function for your videos (). You wouldnât want your site visitors to wait for a video to load as it may cause them to leave your webpage if the information is not transmitted instantaneously.

Lastly, another useful video tip is to allow your videos to appear with display controls (such as the pause function and the volume control). To do so, you have to specify the controls attribute within the video element. The code to use would be

Prevent using inline JavaScript

Do be mindful not to use inline JavaScript events under your HTML markup.

An example would be this:

Submit.

By doing this, you will be breaking the clean separation between the markup, presentation and the systemâs behavior which is necessary for your webpage to function. Furthermore, by using inline JavaScript, you might allow a user to interact with the page which he would then activate an event and may try to call a script that has not loaded yet. This will then cause an infuriating error for the user.

Adding email functions

To enable email validation functions into your websites, you have to enter the email to form inputs that teaches the browser to only accept strings that contain proper email address structure.

For example,

Email Check

Email:

Submit

Well, thatâs all from my humble post on HTML 5. Hope the various tips and information will come in handy for you. If you are interested to know more about other programming tips such as on Python and JavaScript, you can check out My Blog Page at MyTechLogy.com.

This blog is listed under Development & Implementations Community

Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top