Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Using an HTML Skeleton

A Skeleton is the supporting framework of a living organism.

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

Encyclopedia Britannia

Every Web developer should have an HTML skeleton.

You should keep it in your his pocket, and use it 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! Now you know how to edit HTML.


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):

The HTML page is missing head tags. Head tags are not needed in HTML.

In HTML, everything before the body tag is considered a part of the head.

<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 surround 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 habit 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>

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.