The HTML5 markup language helps you to create leading edge web pages and sites. See how to do a variety of HTML5 tips and tricks using the following articles, tutorials, and how-tos.
HTML5 Markup
-
The !DOCTYPE Tag and Its Effect on Page Rendering
In today's article, Rob Gravelle explains how the DOCTYPE tag affects HTML page rendering.
-
10 Tips to Create Effective HTML5 Layouts
In this article we're going to look at strategies to get consistent results from your HTML5 layouts, using a combination of good design practices and the new HTML5 tags and structure. This will serve as a starting point for site creation now and for the future.
-
Developing in HTML5 with the New Structure Elements: The Basics
In the early days of web development the restrictions on how a page could be laid out were extremely limiting. With HTML5 the trend shifts a bit from removing restrictions to adding structure to HTML elements that are related to content layout. In this article we'll explore the basics of an HTML5 page structure with four new elements: header, nav, section and footer.
-
What's New in HTML5 Forms: The Datalist Control
The topic of today's article, the Datalist control, is a little more complex than a simple input, and thus requires more care if you decide to use it. So for those of you who can't wait to take advantage of the latest and greatest that HTML5 has to offer, this article is for you!
-
Developing in HTML5 with the New Structure Elements: Specialty Elements
This is our final installment in our series about the new HTML 5 elements related to page structure. In this article, we will expand on our example again by adding and discussing the bdi, details, summary, time and wbr elements.
-
Providing an HTML5 Date Input control with Fallback
The HTML5 Date Input control has been long awaited and makes inputting dates simple for both the user and the web developer. In this tutorial, we'll be building a Accrued Interest calculator that accepts a start and end date to create the period.
-
HTML5 Reference: Input Element Types: Color, Email, Number and More
Last week we discussed the new type attributes that HTML5 offers for the Input element. This week we'll look at the rest of the new types and example code, for the following types: color, email, number, range, search and url.
-
HTML5 Offers Several New Types for the Input Element
HTML5 provides a much needed expansion of the Input element which allows developers to gain much more control over the information that is being provided by the user. We'll explore each of these new types, put together some examples, and see what browsers are currently supporting them.
-
An Overview of the W3C HTML5 Document Outliner Algorithm
HTML4's use of div and header tags to describe a document's structure has many limitations that can be a problem for web developers. This article tackles that issue, and specifically focuses on the Header and Section elements, describing how to effectively use them to define the desired outline for your HTML documents.
-
HTML5 Attribute Change Reference for Web Developers
With each iteration of HTML you would expect to see new attributes introduced. Well, HTML5 is no exception. In all there are over 40 attributes that have been added in HTML5, some of which that are totally new, and others that have been around, but have been added to more elements. In this reference for web developers we will discuss each of them, tell you how they are used and discuss various other aspects of HTML5 attributes.
-
Create a Visual Library of Images in HTML5 Canvas: Animations and Handling Multiple Devices
Last week in our tutorial on How To Create a Visual Library of Images in HTML5 Canvas, we told you about mouse management and state storage. In this week's tutorial, we're going to discuss animations, how to handle multiple devices, and will conclude the tutorial.
-
HTML5 Image Attributes and Features Explained
With previous versions of HTML, there were a number of limitations to using images in web pages, one of the most salient being that there was no way to semantically associate an image with its caption. Well, that's all changed with HTML5. In fact, you won't believe some of the nifty things that you can do with images now!
-
How To View HTML5 Videos on YouTube
In this article, we will discuss the details of YouTube's use of HTML5, how you can get started with their opt-in HTML5 video trial, and the current limitations of YouTube's HTML5 video.
-
Flash and Silverlight R.I.P.? The Wonderful World of HTML5
Say it isn't so! HTML5 is predicted to kill Flash and Silverlight as well as destined to help resolve fragmentation in the mobile market! Is this good or bad? This infographic provides information related to the wonderful world of HTML5!
-
How Does the Removal of Current HTML Elements Help
There has been a great deal of buzz on how HTML5 will change how web developers work and think. In this article we are going to take a close look at those elements which are are going away, why they are being phased out and alternative HTML5 options for those elements.
-
HTML 5 Drag & Drop Basics
Microsoft incorporated drag & drop into Internet Explorer 5.0 way back in 1999! With the emergence of Dynamic HTML, other browsers were also able to implement drag & drop. However, it required a lot of scripting to get it to work right. Now, HTML5's native drag & drop capabilities promise to make our lives just a little bit easier.
-
Web Developer Tutorial: HTML5 Microdata
The HTML5 draft specification includes Microdata. The Microdata spec provides a standardized syntax for additional semantic markup to your web pages to enhance the machine readability of your web pages. This tutorial will discuss microdata and will show why you should be interested in it!
-
Web Developer Basics: Link Relations In HTML5
In the first installment of this series, we introduced HTML5 and saw how much of its most basic syntax is far more simple and direct than the way most developers are used to coding. In this article, we'll look at some other basic tags and see some of the power of the language.
-
Web Developer Basics: Learning About HTML5
HTML5, depending on who you listen to, may be either a disruptive new technology that has the potential to bring entire companies to their knees, or a smooth transition from current HTML 4.0 that promises to make life much easier for developers. Both are at least partially true, and in this continuing series, I hope to help you make sense out of HTML5: both business sense and nuts-and-bolts coding-level sense.
-
HTML5 Development Class: Mouse Events
HTML5 is changing and expanding the landscape of web development. There are a multitude of new attributes and events that are being introduced with HTML5. In this installment we’ll take a look at the new and old events surrounding the mouse including movement, position and clicking as well as the new drag and drop events.
-
HTML5 Development: Form & Keyboard Events
Recently we have covered some of the major event categories for HTML5. In this installment we'll take a look at the "miscellaneous" categories that we have not yet covered. We'll see what HTML5 offers in new form events as well as most of the form and keyboard events developers have become accustomed to in HTML4.
-
HTML5 Development Class: Media Events
There has been much discussion surrounding the Media capabilities in HTML5: How will it impact Flash? Will we still need different media players like QuickTime and Windows Media Player? Why is HTML5 attempting to standardize media on the web? This article will give you the foundation for making informed opinions on HTML5 and its media capabilities.
-
HTML Class: Elements of HTML5
Since 2004, the future of web development known as HTML 5 has been envisioned, discussed and re-envisioned over and over again. Here we will take a look at some of the current highlights and help you envision how they may one day affect your web development.
