An HTML document is a text file with the *.html extension that contains structured markup code written in Hypertext Markup Language (HTML). HTML is the standard markup language used to create and design web pages. To understand the basic structure of an HTML document, please read “Getting Started With HTML: Understanding the Structure of an HTML Document“.
Now you will learn how to structure an extended HTML document.
The following template supports places for internal styles and scripts, the favicon, and meta tags used by social media platforms to display rich previews when your website is shared. A favicon is a small icon or image that is associated with a website and is typically displayed in the browser’s address bar, next to the website’s name in bookmarks or tabs, and in browser history lists.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Your website description goes here">
<meta name="keywords" content="keywords, separated, by, commas">
<meta name="author" content="Your Name">
<!-- Open Graph meta tags for Facebook -->
<meta property="og:title" content="Your Website Title">
<meta property="og:description" content="Your website description goes here">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<!-- Twitter Card meta tags for Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Website Title">
<meta name="twitter:description" content="Your website description goes here">
<meta name="twitter:image" content="https://example.com/image.jpg">
<!-- Googlebot-specific instructions: index the page, follow links,
allow snippets, and archive the page -->
<meta name="googlebot" content="index,follow,snippet,archive">
<!-- General instructions for all search engine robots: index the page and
follow links -->
<meta name="robots" content="index, follow">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- External CSS -->
<link rel="stylesheet" href="styles.css">
<!-- External JavaScript -->
<script src="script.js" defer></script>
<title>Your Title Here</title>
<!-- Internal CSS -->
<style>
/* Your CSS styles here */
</style>
</head>
<body>
<!-- The content -->
<header>
<h1>Welcome to Your Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section Title</h2>
<p>This is a paragraph.</p>
</section>
</main>
<footer>
<p>© 2024 Your Company</p>
</footer>
<!-- External JavaScript -->
<script>
// Internal JavaScript
console.log('This is an internal script.');
</script>
</body>
</html>By applying the styles below, you will make your first web page. Just create the styles.css text file in the same directory as index.html is located.
styles.css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
header {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}Your first web page.
