Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

Article Center HTML Articles

Your source for news, insights, and inspiration at lynda.com. Come learn with us.

All articles

Featured articles

Article categories

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

By Chris Converse | Wednesday, May 07, 2014

Planning a Responsive Web Design

figure_2_alternate_content

As mobile web usage continues to rise, it’s increasingly important that your website functions across all types of devices and screen sizes. The smartest way to provide the best user experience (UX) for today’s technology is to create a website with a responsive design.

By Chris Converse | Tuesday, December 11, 2012

Converting Photoshop designs to HTML

For many designers, the process of designing a website ends with a series of mock-ups that represent how the website should look in a browser. While this is a necessary aspect to web design, it is only part of the design process. Translating the web design to HTML and CSS is as much an art form as it is a technical achievement.

It is my belief that web designers should be responsible for getting their design to the browser. Imagine hiring a print designer to sketch out a design, then provide Adobe Photoshop and Illustrator files to a printer, and expecting the pressmen to do the layout in InDesign. This print workflow is unthinkable. Just as a print designer is responsible for getting the design to the plate, a web designer should be responsible for getting the design to the browser.

While I’m not suggesting designers need to code every page of an entire website on their own, translating the design into HTML and CSS ensures the integrity of the design. Once the design works in a browser, web developers can use that HTML and CSS as a starting point as they implement their responsibilities to the project.

Creating the containers When evaluating your desired layout, one can imagine the structure, or “containers,” that will be needed to replicate the layout in HTML.

Responsive design strategy illustration

Once the HTML structure is in place, CSS is used to assign style and layout to the structure. The combination of HTML and CSS provides the presentation experience of your website. This process is not too far removed from other design methods, and can be mastered by designers in a few months.

Creating your web graphics The process for cutting up small graphics from your Photoshop, Illustrator, or Fireworks document is referred to as slicing. Many web graphic tools have a slicing tool, or something similar, which allows you to specify a portion of your canvas as a slice.

Slicing a Photoshop document for the web

Once portions of your design are specified inside of slice regions, exporting your main canvas results in individual web-ready graphics being created based on the pixels contained within the slice regions.

Assigning layout and style with CSS Cascading Style Sheets (CSS) allow us to give dimension, position, and style to HTML elements on our webpage. CSS is unique in that it accounts for the layout of our page, in addition to typographic style. Another great feature of CSS is the ability to assign images to the background of HTML elements. This gives us a unique opportunity to drive imagery in our design with CSS, instead of HTML. Combine this with CSS3 media queries, and we can change our images, as well as layout, based on the user’s screen size. For more on responsive download and design, see the blog post “Responsive download, not just responsive design”.

If you learn best by doing, my Creating a Responsive Web Design course shows you how to take a design mock-up into HTML and CSS. Learn a start-to-finish process for creating a responsive, CSS-based, backward-compatible HTML5 webpage… all in 91 minutes!

Suggested courses to watch next: • More courses by Chris ConverseCSS: Core ConceptsCSS: Page Layouts

By Chris Converse | Monday, November 19, 2012

Responsive download, not just responsive design

When considering a responsive design for a website, many web designers and developers only consider the layout. While it is key to ensure the layout and composition make use of the user’s screen size, the download time should also be considered as part of the user experience.

To really understand the concept of designing for responsive download, we first need to take into account that CSS can be used to add imagery to HTML elements of webpages. From there it becomes more apparent that CSS3 media queries can be used to alter imagery, as well as layout, based on a user’s screen size.

With this in mind, the <header> is one HTML5 element to focus on when planning a web layout. Typically the header area of a website is used for corporate branding, navigation, and imagery that sets the tone of the design. When creating a responsive web design, three or more sets of CSS rules will need to be specified based on the user’s screen size. These CSS rules will then in turn make adjustments to the sizing- and layout-based properties of the header elements based on available screen real estate. If we use CSS to specify imagery to be used in the header area, we can also drive more of the design tone with CSS.

Example of CSS driven imagery

Now, with CSS driving the imagery for the header element, combining CSS3 media queries with image assignments allows the imagery to adjust based on screen size. This allows designers to use larger, less compressed images for larger screens, while smaller screens reference smaller, more compressed images.

The ability to call on CSS referenced images that have varying dimensions and compression settings results in reduced download sizes and times for devices with smaller screens. This means the same HTML and CSS files will call on files for small- and large-screen devices, but the files called on for small-screen devices will be up to one-fifth the size of those called on for large-screen devices.

