DMCA.com Follow us on Facebook

HTML5 - Explained

By Tanya Simkin-Reva

Writing code in Source View


Many HTML editors (Dreamweaver, Visual Studio, Expression Web Studio and other) have two types of so-called "views" or "modes": "Design View" and "Source View". However, many designers avoid Source View, preferring the quasi-comfortable and demonstrative Design View which allows them to easily manipulate layout objects (boxes, headings, paragraphs and so on). In fact, it is not only an uncomfortable way of coding, it is a very restrictive and, ultimately, incorrect way of working on website code.

Modern well-designed, high quality websites and website templates, when opened in "Design View", commonly look odd, messy, or "crooked", especially if they are designed in pure CSS (tabless). They also usually lack things or are confusing. Designers who open such websites in "Design View" simply do not know how to cope with it. One of my customers once wrote to me a desperate letter complaining that he was not able to edit a website template in Dreamweaver's Design View because he had no idea how to deal with it. He wasted his money and lost any hope of having a beautiful website simply due to a lack of knowledge of working with code.

Let's take a look at the following 3 screenshots:

browser
Normal view (as seen in browser)
dreamweaver
Design Mode in Dreamweaver CS4
aptana
Source View in Aptana Studio - HTML editor

At first glance, working with code may seem off-putting for those who have no experience with working in Source View, especially for those who have avoided, as long as possible, the code itself. As a result, all that is achieved is wasted time. Gone is the hope to create something worthy, and self-confidence in design skills is lost. Working with code not only makes the designer's life easier and saves his or her time, but it gives full control over the situation to the designer which is the most important aspect. This control allows the designer to become an expert in his or her profession and presents a solid confidence in coping with any level of difficulty in the process of constructing a website.

With HTML5, coding skills become even more vital and obligatory for every designer. We start dealing with a new set of semantic (meaningful) tags and not just with uniformed, faceless divs applied for every html object. No 'Design View' anymore.

Recommended: Free open source html editor Aptana Studio.

This editor is FREE and offers an easy installation process and comfortable interface. It also detects your mistakes as you work, and it is available for both Windows and Mac.

I put "!Doctype HTML" and I am done? No, you are not!

I have noticed that many designers are claiming that their websites/templates are coded in HTML5. When, out of curiosity, I check the source code of a website, I often see that, in fact, nothing except a declaration of HTML5 Doctype is coded in HTML5.

Every website must have a Doctype declaration which, according to W3Schools is "... an instruction to the web browser about what version of HTML the page is written in". Literally, what version of html the page is written in. And those numerous websites I mentioned above were written in anything you can think of but HTML5. Here is an example of a website that claims to be "written in HTML5". In fact, nothing of the sort is true.

code
Claimed as HTML5

In order to claim our websites are written in HTML5, we must write them in HTML5. We cannot take just some T-shirt, sew on a label with "Pierre Cardin" printed on it, and then claim that T-shirt was designed and produced by Pierre Cardin. It simply would not be true. In much the same way, we cannot just declare !Doctype html and claim our website is written in HTML5. This, also, would not be true. To complete this task, we need to learn not only a set of new HTML5 tags, but we also need to understand very clearly what they are actually for. Therefore, we will proceed to the topic of semantics.

Semantics?

Semantics? We hear "semantic markup" here and there, but what exactly does this mysterious phrase mean? Let's start in simple terms; according to the first line of Wikipedia's entry on the subject, "Semantics is the study of meaning". Reading further, "Linguistic semantics is the study of meaning that is used to understand human expression through language". Html, css, js, php, and so on, are languages just like English, French or Hindi. Thus, interpreting the statement above in a simplistic way, we can say that the browser must understand the code. If code is written semantically (meaningfully), the browser will understand it and our formulas will be quickly turned into a correctly laid out set of images, texts, videos, buttons, etc.

There are many people who speak English poorly. Just an example: "hi every body i have design item (HTML Template) and upload after 15 days he said your item is hard rejected and no describe for what ?". Grammar, punctuation, lexis - everything is in disarray. Terrible writing aside, the sentence above is not completely meaningless. We can still manage to understand what the person is trying to convey, but it will take more time to understand because our brain must process all of the mistakes and misspellings. The process is not as fast as it could be, and we, as humans, will understand the sentence two or three seconds later. Those seconds would be saved if the phrase were expressed correctly. A browser, like a human brain, processes the information faster if that information is expressed without mistakes. Yes, we may be talking about milliseconds, but we are talking about wasted milliseconds. Imagine that you need to read not just one short sentence, but a long text that is written as poorly as the example above. How would you feel? This same reality is experienced by browsers and search engines. As a result, poorly coded websites are often ranked low. Google's crawlers will inevitably ignore such websites, and, frankly, these websites deserve such a status...

