HTML 5 Markup Articles

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
Displaying Basic Scalable Shapes on Your Web Pages with SVG

One of the issues with images on your Web site is that when you try to scale the page or display it on different devices, the image can become dithered or malformed. Learn how to use scalable vector graphics (SVG) to avoid this issue.
Web Scraping JavaScript Rendered Content

HTML parsers like jsoup only see the raw page source and are completely unaware of any content that is added to the DOM via JavaScript. Rob Gravelle shows us how to automate the Chrome headless browser from a Python script.
How to Access a Single HTML Element on a Web Page

One of the quickest ways to get an element on a web page is by using the JavaScript getElementById() method found within the document object model.
The 7 Best HTML5 APIs for Creating Interactive Websites

Madan Pariyar walks you through the seven best HTML5 APIs that you can use for boosting the interactivity of your websites.
Getting Started with WebSockets

Learn more about the concept of WebSockets and see how to establish a connection with the browser and communicate directly with it.
HTML Layout Tips

See how modern sites use CSS-based and JavaScript-based frameworks to make dynamic and responsive websites.
It's Time for an HTML5 Time Tag

One of the additions in HTML5 was the <time> tag that allows you to represent a machine-readable date and/or time on your web pages.
Working with HTML Styling Blocks

Octavia Anghel shows you how to use the main HTML elements used for styling blocks of HTML.
Creating Beautiful Customized Alerts with SweetAlert2

Learn how to create beautiful and user-friendly alerts for your web applications.
How to Use HTML Callouts and Quotes

Learn more about how to use callouts and quotes in HTML to make your pages cleaner and more attractive.
Working with HTML Forms

Learn how to create, implement and style HTML Forms via CSS.
What Is Semantic HTML and Why Should We Use It?

Learn more about the top HTML5 semantic tags, markups that add more meaning to HTML by providing a link between content and the document structure of that type.
Creating Layers on Your Web Pages with Divs

Learn how you can control positioning and layers on your HTML pages with a little creativity and div tags.
So You Don't Want to be Hacked with Cross-Site Scripting (XSS)

If you are creating a site that allows users to enter information, then you need to avoid basic mistakes that can leave your site vulnerable to being hacked.
How to Make a Photo Collage Using HTML5 and CSS3

Octavia Anghel shows you how to create a photo collage of your own images using HTML5 and CSS3.
Mastering Drag and Drop with jQuery UI

In this article, Diogo Souza shows you some practical examples of the use of jQuery UI with explanation about the code created.
Adding Semantic Markup to Your HTML's Structure

See how to modernize your HTML pages by adding the HTML5 semantic tags to your web page markup.
Advanced HTML Table Features

HTML tables don't have to be boring. Learn how to make the tables on your dynamic web pages more unique and functional with various methods of displaying your data.
7 Ways to Get the Most Out of HTML5

Learn how to get the most of out HTML5 from three industry experts.
So You Want to Optimize Your Images...

By reducing the overall size of the images you are using, you'll reduce the amount of time that is needed to download and display your pages. That can also have a positive impact on how your pages are treated by the search engines!
Display Cross-domain Data Using postMessage()

Perhaps there is no greater bane to a web developer's existence than the same-origin policy. Rob Gravelle shares a relatively new technique for sharing data across two domains that utilizes the JavaScript postMessage() method.
Exploit the Versatility of HTML Lists

Learn how to create different types of lists: unordered, ordered, nested lists, menu, drop-down lists, etc.
How to Compose and Send HTML Email Newsletters

Creating an HTML newsletter that looks consistently good across multiple devices and browsers requires you to modify your newsletter's underlying HTML markup directly - a task that's easier said than done. Rob Gravelle presents a few good apps that help greatly in this regard.
How to Code Background Colors in HTML Email Newsletters

Designing an email newsletter requires you to give some thought to the colors that you use. Colors should be attractive while not overpowering the content. This tutorial explains how to use HTML and CSS color codes to set the background colors to achieve the look you want.
Top HTML5 Features: Simplified Script Tags, Autofocus, and More

In part 2 of the Top HTML5 Features series, Rob Gravelle presents a few more great additions to the HTML spec, including simplified script and link tags, the autofocus feature, and more.
10 Common Uses of Bootstrap

In this article you will learn 10 things you can do with Bootstrap, such as building custom frameworks, work with HTML, CSS, JavaScript and more.
Getting Started with Twitter Bootstrap 3

With so many people browsing the Internet via mobile devices, it's crucial to optimize your websites for both the desktop and mobile browsing experience. Rob Gravelle shows how to design a web page with a navigation bar, header, three-column layout, and a footer using nothing more than one HTML file and Twitter Bootstrap 3.
HTML5 and the Evolution of Images

Rob Gravelle presents some simple techniques that we can implement to make our images more responsive.
Using the HTML5 Download Attribute

The new HTML5 download attribute promises to replace PHP-driven file download scripts with a completely HTML-based paradigm. In today's article, Rob Gravelle discusses how to use this exciting new markup element.
Exploring the Drag and Drop Function in HTML5

HTML5’s native drag and drop element offers developers unique and almost unlimited functionalities, this article takes a look at this elements key features.
Html5 and Bootstrap, a Recipe for Development Success

