Let's take a look at some new HTML5 capabilities
HTML5 has caused many ripples in the technology community over the past few years. There are a lot of different aspects of this that are still hazy, and a lot that change every day. That's one of the exciting things about the technology field, there's always something more to learn and there's always information that changes. In this article, we're going to take a beginner's look into the new HTML5 elements and what they're used for. In addition, we're going to inspect one of our old favorites, the <input> element. Some additional attributes and types are now available to use with this that you could have a lot of fun with.
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.
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.
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.
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.
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>
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.
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.
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.
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.
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.
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 />
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.
For those of you that need complete control over the style of your site, placeholder text can even be styled however you'd like.
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.