Defining HTML5

Are you ever curious about how websites are built and how they work? Right now you’re looking at this page which was built using HTML. HTML stands for HyperText Markup Language and is a markup language for structuring and presenting content for the World Wide Web.

CSS is a style sheet language used to build the presentation of a document written in a markup language, such as HTML. For example - this page has been developed using CSS which controls the HTML5 in order to present the specified design to users.

A Brief History Of HTML

The World Wide Web came about in 1989 and was released for public use in 1994. During the initial stages of development of the WWW HTML wasn’t in use. Its use came about in 1991 and has continued to develop and expand with the WWW helped with great investment by Tim Berners-Lee. The team at W3C have continued to expand using a variety of HTML versions. It’s interesting to see how it has evolved into a strong web language.

HTML5 tag elements

I have picked at random the following HTML5 tag elements from W3C in order to explain them a bit more.

The section element

The section element is used for grouping together related content. It sounds a lot like the div element, which is often used in relation to content container.

The header element

The header element is used when introducing a website or navigation bar at the top of a website.

The footer element

This is quite similar to the header element, but will always be shown at the bottom of the website. However the footer element should show the information elements that it contains, e.g. who produced the website, links related to content, copyright and so on.

The nav element

You may know what this is for - very common and you see it nearly everywhere. All sites should have a nav element - if not, it’s very bad practice to omit this.

The nav element does exactly what you think it should do: it contains navigation information, usually a list of links, e.g. the nav element is intended for major navigation information.

The aside element

Again this is quite similar to the header and footer elements and is about gathering content into a container. This concept would apply to a sidebar. Also, the aside element doesn’t refer to position, just because some content appears on the right or left of the main content isn’t reason enough to use the aside element. It’s the content that matters, not the position.

The article element

The article element defines a self-contained piece of content within a document. It is commonly used to identify blog posts and news articles within search engines. Also it is handy to include contents such as written items, videos and images. It is really beneficial for search engines in understanding clearly what’s going on within the article elements.

Do HTML5 tag elements apply to all browsers and are they fully supported?

Not many of the modern browsers fully support HTML5. Some browsers just don’t support this fully while some browser do support without exception. Hence the reason I have already discussed and highlighted the importance of upgrading your browser to the latest version available in a previous blog post.

This website is really super handy (www.caniuse.com) for developers in finding out what HTML5 tag elements are supported and by what browsers. For example I have picked out a topic under the HTML5 section - “accept attribute for file input”. The screenshot contains a variety of browsers that support input elements under HTML5. Also, to explain the issue of why it is not possible to develop - I think it’s super handy and you can avoid a headache while trying to figure out what the issue was during the development phase.

#

Does HTML5 help with SEO?

Certainly. Search Engines Optimisation (SEO) love HTML because it is specifically designed for structured, semantic content. A few basic HTML5 capabilities as mentioned above can bring your SEO to the next level. Search engines will be able to recognise the HTML5 structure via the HTML5 tag elements.

It is vital for HTML5 to be set up using the correct structure as this allows Search engines to understand the HTML’s structure and will be able to track and index the HTML with no complications.

Are Smartphones and Tablets fully supported by HTML5 Form Elements?

An area that I am going to discuss is the input of elements which are being greatly expanded in HTML5. I have created a form - a contact form. See the embed below. I have added value type for the inputs such as your name, your email address and telephone number.

The fields above are expected to behave in a similar way when inputting text as you’re filling in the form via your browser on the desktop version.

How about smartphones and tablets? Apple and Google say that HTML5 is fully supported by Google Chrome on Android and Safari on iOS for smartphones and tablets. In actual fact the inputs behave differently when you’re filling in the form via smartphones or tablets.

When you start interacting with the form via your browser on your smartphone you will definitely see the difference when filling in the form with a variety of input types for each form, e.g. first name, email address and telephone. The browser picks up differences when detecting the type of inputs being used when viewing the page. The keyboards on the smartphones will automatically change when detecting inputs such as type=”text”, type=”email” and type=”tel”. Have a look at the screenshots and a closer look at the keyboard from 1st to last - can you see the difference?

This is an example of some of our recent work for Irish Water using mobile forms.

#

Smartphone Google Chrome for iOS via an iPhone 6 contain different on-screen keyboards depending on the value of the attribute type.

How do you check if a website is HTML5?

Are you curious about finding out if a website is up to date with the latest technologies? If you move your mouse to the web page that you have landed on - then right click. Move to tab called “View the page source” - it may vary depending on the browser configuration but the same idea applies. You should see something like this:

HTML5 doctype

The HTML5 doctype will be on the first line of the web page.

HTML 4.01 doctype

The HTML 4.01 doctype will be displayed on the first line of the web page.

If you’re viewing the page using HTML4 this would indicate that the website needs an upgrade!

Conclusion

I hope after reading this that you have grasped a basic of knowledge of HTML. Also, if you wish to increase your knowledge further there are great online tutorials at Treehouse and Lynda.com. Sign up for a trial and check them out - they are super! Also, they provide accessible videos with captions, a big plus.

It is important to ensure that your website is kept up to date with latest developments in order to ensure a better user experience regarding all devices including desktops, tablets and smartphones. Do remember that Webfactory are here to help! If you have any questions or are looking for a website upgrade - get in touch at hello@webfactory.ie.

Image

Ronan Lowry

Web Developer

The author

Ronan is a Web Developer at Webfactory, with over 10 years working within the digital media industry. Ronan has an interest in all areas of digital matters including a variety of threads on web design/development and digital marketing.

Share if you like this