It’s important to regularly review and organize the structure of your HTML code to ensure that it remains maintainable and easy to understand. While many code editors provide a basic framework for an HTML page, relying solely on pre-written code can sometimes result in forgetting the absolute basics.
Therefore, it can be helpful to create a webpage from scratch from time to time to refresh your understanding of the HTML structure.
The code
Here’s a basic structure for an HTML page that you can use as a starting point for your projects. You can view the result by clicking the play button in the code-block.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=viewport-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<title>Page Title</title>
</head>
<body>
<header>
<h1>Header</h1>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Hello world!</h1>
<p>This is a basic html-page</p>
<p>It's linked to a stylesheet which, however, does not exist. </br>So if you want to style your page, create a new file and name it "styles.css"<p>
</article>
<aside>
<h3>Aside Heading</h3>
<p>Aside text goes here.</p>
</aside>
</main>
<footer>
<h2>Footer</h2>
<p>Copyright © Your Name</p>
</footer>
</body>
</html>This structure includes basic elements such as a page title, header, navigation, main content section, and footer and a feew more. Within the code above you will also find some important meta tags in the head section of the source file, see quick notes below for further explanation.
By becoming familiar with this structure and regularly reviewing your HTML code, you can help ensure that your code remains organized, maintainable, and compliant with current web standards.
Quick notes
General
- A basic HTML file consists of HTML elements, which are the building blocks of an HTML document.
- These elements include tags, attributes, and text.
- Tags are used to mark up the content of the document and to specify how the content should appear.
- Attributes provide additional information about the elements, such as specifying an element’s size or color.
- Text is the actual content of the document, and is usually displayed in the browser window.
- The code behind a basic HTML file is a series of instructions written in HTML and CSS that tell the browser how to display the content. (However, no CSS this time, but here you can take a look at a stylesheet example)
- This code is written in a markup language such as HTML (and CSS, but not yet), and is used to format and structure the content on the page.
Inside the head-Tag
- meta charset specifies the character encoding for the HTML document
- meta name is used to define the name of a specific metadata element for a web page. This name helps web browsers and search engines to understand what type of information a web page is offering
- meta content is used to provide additional information about a web page, supplementing the meta name tag. The content attribute in this tag provides a value for a specific metadata element specified in the name attribute
- The link rel=”stylesheet” tag is an HTML tag used to link an external CSS stylesheet to a web page
