JavaScript is disabled! Please enable JavaScript in your web browser!

Freestyle Academy of Communication Arts & Technology

1299 Bryant Ave, Mt. View, CA 94040 T 650-940-4680   F 650-961-1346
2 Required Classes: English and Digital Media 3rd/Elective Class:  + Animation or Design or Film

Font Size




Back to list of all examples

Useful Stuff About:

Implementing HTML5 Support

With HTML5, there are some new tags and with them come problems with older browsers rendering the page similarly on all browsers. So there are lots of little tweaks needed. See notes below for each block. Copy the code below and replace the default code from Dreamweaver.

<!doctype html>
<html lang="en"><!--sets language as English-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as.
"IE=edge" tells Internet Explorer to use the highest mode available to that version of IE.
<title>CHANGE ME!!!!</title><!--IMPORTANT Adjust specifically for this project-->
<meta name="description" content="CHANGE ME!!!! Description of the page less than 150 characters">
<meta name="viewport" content="width=device-width, initial-scale=1"><!--IMPORTANT for responsive design-->

<link rel="icon" type="image/png" href="project#/images/favicon.png" ><!--You can create and display your own 32x32px favicon which is the tiny image icon used in the URL-->
<link rel="stylesheet" href=""><!--Normalizing a webpage essentially makes all browsers render the page consistently - lots of fixes for all the different browser issues-->
<link rel="stylesheet" href="project#/styles/p#-styles.css"><!--IMPORTANT Adjust specifically for this project-->
<link rel="stylesheet" href="project#/styles/p#-mobileStyles.css"><!--IMPORTANT Adjust specifically for this project-->

<!--All CSS MUST come before loading javascript files-->
<script src=""></script><!--See>
<script src=""></script><!--IMPORTANT Main jQuery library-->
<script src=""></script><!--Easing libraries-->
<script src=""></script>
<script src=""></script><!--See>

<script src="project#/scripts/p#-scripts.js"></script><!--IMPORTANT Adjust specifically for this project-->
<nav><!--IMPORTANT Adjust all buttons specifically for this project-->
    <div class="btn" id="btn">Button</div>
    <div class="btn" id="btn">Button</div>
    <div class="btn" id="btn">Button</div>
    <div class="btn" id="btn">Button</div>
    <div class="btn" id="btnProjects">Button</div>
<div id="allArticles">
    <div id="allArticlesWrapper">

        <section id="section">
            <article id="article">
                <p>Content goes here</p>

        <section id="section">
            <article id="article">
                <p>Content goes here</p>

    </div><!--end of allArticlesWrapper-->
</div><!--end of allArticles-->
<footer> </footer>