New HTML5 Elements

One of the most exciting parts of HTML5 is the semantic elements that will be used. These elements are meant to contain what their title implies, always. We'll take a look at some of these elements below.

<main>

The <main> element is a region of the page intended as a navigational landmark. According to the W3C, a landmark is a part of the page that the user may want to quickly access. Content in these sections is different from other parts of the page and are relevant to a specific user purpose, such as searching, navigation, etc. In the case of the <main> element, it is a landmark for the part of the page that contains its main content.

Some very important notes about the <main> element:

 * Unlike many of the new HTML5 elements, <main> may only be used once per page.
* This element may not be a descendant of the <article>, <aside>, <footer>, <header>, or <nav> elements.
* This element isn't to be used for sectioning content, so it won't affect the document outline in the way that other HTML5 elements do.
* It is my suggestion to use the <main> element between the <header> and <footer> elements, containing the main content of the page.

<header>

The <header> element is meant represent its containing ancestor's header information. For instance, the topmost <header> element on your site may contain your site's logo, your site's tagline, and other relevant information that explains your website.

In addition to the generic top of your site, you may use <header> inside of other elements on your site. For example, you may include an article's title, date published, author, and other relevant information to that article in its header.

<nav>

The <nav> element will hold blocks of navigational links on your site. Please note: every anchor on your page does not need to be enclosed in a <nav> element, it is only for traditional navigational elements. Your <nav> doesn't need to be separate from other elements on your page, and can be a child of the <header>, the <footer>, the <aside>, or any other element of your site.

<footer>

Like the <header> element, the <footer> element represents a footer for its containing ancestor. You can put any information you'd like in the footer, but it typically contains the author name, links to related pages, copyright, and other related information.

Like many of the new elements, the <footer> tag may be used as your entire site's footer, or the footer for individual articles and sections of your site in addition to a multitude of other uses.

So, using the previously discussed elements, we can lay out a general site like this:

 <body>
<header>
<nav id=”primary”></nav>
</header>
<main></main>
<footer>
<nav id=”secondary”></nav>
</footer>
</body>

<aside>

The <aside> element is meant to contain content that is related to the site itself, but does not need to relate to the content on the page. This element may represent the sidebar that exists alongside the content, an author's biography, advertisements, and other such information that isn't directly linked to the content of the page.

One important aspect that you will need to keep in mind about the <aside> element, is that it is not meant to represent a traditional aside in content. For instance, something within parenthesis (like this) or after a dash – this is not an aside.

<article>

The <article> element represents content that is intended to be independently reusable, syndicated, etc. Blog entries, comments, posts, and - of course - articles, are all good examples of what this element could contain.

You may also nest the <article> element. When you do this, the child <article> represents an item related to the parent <article>. For instance, your main article may contain comments that each have their own <article> element.

<section>

The <section> element dictates a section of your website, usually containing content. Typically, this is the element to use when you shouldn't use the <article> element. You should absolutely not use <section> as a general container, this is what <div> continues to be used for.

If you would like to think of a basic site with pages and blog posts, the <section> element would contain all of the pages' contents and each blog post would be kept in an <article> element instead of <section>.

Putting it together

Here is an example of laying out a site's framework with our new elements:

 <body>
<header>
<nav id=”primary”></nav>
</header>
<main>
<div id=”content_section”>
<section id=”page_content”></section>
<article id=”latest”>
<header><h1>Our Latest Blog</h1></header>
</article>
</div>
<aside id=”sidebar”>
<nav id=”blog_links”></nav>
</aside>
</main>
<footer>
<nav id=”secondary”></nav>
</footer>
</body>

HTML5 offers a wide variety of new toys to any front-end web designer. Here, we're going to take a look at some new attributes that apply specifically to the <input> element.

Input Types

In previous versions of HTML, the <input> element's types were very simple: “text”, “submit”, “checkbox”, “file”, etc. These types were perfectly fine for any simple form, or anything that would submit data that wouldn't be queried. As it stands, developers need the ability to query website data that has a specific layout in addition to working with data that has a particular syntax. Let's take a date input field for example. Like me, you've seen many web pages throw an error akin to, “Please submit a date with the following layout: dd/mm/yyyy!”

One of the great things about the advancements in HTML5 is the ability to choose the type of data you'd like to include on the form. Let's look at some of these types below.

date

The <input type=”date”> availability is going to be greatly useful for all web developers that need a date in a specific syntax. Instead of hooking in a JavaScript plugin that forces the date to appear in a machine-readable way, this will allow the browsers to display their own. This way, you still get the date in the format you want, and you don't have to spend extra time and energy forcing the date to be formatted the way you need.

There are many variations of the 'date' type that may be used. We can further define what type of date we'd like with values such as datetime, time, week, and month. This, of course, provides us with exactly the type of information we're seeking and submits it in a manner we can query.

email, url, tel

The values for these <input> types all correlate to the type of information we're requesting of a user visiting our site or filling out a form. Each of these inputs will apply a validation to the field in order to ensure that we are getting a properly formatted email, url, or telephone number. This takes a lot of the regular expression matching and validation out of the developer's hands, ensuring ease of use and immediate patches to avoid workarounds.

Additional new <input> attributes:

In addition to the helpful new input types, there are also new values that can be used. These values again go a step further in providing functionality and ease of use to web developers.

required

Simply put, if a field is required, you mark it as required. The easiest way to do this is:

 <input type=”number” name=”age” required />

pattern

This attribute can be used in order to declare a Regular Expression pattern to the validation of the form field it is attached to. If none of the new input types will help you validate this field's input properly, you may provide the browser with your own expression to validate against.

placeholder

Placeholder text is one of the most relieving advancements in HTML5 forms. Prior to this, a bit of JavaScript was needed to write text into a field when it had no value. With the placeholder attribute, you can now simply declare what you want your fields to say and let the browser take care of the rest.

For those of you that need complete control over the style of your site, placeholder text can even be styled however you'd like.

autofocus

As before, this was only achievable before with a bit of JavaScript to help us out. Now, this attribute can be set on a field that needs to have the focus as soon as the page loads.

Moving Forward

This is only the tip of the iceberg for both new elements and new attributes. I highly encourage you to play around with what you have and go out to find more. There is a wealth of knowledge out there, and it swells even more every day.