Facebook Twitter Gplus LinkedIn RSS
Home HTML Header Tags

Header Tags

The most important part of the HTML5 setup for your main HTML page are the first two lines.  These necessary tags that you will need to start your page with are the following:

<!DOCTYPE html>
<html manifest="webapp.manifest">

The doctype appropriately sets the document type.  The second line regarding the manifest allows the browser to know where to point to look for the manifest file.  This will link to the manifest that you created earlier, and this tag also lets the browser know that this page also needs to be cached for offline usage.  This is the reason why you don’t have to put your main HTML page in the CACHE MANIFEST list, because this tag will tell your browser to download and cache it automatically!

The next few tags will help make your web app seem more like a native app to the user.  These need to be implemented in the header section of your HTML page.  I will first list all of them and then go into more detail after.

<head>

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-startup-image" href="startup.png" />

</head>

Don’t forget to include the usual other header tags, such as any links to stylesheets or javascript files, etc., and your title!  Now let’s go into each tag with more detail.

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>

This will modify the view of your web application on the iOS devices, not letting the user scale the content(which we are used to in Safari by using our fingers to zoom in and out), and will set the width to be the width of the device.  This will help us account for the different display sizes we have between iDevices.  The initial scale and maximum scale are also just extra parameters needed to help keep the app looking like a native app.

<meta name="apple-mobile-web-app-capable" content="yes" />

This line is pretty redundant, but tells the browser that we want this page to be an offline web app by making it web app capable.

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

This is one of those look type tags that will hide the status bar, so that the user doesn’t see the navigation bar and will help make the app look more “fullscreen”.

The next two tags are also “look” type tags that will affect the user experience of your web app.  We will go into more detail about these two tags in the next page of the guide.  For now, concentrate on the overall image.  A final markup of the main HTML page of an offline web app could look something like this:

<!DOCTYPE html>
<html manifest="webapp.manifest">

<head>

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<link rel="apple-touch-icon" href="icon.png" />
<link rel="apple-touch-startup-image" href="startup.png" />

<link rel="stylesheet" href="style.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">
<script type="text/javascript" src="webapp.js" />

<title>My Offline Web App</title>

</head>
<body>

<!-- Insert your content here -->

</body>
</html>

This should all be making sense now, right?  Let’s move on to the next page, where I’ll go into more detail on the last two tags regarding an icon and a startup image, and how that affects the look of your app.  Next ->

 

One Response

  1. Alazakaam-information found, problem solved, thanks!

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>