5 Replies - 6454 Views - Last Post: 14 April 2015 - 11:21 AM

#1 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6339
  • View blog
  • Posts: 25,562
  • Joined: 12-December 12

HTML5 Templates/ Document Outlines

Posted 16 December 2014 - 10:20 AM

The bare minimum, in my opinion:
<!DOCTYPE html>
<html>
<head>
    <title>Some Title</title>
</head>
<body>
<!-- document content here -->
</body>
</html>


Spoiler

With lang and meta tags:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>The HTML5 Herald</title>
    <meta name="description" content="html template">
    <meta name="author" content="Andrew">
</head>
<body>
<!-- document content here -->
</body>
</html>


With internal stylesheet:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>The HTML5 Herald</title>
    <meta name="description" content="html template">
    <meta name="author" content="Andrew">

    <style type="text/css">
    /* css rules here */
    </style>
</head>
<body>
<!-- document content here -->
</body>
</html>


With external stylesheet:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>The HTML5 Herald</title>
    <meta name="description" content="html templates">
    <meta name="author" content="Andrew">

    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- document content here -->
</body>
</html>


With Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>The HTML5 Herald</title>
    <meta name="description" content="html template">
    <meta name="author" content="Andrew">

    <link rel="stylesheet" href="css/styles.css">
    <script src="js/script.js"></script>
    <!-- this would be for a library, either your own 
        or perhaps jQuery, etc.
        The script(s) cannot refer to content on the page
        as there is no content yet. -->
</head>
<body>
<!-- document content here -->

<script>
// just before the closing body-tag..
// ..any code that refers to elements 
// on the page
</script>
</body>
</html>


It is not essential to load scripts in the head, they could also be loaded at the bottom of the page, before the closing body-tag.

The following link is from 2011, but still useful and relevant.

A Basic HTML5 Template

Is This A Good Question/Topic? 2
  • +

Replies To: HTML5 Templates/ Document Outlines

#2 laytonsdad  Icon User is offline

  • Let it rip!
  • member icon

Reputation: 466
  • View blog
  • Posts: 1,991
  • Joined: 30-April 10

Re: HTML5 Templates/ Document Outlines

Posted 20 December 2014 - 01:49 PM

Thank you andrewsw,
This will come in handy for those that have some wonky HTML layouts. I will be using this link instead of typing it out.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6339
  • View blog
  • Posts: 25,562
  • Joined: 12-December 12

Re: HTML5 Templates/ Document Outlines

Posted 20 December 2014 - 06:03 PM

Thank you ;)

Of course, in many editors these can be set up as templates or, for example, snippets in Sublime Text:
<snippet>
	<content><![CDATA[<!DOCTYPE html>
<html>
<head>
	<title>$1</title>
</head>
<body>
$0
</body>
</html>]]></content>
	<tabTrigger>html</tabTrigger>
	<scope>text.html</scope>
</snippet>

This post has been edited by andrewsw: 20 December 2014 - 06:03 PM

Was This Post Helpful? 2
  • +
  • -

#4 boomer1204  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 18-April 12

Re: HTML5 Templates/ Document Outlines

Posted 14 April 2015 - 11:05 AM

Andrewsw,

I love the snippet feature in Sublime. What are the $0 and $1 you have in your snippet. What do those do??

Thanks,
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • lashings of ginger beer
  • member icon

Reputation: 6339
  • View blog
  • Posts: 25,562
  • Joined: 12-December 12

Re: HTML5 Templates/ Document Outlines

Posted 14 April 2015 - 11:11 AM

They are field markers. When you insert the snippet the cursor will be at position $1, you can then type and press Tab to move to $2, etc.. $0 marks the exit point, so you will move to $1, $2, .., $0.

Without $0 the exit point is at the end of the snippet.

This post has been edited by andrewsw: 14 April 2015 - 11:12 AM

Was This Post Helpful? 1
  • +
  • -

#6 boomer1204  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 18-April 12

Re: HTML5 Templates/ Document Outlines

Posted 14 April 2015 - 11:21 AM

View Postandrewsw, on 14 April 2015 - 11:11 AM, said:

They are field markers. When you insert the snippet the cursor will be at position $1, you can then type and press Tab to move to $2, etc.. $0 marks the exit point, so you will move to $1, $2, .., $0.

Without $0 the exit point is at the end of the snippet.


I was always curious about that. That is super useful too!!

Thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1