Set of HTML5 tags

So far, so good! In order to code correctly and semantically, we actually need to know what to write and how to write it. HTML5 came out with a set of new meaningful tags, and out of those the most frequent tags are "header", "footer", "nav", "article", "section", "aside", "group", "figure", "figcaption", "video" and "audio".

For a complete list of new HTML5 tags you may visit this article from W3Schools source. Today, instead of divs-twins, we can use tags which we humans (and browsers too!) understand in actual meaning of a tag. Audio means audio, nav means navigation, video means video–all of these tags are simple and easy to comprehend and remember. Previously, we used to wrap video files into a div entitled accordingly: div id="video" (well, this is at least the most logical name in this case). The browser would need to process the tag, its selector (id) and its value ("video"). Now, everything is simplified. The browser needs to only understand the tag itself, and, all in all, we as coders now have less work. Often though, we can still miss creating meaningful (logical, explanatory, recognizable, memorable–whatever you wish) names for id's and classes. For example, if we use one navigation (which is likely!), there is no need to give an id or class to the "nav" tag.

Let's take an example of how the coding for video and audio would look like:

Audio (default skin) - browser view

Audio (default skin) - code view

	
	

Note: You can see two audio files in the above code: an mp3 extension and a ogg/ogv extension. Various browsers support various audio formats, that is why you need to include both. To get ogg format you can download and use free Miro software available for Mac and Windows.

