Using an HTML Skeleton
ASkeleton 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 pocket, and use it for every job:
Example
<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>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
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:
An html start tag and an html end tag define the start and end of an HTML document.
The language is English:
</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.
The HTML standard requires a proper page title:
A meta viewport tag makes the page look good on all screen sizes (Laptop, Mobile):
The link tag links to a stylesheet:
Start tag and end tag surround future CSS styling:
</style>
The script tag links to a script:
Start tag and end tag surround the visible body of the HTML document:
</body>
Image tags define HTML images:
Make it a habit to "pack" HTML sections in div elements.
Prepare yourself for giving each section a class name:
</div>
Heading tags define HTML headings:
Paragraph tags define HTML paragraps:
<p>This is another paragraph.</p>
