Download Files from Galleria for Your Website
How to Write Code in New HTML5
Create a Web Clip Icon for iPhones

Add the <head> Section in HTML5

The <head> section in an HTML page is at the very top and it provides the intelligence that helps the web browser interpret the content in the body section that follows it.

The <head> section contains the <title> and <meta> tags, CSS, and other elements that are not displayed in the browser. This is generally called meta information, or information about information, because it describes what kind of information is on the page.

When you’re done adding all the code in the <head> of an HTML5 page optimized for the iPhone and iPad (along with the doctype and <html> tags), your HTML Framework looks something like the one shown.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jelly Rancher - Specializing in Jellyfish Aquariums</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta description="Order custom jellyfish aquariums hand-crafted by oceanographer Mark Loos." /> 
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--iPad portrait →
<link href="css/ipadP.css" rel="stylesheet" media="only screen and (min-device-width:  768px) and (max-device-width: 1024px) and (orientation: portrait)">
 
<!--iPad landscape →
<link href="css/ipadL.css" rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)">
 
<!--iPhone portrait →
<link href="css/iphoneP.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait)">
 
<!--iPhone landscape →
<link href="css/iphoneL.css" rel="stylesheet" media="only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)">
</head>
blog comments powered by Disqus
Make Rounded Corners with CSS 3
About HTML5 Tags
Send the Right CSS to Target the iPhone
Insert Images into Page Designs for iPhone
Create a Semantic Structure for Web Pages
Advertisement

Inside Dummies.com