HTML 5 tags you may not have used so far
Published on 18 May 15
James0
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>.
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>
<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>
<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.
<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>
<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.
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.
This blog is listed under
Development & Implementations
Community
Related Posts:
Post a Comment
