Computers & ProgrammingHTML5Web Development

What’s New in HTML5

The Internet has changed quite a bit since the last HTML standard more than a decade ago. Some of the HTML 4.01 elements are now obsolete. These elements have been removed or re-written in HTML5.

Aside from deprecated elements, HTML5 brings a lot of new features to the HTML specification. Fortunately, there is already some limited browser support for these new features. Let’s take a look at some of these changes in more detail.

Basic Structure for an HTML5 Page

An HTML5 page is similar to most HTML pages. However, there are some key areas that have been simplified.

Implementing the structure of an HTML5 page can now be easily done from memory rather than looking back at a reference document to ensure that you have included all of the necessary components to get the page working across all browsers.

Here is the minimum number of elements and their attributes that you should use in any HTML5 document.




    
        
        Example document
        
        
    
    
        

Example paragraph

One of the nicest things about HTML5 is the fact that web developers can stop worrying about the long Doctype. An HTML5 page structure is very easy it is to implement. You start with declaring the HTML5 doctype.

While this declaration is not required for HTML5, it is needed so that browsers will switch the content into “standard” mode. Omitting the doctype or having anything before it, even a blank line, will result in the browser invoking “Quirks” mode, which should be avoided. The declaration can be in all caps, or all lowercase, or a mix of both.


Just as with the doctype, the next nicest thing to note is the easier to remember html tag. While there is no official language default in HTML5, you should always specify a language explicitly.

Within the head element, you include your meta tags. Although it is not technically required to define the character set, failing to do so can open your app to cross-site scripting attacks in older Internet Explorer versions.

Fortunately, including this meta tag is simple. is the equivalent to

The remainder of the elements shown in our examples are pretty much the same as you would find in pre-HTML5 documents. You may have noticed that the type attribute is not included with the link or the script element.

You can include them if you wish, but even older browsers will use text/css as the default type for style sheets and text/javascript as the default type for scripts.

Removed Elements

The following HTML 4.01 elements are removed from HTML5:

ElementDescription
Defines an acronym
Defines an embedded applet
Sets a default color, size, or font for the text in a doc
Defines big text
Defines centered text
Defines a directory list
Defines font, color, and size for text
Defines a frame in a frameset
Defines a set of frames
Adds a search field
Defines an alternate content for users that do not support frames
Defines strikethrough text
Defines teletype text

New Page Structure Elements

HTML5 recognizes that web pages have a structure. In general, many web pages have navigation, body content, sidebar content, headers, footers, and other features. These new elements are semantic in nature.

For example, this approach gives meaning to certain common elements as opposed to creating a generic

element and adding style to use it to implement a component such as a header, or navigation bar.

ElementDescription
Defines an article
Defines content aside from the page content
Isolates a part of the text that might be formatted in a different direction
Defines a command button that a user can invoke
Defines additional details that the user can view or hide
Defines a visible heading for a
element
Specifies content such as an illustration or diagram
Defines a caption for a
element
Defines a footer for a document
Defines a header for a document
Groups a set of header elements (

to
)
Defines navigation links
Defines a section in a document
Defines a possible line-break

New Inline Elements

These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:

ElementDescription
Defines marked or highlighted text
Defines a measurement within a known range
Represents the progress of a task
Defines a date and/or time

New Media Elements

HTML5 provides for new elements related to media.

ElementDescription
Defines sound content
Used to draw graphics via scripting
Defines a container for an external application or plug-in
Defines multiple media resources for and
Defines text tracks for and
Defines a video

These are not the only items that have been introduced with HTML5, there are other elements as well as attributes.

Leave a Comment

Your email address will not be published.

Scroll to Top