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