Three different images sizes created for a responsive web design with responsive download

This technique can be used in many elements of a responsive website, including photography galleries, graphics and diagrams, and even navigation or promotional elements. The amount of compression you apply to smaller images can be greater due to the higher pixel density of modern tablet and phone screens. That being said, compression versus quality has always been a trade-off on the web, so experiment with settings that will decrease file size while still maintaining the integrity of the original image. Also, make sure to always test your work on multiple devices if you get the chance.

If you’re interested in learning more about responsive web design in the lynda.com library, consider checking out Creating a Responsive Web Design from Chris Converse, or Responsive Design Fundamentals from James Williamson.

Interested in more? • All web design courses on lynda.com • All courses from Chris Converse on lynda.com

Suggested courses to watch next:• CSS: Core ConceptsCSS3 First LookHTML Essential Training

By Ray Villalobos | Friday, July 20, 2012

An introduction to LESS and Sass pre-processed CSS languages

Getting started on something new can be challenging, especially when the shear number of competing technologies that do similar things can make it tough to choose which one to give your attention to. One of the hot new trends in web design is CSS pre-processed languages and there’s two big ones vying for your attention—LESS and Sass. LESS and Sass are both ways of writing CSS code with a syntax that allows you to use features not yet available with Cascading Style Sheets (CSS), such as variables, nesting, conditionals, and more.

What are pre-processed CSS languages?

Pre-processed CSS languages add features to CSS that aren’t there yet—like variables, conditionals, and functions. They’re called pre-processed, because their final step is a processing, also called compiling, that converts the pre-processed language to regular CSS. In a nutshell, what you use on your site ends up being plain vanilla CSS, but comes as a result of processing the LESS, Sass, or other pre-processed language files you create.

Why use pre-processed CSS at all?

It’s hard enough becoming proficient with CSS, HTML, JavaScript, and jQuery, so if you can do the same thing with CSS, why would you want to submit yourself to learning an additonal language? Whether or not learning LESS or Sass is right for you comes down to whether or not the new languages will make you better, faster, or more efficient. Both LESS and Sass introduce variables into CSS, which I have found to be a very efficient detail that has made learning the new languages worthwhile for me.

For example, when you build a large web site, there’s usually a palette of colors you’re using throughout the site, and you might, for instance, be using one color for your article headlines that you also want to use on your links in the bottom navigation.

Example results of Less and SASS coding.

Example of web site design using the same color for article headlines and bottom navigation links.

Doing that with CSS is pretty easy:

<a href="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png"><img class="aligncenter size-full wp-image-14227" src="http://blogldc.s3.amazonaws.com/wp-content/uploads/2012/07/CODE-11.png" alt="CSS code that alters the color text within a web design." width="506" height="55"></a>

While that works well, what if you wanted to use that same color in 20 or 30 selectors, or in gradients with a bunch of different browser prefixes? Both Sass and LESS will allow you to create variables which make global changes on elements a breeze. The code for this color application—with the assigned variable @myColor—looks like this in LESS:

LESS CSS pre-processed code that alters web design color. 

And—with the assigned variable $myColor—like this in Sass:

SASS CSS pre-processed code that alters web design color. 

Looks pretty much like CSS, right? Both LESS and Sass let you use the regular CSS code you already know so you really don’t have to learn a whole new way of doing things—just some additional rules. Even if the only thing you get out of pre-processed CSS is the ability to use variables, that alone will save you a lot of time, and it’s technology that saves you time that you need to spend your time investigating.

Using a Compiler application

Unfortunately, when you use pre-processed languages like SASS and LESS, you do need to compile the code into CSS. That can be done in a variety of ways. LESS, for example can be downloaded as a Javascript file that can be added to the project, or as a command-line tool for either your local machine or your server. Sass installation is also a command-line install. They try to make things easier by letting you define which folders should get automatically processed, but I still wouldn’t describe it as a user friendly experience for your average designer (which is why most graphic designers who use CSS have never tried using LESS or Sass).

Thankfully, there are some compiler applications that take care of processing files for you, and update things visually. My favorite application for compiling pre-processed languages is CodeKit. It handles LESS and Sass really well, and it also lets you process Haml, CoffeeScript, and even JavaScript.

A screenshot of the CodeKit compiler.

The CodeKit compiler.