With the advent of the technology in the previous years the world of web development has seen major revolutions. The introduction of Html5 as an advanced markup language is one of these marvelous additions in the field of web development. During the previous 8 months, after its first release ,Html5 has rapidly become the most popular markup language among web developers. The outstanding features, the ease of coding and the ability to run offline applications are the main characteristics of Html5 and the prominent reasons for developers to use it.
HTML5 Game Development Overview and Resources

So, you have finally decided to take the plunge and develop the next big video game. Read on and James Payne will show you where to start.
HTML5 Attribute Change Reference for Web Developers - Updated

HTML5 has over 40 new attributes that have been added, to date, with a caveat since you will find that not all attributes actually “new” but rather they are existing attributes that you may already be familiar with. This reference we will discuss each of them while showing you how they are used with other aspects of HTML5 attributes.
Working with Regular Expressions in your HTML5 Forms

In this article, we will learn about the most powerful validation available in HTML5 – the power of regular expressions.
A Sneak Peak at HTML5 Form Enhancements

In this article, we will get a quick overview of a couple of form enhancements in HTML5 – placeholders and support for autofocus.
Working with Channel Messaging APIs in HTML5

This article walks web developers through the basics of working with the channel messaging APIs in HTML5.
Working with the Battery Status API in HTML5 Web Applications

This article walks web developers through the basics of the battery status API which is available as part of HTML5 specification. Knowledge of this API will enable creating web applications aware of the battery status on devices.
A Look at New and Changed Formatting HTML5 Elements

With HTML5, there are a few new formatting elements, as well as change in some of the existing formatting markup elements. This article walks the readers through the changes.
Basics About the New HTML5 Meter Markup Element

This article walks Web developers through the basics about the new HTML5 meter markup element including code snippets and meter markup examples.
Specifying Supplementary Media Tracks for Media Elements Using the HTML5 Track Markup Element

This article walks web developers through the basics of specifying supplementary media tracks for audio and video elements in their HTML5 web pages.
Displaying Calculation Results Using the New Output HTML5 Element

This article shows web developers how to display calculation results using the new HTML5-only output markup element.
Showing Progress in Your HTML5 Pages with the Progress Markup Element

This article walks web developers through the basics behind the progress markup element and how it can be used to show progress in your HTML5 pages.
Marking Up Text in Your HTML5 Applications Using the “mark” Element

This article walks web developers through the basics of marking up text in web pages using the new HTML5-only "mark" element.
Working with Ranges in Your HTML5 Web Pages

In this article, Vipul Patel walks you through the basics of working with ranges in your HTML5 web pages.
Working With The New HTML5 “Month” Input Types Attribute In Your Apps

W3C introduced new input types to support working with month and year in HTML5. This article explores how to use this input type in your HTML5 web pages.
Exploring HTML5's New 'datetime' Input Types For Your Web Apps

W3C introduced new input types to support date/time in HTML5. This article explores how to use these input types in your HTML5 web pages.
HTML5’s New ‘tel type’ Attribute On The Input Element, Learn It!

HTML5 now has a new feature known as the tel type attribute on the input element, read on and learn how to use this new and very useful feature as well as how to handle telephone numbers in your HTML5 pages.
Building Security Support in Our HTML5 Application Using the Keygen Markup Control

This article walks web developers through the basics of the keygen markup element, a new element introduced in HTML5.
Summarizing Your Topic Using the Summary Markup Element in HTML5 Web Pages

Learn how to use the new summary markup element in HTML5 powered web pages.
Using the Figure and Figcaption Markup Elements in Your HTML5 App

This article walks web developers through the basics of building a HTML5 web page using figure and figcaption markup elements.
Working with the embed markup element in your HTML5 web pages

This article will teach you the basics behind the embed markup element in HTML5.
Using the Details Markup Element in your HTML5 Web Pages

This article walks web developers through the basics of the new details markup element introduced in HTML5.
Working with HTML5 selector API

This article walks web developers through the HTML5 Specification 'Selector API', covering the basics and best practices for this extremely useful feature.
Enabling Datalist Markup Element Options in HTML5

HTML5 makes it easy for web developers to provide a list of choices for input elements. This article walks web developers through the basics of enabling options to choose from using the datalist markup element in HTML5 powered web pages.
Enable User Interaction on a Web Page Using Command Markup Element in HTML5

This article walks web developers through the basics of the command markup element in HTML5 which can be used by different UI elements to execute instructions.
Working with the Canvas Markup Element to Render Beautiful Graphics in HTML5

This article walks web developers about the basics of the canvas markup element and using it to draw graphics in your HTML5 web pages.
Accessing User’s Address book using Contacts Intent in HTML5

This article walks HTML5 developers through the basics of the Contacts Intent support.
Understanding the New Way to Present Content on the Web- Using “Article” Markup Element in your HTML Pages

This article walks HTML developers through using a new way to present content on the web using the new “article” markup element in HTML5.
A 5 Minute Overview of All New HTML5 Markup Elements

A lot has changed over the years in the HTML space in terms of supported markups. This article walks readers through all the new HTML5 markup elements.
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.

HTML5 Markup

Web Development Newsletter Signup