In this guide, we're going to learn the basics of HTML in order to make a simple website in less than 5 minutes. To keep things easy, our website won't require a web server to run. We only need a web browser like Chrome, Firefox, Safari, Internet Explorer, Microsoft Edge, etc.
Our website is going to consist of only the pages you see in the browser. We will not be setting up a database or writing any backend processes. And don't worry if you don't understand what any of that means. You won't need to for this article. We'll save all that for later.
- A 32-bit or 64-bit computer with at least 8GB of RAM. 16GB or more is recommended.
- At least 50GB of free disk space.
- A web browser.
Download the complete working files by clicking here.
A website consists of 3 basic components:
Today, we'll only be focusing on
HTML consists of the data (words, numbers, images, etc.) and the standard structure that is required for screen readers and search engines to read your pages. With just pure HTML, we can have a website up and running in the browser, so that will be our first step. We're going to create a basic website in less than 5 minutes.
Create a Simple HTML Website in Less Than 5 Minutes
Your first task will be to get familiar with HTML markup. Markup refers to the
<tags />, their attributes, and content. Before we explain tags in detail, take a look at the following example HTML code. Below that, is the code being rendered by the browser.
Edit the content between the open
<h1> tag and closing
</h1> tag, click the "UPDATE PREVIEW" button, and then notice how it affects the live preview below.
Feel free to experiment. You can hit the "RESET" button at any time to restore the original code.
All you need to know about our code, at this stage, is that it's made up of semantic (meaningful to the browser and search engines) tags like
<html> is the top most, parent element. Everything inside of it is a child. The indentation makes it easier for humans to see the nested structure between parent, child, and grandchild elements. We can nest as deep as we need to in order to structure all of the data.
What Do the Tags Mean?
|Tells the browser which version of HTML is being used|
|The topmost parent element||Contains what will be loaded before the page appears|
|Contains the page title that appears in the page tab in the browser|
|Contains what will be loaded after the page appears|
|Stands for "header" 1. This is the largest header tag that is commonly used for titles of different sections.|
|Stands for "header" 2. This is the second largest header tag that is commonly used for subtitles of different sections. Headers tags range from
|Stands for "paragraph".|
Next, we're going to learn about the
<image> tag. The next example contains an
<image> tag that points to the blog's logo.
We've also added list tags, a line break, and a link:
||Horizontal line separator||
||Ordered list (1,2,3...)|
||Unordered list (bullet points)|
Go ahead and use the code window to experiment with a few more tags:
Notice that we have not added any custom formatting to this page. All of the standard tags come with their own default formatting, which allows the text and images to be readable. This includes default fonts, sizes, colors, spacing, and indenting, among others. This formatting can be overwritten with CSS, but we'll cover that in another guide.