Create Your First Web Page: A Beginner’s Guide to HTML

Welcome to the exciting world of web development! If you’ve ever wondered how websites are made, you’ve come to the right place. This guide will walk you through the fundamental steps of creating a simple web page using HTML (Hypertext Markup Language), the backbone of every website you see. No prior coding experience is necessary; we’ll break down each step into easy-to-understand instructions.

What is HTML?

HTML is not a programming language; it’s a markup language. Think of it as the structural blueprint for your web page. It uses tags to define elements like headings, paragraphs, images, links, and more. Browsers read these tags and display the content accordingly. Without HTML, web pages would just be plain text.

Setting Up Your Workspace

Before we start writing HTML, we need a few tools:

A Text Editor: You’ll need a place to write your HTML code. Popular options include:

Visual Studio Code (VS Code): A free, powerful, and highly recommended editor with many helpful features.
Sublime Text: Another excellent and popular choice.
Atom: A free, open-source editor from GitHub.
Notepad (Windows): A basic text editor, but not ideal for coding as it lacks features like syntax highlighting.
TextEdit (Mac): Similar to Notepad on Windows. Ensure you set the format to Plain Text (Format > Make Plain Text).

A Web Browser: You’ll need a web browser to view your web page. Any modern browser like Chrome, Firefox, Safari, or Edge will work.

For this tutorial, we will assume you are using VS Code because it is a common choice for beginners and offers powerful debugging and auto-completion features which are helpful in learning.

Creating Your First HTML File

Let’s begin by creating your first HTML file:

Open your text editor: Launch Visual Studio Code (or your chosen editor).
Create a new file: Go to File > New File (or use the keyboard shortcut Ctrl+N on Windows/Linux or Cmd+N on Mac).
Save the file: Go to File > Save As (or use the keyboard shortcut Ctrl+Shift+S on Windows/Linux or Cmd+Shift+S on Mac). Save the file with a descriptive name, such as index.html. Crucially, make sure to save it with the .html extension. This tells your computer and web browsers that it’s an HTML file. Choose a directory where you will keep all the files for your project. For ease of access, create a folder in your documents folder such as named “myfirstwebsite”. Save all the files for this project to this folder.

Basic HTML Structure

Every HTML document follows a basic structure. Let’s add the following code to your index.html file:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>

</body>
</html>

Let’s break down each part:

<!DOCTYPE html>: This declaration specifies the document type and tells the browser that it’s an HTML5 document. It should always be the first line of your HTML file.
<html lang="en">: This is the root element of your HTML document. The lang attribute specifies the language of the content. en means English. You can change it to other language codes such as fr for French or es for Spanish.
<head>: The <head> section contains meta-information about the HTML document. This information is not displayed on the page itself but is used by the browser and search engines.

<meta charset="UTF-8">: Specifies the character encoding for your page, ensuring proper display of a wide range of characters. UTF-8 is the most common and widely supported character encoding.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Configures the viewport for responsive design, which will be discussed in more advanced guides. For now it’s enough to add it in our HTML document.
<title>My First Web Page</title>: This sets the title of your web page which appears in the browser tab or window title bar. Feel free to change this to any name you want for your page.

<body>: The <body> section contains the content that will be displayed on your web page. This is where you will add all the text, images, videos, and other elements.

Notice that most tags are written in pairs: an opening tag such as <html> and a closing tag such as </html>. The closing tag is the same as the opening tag, except that it has a forward slash / before the name of the element. There are a few elements that do not have a closing tag, we will see them later on.

Adding Content to the Body

Now that we have our basic structure, let’s add some actual content to the <body> section.

Headings

HTML provides heading tags from <h1> to <h6>, with <h1> being the most important (largest) heading and <h6> being the least important (smallest). Let’s add a main heading to our page:


<body>
    <h1>Welcome to My First Web Page!</h1>
</body>

Add this code to the <body> of your index.html file and save it. Now open the file using your browser and you will see the text “Welcome to My First Web Page!” displayed in your browser.

Paragraphs

