PROWAREtech

articles » current » html » tutorial » page-6

Hyper-text Markup Language: Tutorial

A tutorial of HTML5 - Page 6 - How Important are the New HTML5 Tags?, Special HTML5 Tag: CANVAS, .

How Important Are These New Tags

There is no real reason to use new elements like <footer>, <header>, <main>, <article>, <summary>, <section>, <aside>, <nav> and <figure>. It does not make web pages show any better to Google's search engines. It is okay to continue to use the <div> tag and not have any problems with the search engines.

Here is the previous example document using some new HTML5 tags. It does appear to be cleaner than using id and class attributes on <div> tags:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Hello, World</title>
	</head>
	<body>
		<header>
			<img alt="company logo" width=200 height=50 src="companylogo.gif" />
		</header>
		<main>
			<article>
				<h1>Document Headline</h1>
				<p><cite>Hello, World!!!</cite></p>
				<p>This is inline <code>programming code</code>.
					This is a <a href="http://www.google.com/">link to Google</a>.
				</p>
				<pre>
	this is a block of programming code
	int x = 3 + 2 * 4; <span style="color:green;">// comment</span></pre>
				<ol>
					<li>bullet 1</li>
					<li>bullet 2</li>
					<li>bullet 3</li>
				</ol>
				<blockquote>
					this is a block quote
				</blockquote>
			</article>
		</main>
		<footer>
			<small>Copyright 2007 (this is small text)</small>
		</footer>
	</body>
</html>

Special HTML5 Tag: CANVAS

The <canvas> tag is the only one that requires the use of JavaScript. Here is a basic paint program example using the new <canvas> tag and some CSS.

<!DOCTYPE html>
<html>
<head>
<title>Drawing with the Canvas</title>
<style type="text/css">
	body {
		background-color: #fff;
	}
	.selected {
		margin: 5px;
		float: left;
		border: 3px solid #888;
	}
	.notselected {
		margin: 5px;
		float: left;
		cursor: pointer;
		border: 3px solid #fff;
	}
	.paintChoices {
		float: left;
		border: 1px solid #aaa;
		width: 200px;
		clear: both;
	}
	#paintCanvas {
		border: 1px solid black;
		clear: both;
		float: left;
	}
	#imgCanvas {
		border: 1px solid black;
		clear: both;
		float: left;
	}
</style>
<script type="text/javascript">
	var canvas;
	var context;
	var drawing = false;
	var prevColorElement;
	var prevThicknessElement;
	function changeColor(color, element) {
		if (prevColorElement != element) {
			context.strokeStyle = color;
			element.className = "selected";
			if (prevColorElement != null) {
				prevColorElement.className = "notselected";
			}
			prevColorElement = element;
		}
	}
	function changeThickness(thickness, element) {
		if (prevThicknessElement != element) {
			context.lineWidth = thickness;
			element.className = "selected";
			if (prevThicknessElement != null) {
				prevThicknessElement.className = "notselected";
			}
			prevThicknessElement = element;
		}
	}
	function start(e) {
		drawing = true;
		context.beginPath();
		var x = e.pageX - canvas.offsetLeft;
		var y = e.pageY - canvas.offsetTop;
		context.moveTo(x, y);
	}
	function stop() {
		drawing = false;
		document.getElementById("imgCanvas").src = canvas.toDataURL();
	}
	function draw(e) {
		if (drawing == true) {
			var x = e.pageX - canvas.offsetLeft;
			var y = e.pageY - canvas.offsetTop;
			context.lineTo(x, y);
			context.stroke();
		}
	}
	window.onload = function () {
		canvas = document.getElementById("paintCanvas");
		context = canvas.getContext("2d");
		canvas.onmousedown = start;
		canvas.onmouseup = stop;
		canvas.onmouseout = stop;
		canvas.onmousemove = draw;
	};
</script>
</head>
<body>
	<div class="paintChoices">DRAWING COLOR<br />
		<div class="notselected" onclick="changeColor('rgb(255,0,0)', this);"
			style="width:15px;height:15px;background:rgb(255,0,0);"></div>
		<div class="notselected" onclick="changeColor('rgb(0,224,0)', this);"
			style="width:15px;height:15px;background:rgb(0,224,0);"></div>
		<div class="notselected" onclick="changeColor('rgb(0,0,255)', this);"
			style="width:15px;height:15px;background:rgb(0,0,255);"></div>
		<div class="notselected" onclick="changeColor('rgb(0,0,0)', this);"
			style="width:15px;height:15px;background:rgb(0,0,0);"></div>
	</div>
	<div class="paintChoices">BRUSH THICKNESS<br />
		<div class="notselected" onclick="changeThickness(3, this);"
			style="width:3px;height:3px;background:rgb(0,0,0);"></div>
		<div class="notselected" onclick="changeThickness(6, this);"
			style="width:6px;height:6px;background:rgb(0,0,0);"></div>
		<div class="notselected" onclick="changeThickness(12, this);"
			style="width:12px;height:12px;background:rgb(0,0,0);"></div>
	</div>
	<canvas id="paintCanvas" width="600" height="400">
		The canvas is not supported by your browser.
	</canvas>
	<p style="float:left;clear:both;">Right click this image to save it to your computer:</p>
	<img id="imgCanvas" src="" width="600" height="400" />
</body>
</html>

<<<[Page 6 of 8]>>>

Comment