A Basic Introduction to HTML5

ByWalter Wimberly

HTML 5 is still a work in progress. So changes are being made to both the specification, and even more so, how browsers support/interpret the specification.

Key Features

HTML5 adds some new features to HTML. This is because computers, and therefore browsers, can do more than the original HTML specification was designed to do.

Here are some new key features to HTML5 (compared to HTML/xHTML)

  • New Tags Elements
    • header
    • article
    • section
    • footer
    • aside
    • etc…
  • New Attributes – including the ability for you to add your own, and still be legal/pass validation use the prefix “data-“ to make it work.
  • Full CSS3 Support – of course it is still evolving as well
  • Video and Audio – no need for Flash, or 3rd party plugins to include AV components
  • 2D/3D Graphics – SVG and WebGL
  • Local Storage – store information locally for off-line use
  • Location services – so if your site could benefit from knowing where your users are, you can access that information,
  • and more

Sample Page

A new doctype declaration is used.



This actually helps a bit, because it is smaller, and easier to remember. It also shows a change in that people are expecting the HTML5 to be a “living specification” therefore, instead of versioning, assume it is always changing. This could be problematic in the future. In some cases, what looks more complex, could be standard code before long:


	 
	
 Title of page 

	

		
The content 1... 

		
The content 2... 

		
The content 3... 

	

	
 Page Footer 


Each of the new tags defines a way to structurally layout the page, but the visual layout would still need to occur with CSS.


HTML5 and Mobile jQuery


You do not have, or even need, to use the new tags to create an HTML5 layout.


Mobile jQuery, for example, doesn’t use those tags. Rather, they use divs, and then use defined attributes. This is nice as some older browsers do not support the new tags. The Mobile jQuery library looks for these div tags, and adds additional markup to that.


Example page for Mobile jQuery: (this does not have the script or CSS, just the basic structure)


	
		My Page
   	
	
	
     

    	

  		
My Title

  	

    	

	  		
Hello world

	  	

    

	



 


A Basic Introduction to HTML5 was originally found on Access 2 Learn




	







	

		

					

		
					
Assistant Professor

				

			
Walter Wimberly is an Assistant Professor at a regional college in Tennessee, teaching Computer Science in the Software Engineering track. He works as a student advisor, oversees curriculum changes, develops new courses, and manages the advisory panel.

Walter taught full time for about 7 years, before going back into “industry” as a full stack Software Developer for a dozen years. There he focused on web based projects coding in JavaScript/jQuery and utilizing the Bootstrap CSS Framework on the front-end, and coding in PHP, ASP/ASP.Net, SQL on the back-end. 


Since he loves teaching, he taught as an adjunct web and digital media classes for eight (8) years, while working in industry, and has since returned to teaching full time.


He has been married for over 25 years, and is father to several special needs boys. As such, he is working on some projects to help others who have special needs to be self-sufficient, and support the care givers of those with special needs. Check out his Autism blog for more info.

		

		

								
										
							

	





	


		

			

				

					
Similar Posts