THE WORLD'S LARGEST WEB DEVELOPER SITE

Using an HTML Skeleton

A Skeleton is the supporting framework of an organism.

It is typically made out of something hard, to protect a more vulnerable body.

Encyclopedia

Every Web developer should have an HTML skeleton.

It should be kept in his pocket, and used for every job:

Example

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<style>
</style>
<script src=""></script>
<body>

<img src="img_la.jpg" alt="LA" style="width:100%">

<div class="">
 <h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
 <p>This is another paragraph.</p>
</div>

</body>
</html>

Try it Yourself ยป

Click on the "Try it Yourself" button to see how it works!

Try to change the text "This is a Heading" to "This is my Wedding".

Did you make it?

Congratulations!


HTML Skeleton Explained

The DOCTYPE must be present. It informs the browser that this is an HTML document:

<!DOCTYPE html>

An html start tag and an html end tag define the start and end of an HTML document.

The language is English:

<html lang="en">

</html>

A meta charset tag defines the character set (UTF-8):

<meta charset="UTF-8">

The HTML standard requires a proper page title:

<title>Page Title</title>

A meta viewport tag makes the page look good on all screen sizes (Laptop, Mobile):

<meta name="viewport" content="width=device-width,initial-scale=1">

The link tag links to a stylesheet:

<link rel="stylesheet" href="name">

Start tag and end tag surround future CSS styling:

<style>
</style>

The script tag links to a script:

<script src="name"></script>

Start tag and end tag sourround the visible body of the HTML document:

<body>
</body>

Image tags define HTML images:

<img src="img_la.jpg" alt="LA" style="width:100%">

Make it a habbit to "pack" HTML sections in div elements.

Prepare yourself for giving each section a class name:

<div class="class name">
</div>

Heading tags define HTML headings:

<h1>This is a Heading</h1>

Paragraph tags define HTML paragraps:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>