You can also have CodeKit ‘mini-fy’ all of your files, not just your CSS. That means that it can spit out a different version of your code without comments, tabs, or extra spaces, which will make your files a lot smaller (something I recommend that you be doing regularly anyway).

If you use frameworks like BootStrap or jQuery Mobile, you can import them into your projects through CodeKit from a central location. When a new version of jQuery comes out, you can simply replace one copy and all of your projects will auto-update with the latest copy.

On a PC or Linux machine, things are a bit less rosy. There is a nice LESS compiler called SimpLESS which helps, but it’s not as feature-full as CodeKit.

Get Started

There are many more things you can do with LESS and Sass. If you’ve been on the fence about them, I recommend you give them a shot. Starting simply with variables is easy enough if you are already familiar with CSS, and if you’re like me, you’ll find using variables will make your life immediately easier. Even if you’re into command-line tools, I recommend you take a look at something like CodeKit or SimpLESS.

Should I use LESS or Sass?

Both LESS and Sass are pretty good, especially if you’re just getting started. For me, LESS has a bit of an edge since I’m currently digging into Twitter’s Bootstrap Framework, which makes it a breeze to scaffold and build web sites quickly (it is written in LESS). Sass takes the cake if you’re working with Ruby on Rails projects since it was written in Ruby. Ultimately, which pre-processed language you choose doesn’t really matter since they’re both tools that will make you more efficient, and that’s always worth an investment in time. Pick one and wedge it into the workflow for your next project. It may take you a bit longer to finish, but it will also change the way you code for the better.

Interested in more? • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:CSS: Core ConceptsCSS FundamentalsCSS3 First LookManaging CSS in Dreamweaver

By Ray Villalobos | Saturday, May 19, 2012

Building your web development core skills, and adapting a cross-language approach

Mac Keyboard image.

One question I encounter a lot is whether it’s best for a developer to dabble in a lot of new technologies like SASS, Node, and Rails, or if it’s a better route to specialize in a smaller number of technologies to the point of perfection. Sometimes it feels like the vast number of front- and back-end technologies make it impossible to keep up. This feeling can be especially daunting when you’re looking for a job and it seems like potential employers only want to hire Web Sifus who, on top of having mastered both front-end and back-end technologies, also come with design, video editing, and page layout skills. (If you know that person, or if you’ve encountered a job description like this that only wants to hire Superman—comment below.)

Like all extremes, trying to learn too much, and focusing on too little, are both wrong approaches. Plain and simple, trying to keep up with every language and library is impossible. The goal is not to be miserable trying to learn everything, but to focus on your core and then cross train on skills rather than languages.

Building your Core

For a web developer, a good foundational group of skills to start with are: 1. Setting up and managing a server 2. Building a semantic page structure 3. Mastering page styles 4. Building interaction with the front end 5. Using databases to customize a visitor’s experience

It doesn’t matter whether you’re learning PHP, Python, Ruby, or any other  language you prefer. Learning that some problems are better solved by languages on the server and some on the client is essential. In the end, it’s more important to be proficient at solving problems than slightly more fluent in a specific development language.

After building on your core, it’s essential to make sure you approach projects with a cross-language attitude that stays focused on using the languages you’re comfortable with, and also learning to use different technologies when they make the most sense—not because you feel like you “have to.”

Cross-Language Cross-Training

Cross training in web development means that no one language is an island. You almost never use PHP by itself, or try to solve every problem on a page with JavaScript. Sometimes, the best solution is figuring out how you can combine languages together, and how to decide which language is right for the task at hand.

Recently while working on a Facebook application, I noticed that although there is an SDK (Software Development Kit) for PHP and JavaScript, trying to use just one SDK is silly. It’s better to use both since every language has strengths and weaknesses. For me, web development cross training means taking advantage of that balance and using the best tool for the job.

In the latest episode of View Source, I show you how to use HTML, PHP, and jQuery to upload images to a server and display them on a page as they are loaded. This is a good example of cross training, or, using a combination of skills to accomplish a task. In the video, I use HTML to allow people to upload files, then I use PHP to read the files uploaded to a directory, and jQuery to update the page as soon as a new photo is uploaded so the image uploader can see whether the upload was successful.

Remember, balance is critical to any job. Don’t spread yourself too thin, but also don’t limit your learning so you find yourself struggling with cross-language development. Build your core, then work on your cross-training. While this exercise routine won’t bring you any closer to having six-pack abs, it will make you a better problem solver, and a stronger developer, which will bring you two steps closer to landing your dream job.