Paragraphs of text are added with the <p> tag:


<body>
    <h1>Welcome to My First Web Page!</h1>
    <p>This is my first paragraph. I'm learning HTML, and it's very exciting!</p>
    <p>I'm learning new skills and will soon start building awesome websites!</p>
</body>

Add these paragraph tags to the <body> section and reload your browser to see the output of these tags.

Links

Links allow users to navigate between different pages and websites. They are added using the <a> (anchor) tag, which contains the href (hypertext reference) attribute to specify the destination URL:


<body>
    <h1>Welcome to My First Web Page!</h1>
    <p>This is my first paragraph. I'm learning HTML, and it's very exciting!</p>
    <p>I'm learning new skills and will soon start building awesome websites!</p>
     <a href="https://www.google.com">Visit Google</a>
</body>

In the code above the href attribute specifies where the user will be taken once the link is clicked. The words “Visit Google” which are placed in between the opening tag and closing tag is what the user will see on the screen. You can change this to any other text such as “Click here to go to Google”.

Links can be absolute (pointing to an external website like in the example) or relative (pointing to other files within your project. For example, let’s say that you have created another file called about.html inside the same folder as index.html. Then, you can link these two pages by using the following code:


<a href="about.html">About Me</a>

Images

Images are added using the <img> tag. It has two important attributes:

src: Specifies the path to the image file.
alt: Provides alternative text for the image, which is displayed when the image cannot be loaded or by screen readers for accessibility.

Let’s suppose you have an image named my_image.jpg in the same folder as index.html. Then to display this image on the page, use the following code:


<img src="my_image.jpg" alt="Description of my image">

Alternatively, if your image is in a separate subfolder called images inside the same directory, you will need to use the following code:


<img src="images/my_image.jpg" alt="Description of my image">

Note that the image tag doesn’t have a closing tag. The alt attribute should be used to describe the image. This will be helpful for users with disabilities and if the image cannot be displayed for some reason.

Let’s add all of the elements to the body of our file:


<body>
    <h1>Welcome to My First Web Page!</h1>
    <p>This is my first paragraph. I'm learning HTML, and it's very exciting!</p>
    <p>I'm learning new skills and will soon start building awesome websites!</p>
     <a href="https://www.google.com">Visit Google</a>
     <br><br>
      <a href="about.html">About Me</a>
     <br><br>
     <img src="images/my_image.jpg" alt="A descriptive text about the image"> 
</body>

Note that we have added two <br> tags before the link to about.html. The <br> tag is used to create a line break. Similar to the <img> tag, it doesn’t have a closing tag. We’ve added it here in order to make the layout cleaner for easier viewing. Also note that the images should be in a folder named images which is located in the same folder as our index.html file.

Lists

HTML provides two types of lists:

Ordered lists (<ol>): Used for lists where order matters.
Unordered lists (<ul>): Used for lists where order does not matter.

List items are created using the <li> tag.

Ordered Lists

Here’s an example of an ordered list:


<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

This will display a numbered list.

Unordered Lists

Here’s an example of an unordered list:


<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
</ul>

This will display a bulleted list. Let’s add both types of lists into the <body> of our HTML document:


<body>
    <h1>Welcome to My First Web Page!</h1>
    <p>This is my first paragraph. I'm learning HTML, and it's very exciting!</p>
    <p>I'm learning new skills and will soon start building awesome websites!</p>
     <a href="https://www.google.com">Visit Google</a>
     <br><br>
      <a href="about.html">About Me</a>
     <br><br>
     <img src="images/my_image.jpg" alt="A descriptive text about the image"> 
     <br><br>
     <h2>My To-Do List</h2>
    <ol>
        <li>Learn HTML</li>
        <li>Learn CSS</li>
        <li>Build First Website</li>
    </ol>
    <h2>My Favourite Fruits</h2>
        <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Cherry</li>
    </ul>
</body>

Semantic HTML

Semantic HTML is about using HTML tags that convey the meaning and purpose of the content. Instead of only using generic tags like <div> and <span>, use tags that describe the role of the content. This makes your HTML more accessible to screen readers and search engines, improving SEO and user experience.

Here are some common semantic HTML5 elements:

<header>: Represents the header of a section or page, often contains headings, logos, navigation.
<nav>: Represents a navigation section of your page, usually containing links to other pages.
<main>: Represents the main content of the document.
<article>: Represents a self-contained piece of content, such as a blog post or news article.
<section>: Represents a thematic grouping of content within a page.
<aside>: Represents content that is related to the surrounding content, such as sidebars or ads.
<footer>: Represents the footer of a section or page, often contains copyright information or contact details.

Let’s modify our code to incorporate some semantic HTML:


<body>
    <header>
        <h1>Welcome to My First Web Page!</h1>
        <nav>
             <a href="#">Home</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>
     </header>   
   <main>    
    <article>
     <p>This is my first paragraph. I'm learning HTML, and it's very exciting!</p>
    <p>I'm learning new skills and will soon start building awesome websites!</p>
     <a href="https://www.google.com">Visit Google</a>
    <br><br>
     <img src="images/my_image.jpg" alt="A descriptive text about the image"> 
     </article>  
     <section>
        <h2>My To-Do List</h2>
         <ol>
            <li>Learn HTML</li>
            <li>Learn CSS</li>
            <li>Build First Website</li>
         </ol>
     </section> 
     <section>
        <h2>My Favourite Fruits</h2>
            <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Cherry</li>
            </ul>
      </section>
   </main>    
   <footer> <p> &copy; 2024 My First Web Page. All rights reserved. </p> </footer>   
</body>

In the above code, we wrapped the heading and navigation in a <header>. The main content is wrapped with the <main> element, within which there is an <article> element for the text and the image and two <section> for the lists. Finally, the <footer> includes copyright information. This structure gives more meaning to the structure of the page and makes it easier to understand by search engines, assistive technology and other developers. The © is an HTML entity which outputs the copyright symbol. We have added some sample navigation links in the header with the first link going to the “#” anchor, which represents the same page or top of page.

Viewing Your Web Page

Now that you’ve created your basic web page with HTML, it’s time to view it in a browser:

Save your index.html file.
Open your file: Locate the index.html file on your computer and double-click on it to open it with your default web browser. You can also right-click the file and select “Open with…” then choose a web browser.
View your page: You should now see your web page in the browser with all of the content that you have added.

Next Steps

Congratulations! You’ve created your first web page using HTML! While this is a simple page, it lays the foundation for more complex and interactive websites. Here are some next steps you can take:

Learn CSS: CSS (Cascading Style Sheets) is used to style your HTML elements and make your page visually appealing. With CSS you can define the layout, colors, and fonts of your page.
Learn JavaScript: JavaScript is used to add interactivity to your web page. With JavaScript you can create effects, process user input and dynamically update page contents.
Practice: The more you code, the better you’ll become. Try creating more web pages with different elements and contents.
Explore more HTML tags: There are many other HTML tags available. Explore HTML documentation and experiment with different tags.
Build a project: Take your new skills and build a website from scratch. This is the best way to improve your skills and learn how everything fits together.

Conclusion

Learning HTML is the first step in becoming a web developer. It provides the structure and foundation for any web page. By using different HTML tags we can structure our content and make them available on web browsers. We have learned how to use basic HTML tags to create paragraphs, headings, lists, images and links as well as semantic tags to structure the page. With further learning of HTML, CSS and JavaScript you can start building beautiful interactive websites for the world to see!

How to Do

Get clear, simple answers to all your questions. We resolve your doubts.

Create Your First Web Page: A Beginner’s Guide to HTML

Create Your First Web Page: A Beginner’s Guide to HTML

What is HTML?

Setting Up Your Workspace

Creating Your First HTML File

Basic HTML Structure

Adding Content to the Body

Headings

Paragraphs

Links

Images

Lists

Ordered Lists

Unordered Lists

Semantic HTML

Viewing Your Web Page

Next Steps

Conclusion