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.
Every Web developer should have an HTML skeleton.
It shold 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=" ">
<script src=" "></script>
<body>
<img src="img_la.jpg" style="width:100%">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</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!
You have just edited your first web page.
Keep on reading!
HTML Skeleton Explained
The DOCTYPE must be present. It informs the browser that this is an HTML document:
<!DOCTYPE html>
A start tag defines the start of the HTML document. Language is English:
<html lang="en">
An end tag defines the end of the HTML document:
</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 screens (Laptop, Mobile):
<meta name="viewport" content="width=device-width, initial-scale=1">
A link tag can be used to link to a stylesheet:
<link rel="stylesheet" href="name">
Script tags are used to link to scripts:
<script src="name"></script>
A start tag end an end tag defines the visible body of the HTML document.
<body>
</body>
Image tags define HTML images:
<img src="img_la.jpg" style="width:100%">
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>