Interested in more? • The full View Source weekly series on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:• Create an HTML5 Video Gallery with jQueryPHP with MySQL Essential TrainingDreamweaver CS5 with PHP and MySQL

By Ray Villalobos | Saturday, March 31, 2012

How to become a web developer: Tips for those with a print background

I meet a lot of people who come from a print background and are interested in learning new web skills. Learning to make that transition doesn’t have to be scary—I know because I was one of those people who learned about designing for print first and then moved on to the web. I went through my first few jobs working for commercial printers learning about paper, inks, imageSetters, imposition, trapping, film, and typography. When the web came around, I realized that it was the next big thing and I needed to learn as much as I could about it in order to survive in the long run. Eventually I managed to learn what I needed and move on to work on the web full-time.

The web can be scary, but learning new web skills doesn’t have to be hard. It’s like trying to eat an elephant…you have to do it one bite at a time. In this post I will share some of my learning experiences and offer some recommendations for those with a print background who are interesting in learning more about web development. I encourage you to share your print to web journey, and to ask questions, in the comments section below.

Overcome the experience deficit

Every job listing will ask for years of experience. Whether it’s two years or five-plus years, I’ll let you in on a secret—the years are not as important as your portfolio. If you come from the print field, you know what I mean. Generally people get hired based on what they’ve accomplished, not how long they’ve been doing it. I know because I landed my first online job with zero years of experience in the field, and I did it by building a portfolio of work that was equivalent to years of experience. Although I hadn’t worked in the industry, I had projects to show that I knew what I was doing. So, your first step in the print to web development migration is to start building websites as soon as possible.

Start by learning how to build sites with WordPress. It doesn’t require any development skills and it’s pretty easy. You’ll need to know how to set up WordPress and how to set up a server with your own domain name. For help with this, check out Managing Hosted Websites, a course that goes through the process of setting up a domain name and installing WordPress. Once you’ve installed WordPress and set up your server and domain name, it’s time to start building web sites. For this I recommend checking out WordPress Essential Training. Some entire businesses are based on building web sites with WordPress, so it’s a great first skill that will help you gain some of that critical experience everyone is looking for. Plus, it’s a marketable skill that you can use to build a portfolio of work right away.

In this clip from chapter one of the Managing Hosted Websites course, I discuss how to pick the right domain name before you choose your server, since your domain name decision will have an impact on how people arrive at your web site:

Just knowing how to install and work with WordPress is not enough, though. What people will really want to see is how well you can customize a WordPress web site. Go through WordPress: Creating and Editing Custom Themes to sharpen your WordPress customization skills, then dive into Create an Online Portfolio with WordPress (because after you’ve got a few sites under your belt, you’ll need to show off what you’ve done).

Build from your Strengths

Another thing I did when I got started was to focus on building from my strengths. I had a design portfolio, so I started learning software that would let me build on design skills. This was the late ’90s so I began by learning a program called GoLive, a website editor much like Dreamweaver.

I already knew how to use Photoshop, so I worked with those skills and focused on designing projects for the web first in Photoshop, and then transferring those skills to Adobe Fireworks, which is better for preparing online graphics. I knew about formats like EPS, PDF, and TIFF, so I learned about the online formats like GIF, JPEG and then PNG. The point is, when you get started plan to evolve your skills instead of trying to learn too much.

So, if you’re starting with a background in design, check out Designing Web Sites from Photoshop to DreamWeaver. This course will point you in the direction of a quick win and teach you how to build on your existing Photoshop knowledge. From there, move on to DreamWeaver with Dreamweaver CS5 Essential Training.

Find out what the market needs

Even when I was a new designer, I knew that development skills would be very valuable, but that learning development wouldn’t happen overnight. So right away I established learning development as one of my long term goals. I started with HTML since it was the easiest to learn. If you’re just getting into development, I recommend you start with HTML 5 Structure, Syntax and Semantics. It’s a thorough course that explains the basics of HTML. CSS wasn’t as critical to learn when I got started in the ’90s, but it is very today, so I would head in that direction after HTML. If you’re primarily a designer, then this should be an area of focus for you. Start with CSS Fundamentals, then move on to CSS Page Layouts, and plan to go through one new CSS course per month.

