Introducing HTML5

Introducing HTML5

HTML5 may be the future of web design, but it’s not yet a fully ratified language. It may therefore seem premature to embrace it, but HTML5 is already enjoying widespread adoption. The latest versions of the four most popular web browsers (Internet Explorer, Safari, Firefox and Chrome) already use HTML5, so it’s safe to use HTML5 tags on your website.

HTML5 introduces a number of new tags and makes several others obsolete. That doesn’t mean an earlier version, such as HTML4.01, won’t display properly in the latest web browsers, as they all have excellent backwards compatibility. However, you should swap obsolete tags for their HTML5 alternatives.

If you’ve already built a website, you should be familiar with using <div> to define a block on the page, which you can then style, up using CSS. This has been retained in HTML5, along with <span> (to pick out inline blocks for individual formatting) and joined by specific block types including <nav>, which is used to define a navigation element, such as a menu.

Many new tags help to define the content of a page rather than just position it within the flow. For example, <figure> ties an image to its caption, let ting you style the pair as a single block and to sub-style the contents- image and caption – individually inside it.

Even if you don’t intend to revisit existing sites and recede them using HTML5, you should stop using tags such as <frameset>, <frame> and <noframes> as they have been deprecated, along with <strike>, <u> and <font>. Most of HTML4.01’s tag structure remains in place, however, with HTML5 building on it.

Beyond creating a clear distinction between content and presentation, HTML5 introduces elements that simplify the integration of non-textual material. The <canvas> tag, for example, provides a container for scripts that draw graphical elements such as shapes and graphs; while <audio> lets you embed audio directly on a page. The <video> tag does the same for visual content, with optional attributes for auto playing, embedded controls, looping and a poster frame that displays before the video kicks in.

New tags such as <video> let you use media content natively without any need for plug-ins

The code below will embed a file called barcelona.mp4 in your page, with accompanying controls. The video window is 640 by 480 pixels, and the movie file will load at the same time as the page. We’ve also specified a poster frame (barcelona.jpg) to display in the video box like a thumbnail on a DVD menu. No plug-ins are required. The text displayed between the opening and closing <video> tags handles errors, and is displayed if the visitor doesn’t have a compatible browser:

<video src="barcelona . mp4" controls width="640" height="480" poster="barcelona.jpg" preload="preload">Sorry - no video for you. Please upgrade your browser. </video>

Add HTML5’s New Markup Tags

To demonstrate how easy HTML5 is to use; we’ll build a simple page, using HTML5-native tags where possible. This should render properly in the latest versions of Internet Explorer, Firefox, Chrome and Safari. We’ll then look at how CSS3 can style our on-page elements.

One benefit of HTML5 is evident in the new first line of every page: <!DOCTYPE HTML>. This is much simpler than its HTML4.01 equivalent. Following the head section, we’ll add the new <header> and <nav> tags:

<blockquote><!DOCTYPE HTML>
 <html>
 <head>
 <title>
 My first HTMLS page
 </title>
 </head>
 <body>
 <header>
 My first HTMLS web page
 </header>
 <nav>
 <ul>
 <li><a href="/">Home</a></li>
 <li><a href="about . php">About</a></li>
 <li><a href="email.php">Email</a></li>
 </ul>
 </nav></blockquote>

The <header> tag lets you address this section in CSS while also defining the content. Aggregators and search engines will understand its contents, and can use it in place of the page title in a list of search results. Likewise, <nav> defines a container for navigational elements. It doesn’t define the presentation of the navigation, so a properly linked menu should still be handled using CSS.

Because both these tags are semantic – defining content rather than formatting it – they can be used anywhere you like, several times on the page. You might want to use a <header> as a cross heading before each block of text, and another <nav> further down your page so visitors can jump to a subsection. You can therefore apply specific styles to each tag. We’ve done this with the <nav> tag, formatting it using a class within CSS called ‘topmenu’, to denote the menu that runs across the top of the page.

Add the Main Body

With the menu and header out of the way, we can start to write the main body of the page:

<blockquote><section>
 <h1>Welcome to HTMLS</h1>
 <section>
 <h2>What is HTML5?</h2>
 <p>Body content appears here</p>
 <aside>
 <h3>Obsolete tags</h3>
 <p>Related content appears here</p>
 </aside>
 </section>
 </section></blockquote>
<blockquote>

The <section> tags group together various elements on the page and define the start and end points of a discrete section. In our example, one overall section holds the body of our page, with smaller subsections to tie together the heading of each part (<h2>) and its body content (<p>). These are merely a semantic hint, letting readers see where one part begins and ends.

Our first subsection contains an <aside>. This semantic tag ties together a less important header and body content, and it might be styled to sit to the side of the main page flow. In HTML4.01, we could have achieved the same effect by drawing out a <div> and floating it to the left or right. However, it wouldn’t have been clear that this was related content when examining the underlying code. We can now close off our page with <footer> and <summary> tags:

<blockquote><footer>
 <section>
 <summary>Get in touch</summary>
 <p>Email us by clicking <a href="mailto : info@webduos.com">
 here</ a>.
 </section>
 </footer>
 </body>
 </html></blockquote>
<blockquote>

In HTML4.01, footers were usually defined within a named <div>. As with <header>, having <footer> is a timesaver, helping to make the code readable and keeping elements addressable by CSS. The use of <section> ties together a summary and a paragraph. The summary defines the content that follows. You can have as many summaries as you want on the page and style them together or, by directly addressing ‘footer section summary’ in CSS, target one specific instance.

Related Posts


7 thoughts on “Introducing HTML5

  1. SENuke X

    I feel this is among the so much important info for me. And i am glad reading your article. However wanna observation on some basic issues, The site taste is great, the articles is really excellent : D. Excellent process, cheers

    Reply
  2. Raquel Millerr

    hi!,I like your writing very much! share we communicate more about your post on AOL? I require a specialist on this area to solve my problem. May be that’s you! Looking forward to see you.

    Reply
  3. Gregg Akahi

    I simply want to say I am just newbie to blogging and site-building and really liked your website. More than likely I’m planning to bookmark your website . You absolutely come with outstanding article content. Cheers for revealing your web page.

    Reply
  4. Chin Dano

    Thanks a ton for this – love the info and agree with your perspective. However many others will not, so thanks for speaking up. Nice blog, well done!

    Reply
  5. tote bag article

    An awesome post, I just passed this onto a fellow worker who was doing a little analysis on this. And he in fact bought me lunch because I found it for him smile.. So let me reword that: Thanks for the treat! But yeah Thnkx for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more details? It is extremely helpful for me. Big thumb up for this post!

    Reply
  6. Free Porn Passes

    Hello there, I found your website via Google while looking for a similar subject, your website came up, it seems to be great. I have bookmarked to favourites|added to my bookmarks.

    Reply
  7. Free Porn Passes

    I beloved as much as you’ll receive carried out proper here. The sketch is tasteful, your authored material stylish. nevertheless, you command get bought an shakiness over that you would like be turning in the following. unwell indubitably come more earlier once more since precisely the same just about a lot frequently within case you shield this increase.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*