Normally, there's an ad running in this spot, but you're using an ad blocker. To help support our blog, which provides free tutorials for everybody, we just ask that you whitelist or follow us on facebook, twitter, or subscribe using the form to the leftabove. Thank you!

    How to Build a Simple Website in Less Than 5 Minutes with HTML

    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.

    System requirements

    • 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.

    Source Files

    Download the complete working files by clicking here.

    A Website's Basic Components

    A website consists of 3 basic components:

    1. HTML
    2. CSS
    3. JavaScript

    Today, we'll only be focusing on HTML.


    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.

    Semantic Tags

    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>, <head> and <body>.

    <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?

    <!DOCTYPE>Tells the browser which version of HTML is being used
    <html>The topmost parent element
    <head>Contains what will be loaded before the page appears
    <title>Contains the page title that appears in the page tab in the browser
    <body>Contains what will be loaded after the page appears
    <h1>Stands for "header" 1. This is the largest header tag that is commonly used for titles of different sections.
    <h2>Stands for "header" 2. This is the second largest header tag that is commonly used for subtitles of different sections. Headers tags range from h1 to h6, with h6 being the smallest.
    <p>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:

    <hr> Horizontal line separator
    <ol> Ordered list (1,2,3...)
    <li> List item
    <ul> Unordered list (bullet points)
    <br> Line break
    <a> A link; a stands for "anchor".

    Go ahead and use the code window to experiment with a few more tags:

    <q> Quote
    <button> Button

    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.


    That concludes this tutorial. Now that you're comfortable with HTML, feel free to update the source files we downloaded at the beginning of this tutorial. Or better yet, try creating your own HTML files from scratch, and then double-click them to run them in your browser. In the future, we'll be learning about even more HTML tags, CSS, and JavaScript.

    Did you like this tutorial? Help us pay for server costs by following us on Facebook, Twitter, and subscribing below, where you'll get post notifications, training webinar invites, and free bundles.