In this movie clip from chapter three of the CSS Fundamentals course, James Williamson asks the question “What is CSS3?” and walks you through the answer in detail:

Becoming awesome

Once you’re past the basics, your next skill should be JavaScript—this is a very hot skill. JavaScript is one of those topics that can be tougher to learn, but the better you get with JavaScript, the more sought after you’ll be. Start with JavaScript Essential Training and then move on tojQuery Essential Training. (jQuery is a javascript framework that helps you build interactivity into your projects easily and handling a lot of cross-platform issues.)

Once you’ve got those under your belt, move on to a server-side programming language. I recommend starting with PHP and then moving on to MySQL. Once you’ve spent some time with JavaScript, the same programming concepts apply to PHP and MySQL, so they will be easier to pick up. As you begin looking for development work, you’ll start to notice those two languages featured prominently in job descriptions. Remember, the stronger you are, the more you’re worth. When you’re ready, try out PHP with MySQL Essential Training.

Conclusion

Remember the elephant…one bite at a time. Don’t get overwhelmed with all the technology. Make yourself a plan and remember to be consistent with learning. Even if you watch only one movie a day or a few movies a week, you can make a dent in that virtual elephant and build enough experience before you know it. Using myself as a case study, I know you can do it. There weren’t any special skills I started with, I was a print designer just like you. If I can do it, I know you can. Just remember, even when it seems overwhelming…you can learn it!

By Ray Villalobos | Monday, February 27, 2012

Using the jQuery UI library with Google’s CDN

The jQuery library gets a lot of coverage online at lynda.com. It’s a great way to build cross-platform interactivity into your websites with a minimum amount of effort. But you might not be familiar with its cousin, the jQuery UI library, which allows you to add tough-to-code widgets to your websites with just a few lines of code.

The JQuery UI  library screenshot

There are widgets in the jQuery UI library for all kinds of useful functionalities like drag and drop, buttons, dialogs, and progress bars. In fact, The jQuery UI library is so big it’s not even included in the normal jQuery library, and it comes as part of a separate download. In this week’s View Source tutorial, I will take a peek into the jQuery UI library to show you how to create a Datepicker you can use on your online projects.

Using the library is pretty simple. Let’s say you have this basic form:

1
2
3
<formaction="#"><label>When <inputid="datepicker"type="text"name="date"/></label></form>

First, you’ll need a copy of both the jQuery library and the jQuery UI library. If you don’t have the libraries already, Google and others keep copies of popular libraries online, so you can use a copy from Google’s CDN (Content Delivery Network). When you use a popular CDN like Google’s, it means that if someone visits a different site that uses the same library before coming to your page, it will be cached by your browser and available quicker to your users, which makes your page operate faster. Here’s two lines that will load up the libraries via Google’s CDN.

1
2
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>

This usually goes in the <head> section of your HTML page. In WordPress, you can update the header.php template by going to your dashboard, finding the Appearance panel, and then selecting the Editor option.

Next, you’ll need to pick a style for the calendar pop-up. You can do this yourself by using the jQuery UI ThemeRoller, or by using jQuery UI’s library of predefined styles. Just go to the ThemeRoller page and choose the tab labeled Gallery.

Example of pre-built ThemeRoller jQuery themes

Once you pick the theme you want, you can download the theme to your desktop and install it, or you can simply link to Google’s copy of one of the themes from the Google CDN. Here’s the formula:

1
<linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/[JQueryUIVersion]/themes/[ThemeName]/jquery-ui.css"/>

So in our case, since we’re working with version 1.8.17 of the UI, and the pepper-grinder theme, so we’ll use:

1
<linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css"/>

The names of the other theme options are: base, black-tie, blitzer, cupertino, dark-hive, dot-luv, eggplant, excite-bike, flick, hot-sneaks, humanity, le-frog, mint-choc, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, swanky-purse, trontastic, ui-darkness, ui-lightness, and vader.

Now that our setup is done, all we need to do is type in our jQuery code that links the form field to the widget. You should put this before the closing </body> tag in your document. In WordPress, that would be in your footer.php file.

1
2
3
4
5
<script>
$(function(){
	$("#datepicker").datepicker({});});</script>

The jQuery code looks for a form element with the ID of Datepicker and adds the functionality to that field. Here’s a full listing of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><title>DatePicker Sample</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script><linkrel="stylesheet"href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/pepper-grinder/jquery-ui.css"/></head><body><formaction="#"><label>
		When
		<inputid="datepicker"type="text"name="date"/></label></form><script>
	$(function() {
		$( "#datepicker" ).datepicker({ });
	});
