Hot File

Create A Minimal HTML Document (HTML5 Edition)

View: 8702    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: HTML-CSS template   Fields: Other

18 point/3 review File has been tested

Because all browsers (even old ones like IE6) fully support the shortcuts that are being standardized in HTML5, we can use them today; this is despite most new features of HTML5 remaining off-limits until the browsers catch up.

Introduction

Because all browsers (even old ones like IE6) fully support the shortcuts that are being standardized in HTML5, we can use them today; this is despite most new features of HTML5 remaining off-limits until the browsers catch up.

With those shortcuts in play, here’s the very minimum that an HTML document should now contain, assuming it has CSS and JavaScript linked to it:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
  </body>
</html>

Read on below for a full description of each line of this minimal document.

The Breakdown

Every HTML document should start with a <!DOCTYPE> declaration that tells the browser what version of HTML the document is written in. The <!DOCTYPE> required by HTML5 documents is much shorter than those that came before:

<!DOCTYPE html>

Like all these shortcuts, this code has been specifically designed to “fool” current browsers (that are yet to support HTML5) into treating the document as a full-blooded HTML4 document. Browser versions as far back as Internet Explorer 6 will render the page with their most standards-compliant rendering mode.

Next, we mark the start of the document with the opening <html> tag. This tag should should specify the primary language for the document’s content, with the lang attribute:

<html lang="en">

Next comes the <head> tag, which starts the document header:

  <head>

The first bit in the header should be a <meta> tag that specifies the character encoding of the page. Usually, the character encoding is declared by the web server that sends the page to the browser, but many servers are not configured to send this information. Specifying it here ensures the document is displayed correctly even when it’s loaded directly from disk, without consulting a server.

Once again, HTML5 significantly shortens this tag compared to its HTML4 equivalent, but, as before, this shortcut takes advantage of the existing error-handling behavior of all current browsers, so is safe to use today:

   <meta charset="utf-8">

With the encoding established, we can safely write the first piece of actual content in the page—the pagetitle:

    <title>title</title>

If you want to link a CSS file to the page to control its appearance (which you usually will), a <link> tag at this point will do the trick:

    <link rel="stylesheet" href="style.css">

The type="text/css" attribute that was required in HTML4 is now optional in HTML5, and all current browsers know what to do if you leave the attribute out.

If you want to link a JavaScript script to the page, and the script is designed to be invoked from the header, insert a <script> tag at this point. Unlike the <link> tag, the <script> must be paired with a full </script> closing tag:

  <script src="script.js"></script>

The type="text/javascript" attribute, once again, is now optional in HTML5, and all current browsers behave correctly when you leave it out.

That just about does it. You can end the header, then start the body of the page with a <body> tag. The content of the page is up to you, but since we’re talking about a minimal document, there need not be any body content at all:

 </head>
  <body>
    <!-- page content -->
  </body>
</html>

How’s that look to you? Any surprises?

If you’re like me, some of the shortcuts presented here make you feel a little uneasy at first blush. Is it really safe to use an HTML5 <!DOCTYPE> declaration when current browsers are yet to support most of HTML5?

Strange as it may seem to adopt code from an as-yet-unsupported specification, HTML5 was designed to be adopted in exactly this way. Shortcuts like those presented above are not features of a new standard, but a more efficient use of the HTML parsing features that have already been built into browsers for years.

Now that the W3C HTML Validator supports HTML5, it will validate documents that contain these shortcuts; there really is no reason to do it the long way anymore.

And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.

 

Create A Minimal HTML Document (HTML5 Edition)

Create A Minimal HTML Document (HTML5 Edition) Posted on 27-04-2016  Because all browsers (even old ones like IE6) fully support the shortcuts that are being standardized in HTML5, we can use them today; this is despite most new features of HTML5 remaining off-limits until the browsers catch up. 6/10 8702

Comment:

To comment you must be logged in members.

Files with category

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd