Using an HTML Skeleton
What is a Skeleton?
An HTML skeleton is the basic structure of a web page.
It gives you a simple starting point for building a website.
A Basic HTML Page
Start with this basic HTML skeleton:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="">
</head>
<body>
<img src="img_la.jpg" alt="Los Angeles" style="width:100%">
<main>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</main>
<script src=""></script>
</body>
</html>
Try changing the heading and paragraph text in the example.
HTML Skeleton Explained
The <!DOCTYPE html> declaration tells the browser that the document uses HTML:
<!DOCTYPE html>
The <html> element is the root element of the page.
The lang attribute describes the language of the page:
<html lang="en">
</html>
The <head> element contains information about the page that is not displayed as normal page content:
<head>
</head>
The charset declaration defines the character encoding:
<meta charset="UTF-8">
The viewport setting helps the page display correctly on phones, tablets, and computers:
<meta name="viewport" content="width=device-width, initial-scale=1">
The <title> element defines the page title shown in the browser tab:
<title>Page Title</title>
Adding CSS
The <link> element can connect the page to an external style sheet:
<link rel="stylesheet" href="styles.css">
In the next chapter, you will use a style sheet to add W3.CSS to the page.
The Page Content
The <body> element contains the visible content of the web page:
<body>
</body>
The <img> element displays an image:
<img src="img_la.jpg" alt="Los Angeles" style="width:100%">
HTML elements can be grouped into sections.
Use semantic elements such as <main>, <header>, <nav>, and <footer> when they describe the purpose of the content.
Use <div> when no semantic element is appropriate.
The <h1> element defines the main heading:
<h1>This is a Heading</h1>
The <p> element defines a paragraph:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Adding JavaScript
The <script> element can connect the page to an external JavaScript file:
<script src="script.js"></script>
In this simple skeleton, the script is placed near the end of the <body>.
JavaScript will be added later in this crash course when the page needs interactive behavior.