</script></body></html>

There are a lot of other options you can use, and when working offline you should definitely include a call to a local copy of the libraries. To find out how to do this and more, check out this week’s free View Source tutorial called Creating a Datepicker for your forms with jQuery on lynda.com. If you’re a lynda.com member and want to learn more about how to speed up your site with content delivery networks (CDNs), check out the member-exclusive video called Using a CDN to speed up your website.

Interested in more? • The full View Sourceseries • All developer courses on lynda.com • All web + interactive courses on lynda.com • All courses from Ray Villalobos on lynda.com

Suggested courses to watch next:Create an Interactive Video Gallery with jQueryCreate an Online Photo Gallery with jQuery and DreamweaverCreate an Interactive Map with jQuery and DreamweaverjQuery Essential TrainingSet a Marquee to Autoplay with jQuery and Dreamweaver

By James Williamson | Monday, July 12, 2010

HTML5 training: Taking a first look at HTML5

In all my years of teaching and writing about web design, I don’t think I’ve ever seen a topic explode in terms of interest level and passion as quickly as I have with HTML5. Despite the huge amount of interest in the topic, there is still a great deal of confusion about what HTML5 is and how to go about learning it. In my opinion, one of the best ways to approach HTML5 is by first comparing it to HTML 4 and learning the differences. That way, it’s easier to understand exactly what is changing in regards to HTML and cut through some of the hype and clutter that is currently surrounding the topic.

Although HTML5 represents an ambitious step forward in the evolution of HTML, it is largely a revised version of HTML 4. If you are comfortable writing HTML4, you should find yourself quite comfortable with the majority of the HTML5 specification. With that in mind, let’s take a closer look at the differences between HTML5 and HTML 4.

First, it’s important to note that the HTML5 specification is designed not just to replace HTML 4, but also the XHTML 1.0 and DOM Level 2 specifications. That means the serialization of HTML to XML and the DOM specification are now contained inside the HTML5 specification, instead of belonging to separate specs. It also contains detailed parsing rules that are designed to improve the interoperability of systems that use HTML documents. As such, the HTML5 Specification is much larger than HTML 4 and covers a lot more ground.

One of the first places you’ll notice a difference in writing HTML5 documents is in the doctype and character encoding. In the past, based on the version of HTML they were using authors have had to use long, arcane doctypes to trigger standards mode in modern browsers. You may recognize this code, for example:Now, rather than having to deal with multiple complex doctypes, you simply use a single doctype that declares the document as an HTML file. Since HTML is no longer SGML-based, no DTD is required. Character encoding is likewise simplified. All that is required now is a meta tag with a charset attribute. Here’s what the above code looks like in HTML5:

Much simpler!

There are, of course, new elements in HTML5 that are not part of HTML 4. These new elements assist with page structure and code semantics, allow embedded content, and include new phrasing tags that help add additional meaning to content within the page. By now, you’ve probably heard of new elements such as the section, article, and headervideo and audio

Forms undergo a dramatic update in HTML5 as well. Much of the work done on the Web Forms 2.0 specification has been added to the HTML5 spec. The result of this is new form controls and input types that allow you to create more powerful forms and more compelling user experiences. New form elements include date pickers, color pickers, and numeric steppers. The input element is now much more versatile, with new input types such as url, email, and search that will make it easier to control the presentation and behavior of form content both on the web and within mobile applications. It’s worth noting that HTML5 also adds support for the PUT and DELETE form methods, making it easier to submit data to a wider array of applications.

By far the addition to HTML5 that is getting the most attention is the introduction of several new API’s that are designed to make developing web applications easier across multiple devices and user agents. These APIs include the much talked about video and audio API, an API for building offline applications, an API for editing page content, one that controls Drag and Drop functionality, another that focuses on history, and one that controls Application protocols and media types. Other API’s like Geolocation, Web Sockets, and Web Messaging are associated with HTML5, but are defined within their own specifications.

Those are a few of the highlights of the differences between HTML5 and HTML 4, and should give you a good idea of how HTML5 will change the way that web sites and web applications are authored. Sign up for the lynda.com Online Training Library® New Releases announcement so you’ll know when my HTML5 tutorials are available.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.