Small Tip: If you want to add sound to some element in your website (for example, apply sound to navigation, like it is done here - hover over navigation menu to hear a flip sound (please preview it in Chrome!) you can hide the player by removing a controls attribute from the code above.

Video (default skin)

Video (default skin) - code view

    
	

We can add Flash fallback for browsers which do not support HTML5:

    

We can add the parameter image ("poster") to the video and "autoplay" option:

    

We will need also to add a few lines of javascript to enable the HTML video player to play (see link below for overview).

You might want to read this overview to get more information about HTML5 video tag implementation and its market share.

Note: you can use same Miro software to convert video files to webm and ogv formats or Easy HTML5 converter software. Important: before you include "video" and "audio" HTML5 tags, ensure that your web host supports all these formats. Hosting companies like GoDaddy does not support in native way ogg format for example, special modifications are required.

Coding layout in HTML5

Now, we can start coding a layout in HTML5. As previously mentioned, some tags are easily indentifiable, so it is obviously understood that "nav" is for navigation, "footer" is for footer, "header" is for header and so on. However, there are two new tags which might be confusing in regards to applying them correctly and where to do so. These new tags are "section" and "aside". Many designers tend to think that "section" is a kind of stand-alone block or box separated from other blocks, like it was with div (which actually means "division"). According W3School, "The "div" tag defines a division or a section in an HTML document". Thus, the meaning of a "section" tag (since the same definition is used in the "div" tag description) may be confused and used incorrectly. Div stays div. It did not vanish! It works, it is necessary and cannot be abandoned. It should just be applied exactly where it needs to be. For example, when we need to divide certain blocks of content into certain sections or wrap some html object. "Section" tags serve another function as well. They must be used if we want to define a section within a block of content. One good (and even somehow notorious) example is Wikipedia. Wikipedia consists of articles. Articles consist of sections. Every section has a heading or a group of headings (hgroup). If we do not need to divide an article into sections, there is no sense in using the "section" tag.

Another tag is the "aside" tag. The definition of this tag is slightly confusing. To quote 3WSchools, "The aside content should be related to the surrounding content". From this we can gather that everything that is placed into the sidebar ("aside" tag) is related to surrounding it's main content. In a way, it could be seen as the following equation: main content + aside (sidebar) = website page, but no, it is not exactly so. A better explanation is given by HTML5 Doctor: "aside" is related to the content but does not need to be part of the article body as it can be understood without the extra information," and further, "It is easy to confuse this element for something it isn't, and as mentioned earlier the definition of "aside"can trip-up a few developers. The most common misconception of how this element should be used is for the standard sidebar. While there is usually a degree of relation between sidebar content and the content in an article, it is not enough to be considered fit for an "aside". Navigation, ads, search boxes, blogrolls and so on are not directly related to the article and therefore do not justify the use of an "aside". We shall practice "aside" tag further in order to understand clearly what is it's place in a webpage.

Enough theory. Let's do it!

We will code a standard (very simplified) layout strictly in HTML5. Let's begin. Firstly, declare a Doctype which in a HTML5 version is as simple as just "html".

!DOCTYPE html
html lang="en"

Next, we need to create a wrapping box which wraps all webpage content. For this purpose we use "div" tag.


We will insert a logo and navigation in the header area:


Logo goes here

We will add copyright information to the footer incorporating it into the "small" tag:


Logo goes here

© Company name 2012

Now, we will add the main content and a sidebar. Both boxes will be included into "div" tags, because they are just wrapping elements logically divided one from another. But before this we will apply another, general wrapping box (#middle) which will wrap both main-content and sidebar boxes. It will be useful for further positioning of elements on our webpage:


Logo goes here

© Company name 2012

Next, we can fill main-content box with various elements. Firstly, let's add an article. Our article will have a title and a subtitle, sections with titles, and a quotation related to the article's content. For the quotation we will use the"aside" tag.


Logo goes here

Article title goes here

Article subtitle goes here

Section title goes here

Cu mei labitur recusabo, vis augue verterem splendide cu. Per populo equidem fierent ne, sea id liber molestie, his verear urbanitas intellegebat te. Minim definitiones sed te. Antiopam intellegat democritum vel et. Legendos eleifend ea vel, est et volutpat persecuti, ne pro justo ponderum cotidieque. Debet doming putant eam at.

Section title goes here

Cu mei labitur recusabo, vis augue verterem splendide cu. Per populo equidem fierent ne, sea id liber molestie, his verear urbanitas intellegebat te. Minim definitiones sed te. Antiopam intellegat democritum vel et. Legendos eleifend ea vel, est et volutpat persecuti, ne pro justo ponderum cotidieque. Debet doming putant eam at.

© Company name 2012

Next, we can add more elements to main-content. Let's add a block with images. We will use "figure" and "figcaption" tags. Since the set of images is likely to be a list, we will conclude the pictures into unordered list.


Logo goes here

Article title goes here

Article subtitle goes here

Section title goes here

Cu mei labitur recusabo, vis augue verterem splendide cu. Per populo equidem fierent ne, sea id liber molestie, his verear urbanitas intellegebat te. Minim definitiones sed te. Antiopam intellegat democritum vel et. Legendos eleifend ea vel, est et volutpat persecuti, ne pro justo ponderum cotidieque. Debet doming putant eam at.

Section title goes here

Cu mei labitur recusabo, vis augue verterem splendide cu. Per populo equidem fierent ne, sea id liber molestie, his verear urbanitas intellegebat te. Minim definitiones sed te. Antiopam intellegat democritum vel et. Legendos eleifend ea vel, est et volutpat persecuti, ne pro justo ponderum cotidieque. Debet doming putant eam at.

  • image
    Image description goes here
  • image
    Image description goes here
  • image
    Image description goes here
© Company name 2012

Next, we can insert some content to a sidebar. Let's place video and audio elements here. Note: We will not only add a set of files in various formats, but a short JS script as well. We will place it at the very bottom of our layout, right before the closing "body" tag:


Logo goes here

Article title goes here

Article subtitle goes here

Section title goes here

Cu mei labitur recusabo, vis augue verterem splendide cu. Per populo equidem fierent ne, sea id liber molestie, his verear urbanitas intellegebat te. Minim definitiones sed te. Antiopam intellegat democritum vel et. Legendos eleifend ea vel, est et volutpat persecuti, ne pro justo ponderum cotidieque. Debet doming putant eam at.

Section title goes here

Cu mei labitur recusabo, vis augue verterem splendide cu. Per populo equidem fierent ne, sea id liber molestie, his verear urbanitas intellegebat te. Minim definitiones sed te. Antiopam intellegat democritum vel et. Legendos eleifend ea vel, est et volutpat persecuti, ne pro justo ponderum cotidieque. Debet doming putant eam at.

  • image
    Image description goes here
  • image
    Image description goes here
  • image
    Image description goes here
© Company name 2012

Note: in HTML5, we can omit script type and insert the script source in a simplified way:

script src="html5ext.js" script

Finally, we have finished writing a HTML5 markup of our simple layout. Here you can preview a slightly styled version of the HTML5 layout and if you wish you can download a zip-file of full source code (html, css and js).

Please note: Demo layout is structured in percentage and has fluid width.


Copyright © 2016 HTML5 Templates Dreamweaver.com