A How To Guide - Learning HTML Fundamentals (Beginners)

Building a basic static website using just HTML is one of the best ways to get started with web development. HTML, or HyperText Markup Language, forms the backbone of every web page on the internet, and mastering its fundamentals is key to understanding how websites function. A static website is a webpage that doesn’t require a server-side code or database. It’s easy to set up, fast to load, and perfect for small businesses, portfolios, or landing pages.

In this step-by-step guide, I’ll walk you through how to build a simple static webpage from scratch. You’ll learn how to structure your HTML, style it with CSS, and test it in your browser. By the end of this tutorial, you’ll have a functional landing page and the foundational skills to build more complex websites in the future.

Step 1: Installing Visual Studio Code

Before you can start building your website, you’ll need a code editor. A code editor is a software application that allows you to write, edit, and manage the code needed to build your website. One of the most popular and beginner-friendly code editors is Visual Studio Code (often abbreviated as VS Code). It’s free, open-source, and available for Windows, macOS, and Linux.

Follow these steps to install Visual Studio Code:

Step 1: Visit the official website at https://code.visualstudio.com/.
Step 2: Click on the download button based on your operating system (Windows, macOS, or Linux).
Step 3: Once the download completes, run the installer and follow the on-screen instructions.
Step 4: After installation, open VS Code, and you’re ready to start coding!

VS Code provides a wide range of features like syntax highlighting, code suggestions, integrated terminal, and extensions that make coding easier. It's an ideal tool for both beginners and advanced developers. Once you have VS Code set up, we can start building your first HTML file.

Step 2: Creating Your First HTML File

Now that you have Visual Studio Code installed, let’s create your first HTML file. An HTML file is simply a text document that contains your website’s structure. HTML files are saved with the .html extension.

Here’s how to create your first HTML file:

Step 1: Open Visual Studio Code.
Step 2: Click on File > New File.
Step 3: In the new file, write the following code:


<!DOCTYPE html> <!-- Declares the document as an HTML5 document -->
<html lang="en"> <!-- Specifies the language of the webpage -->
<head> <!-- Metadata and links to resources like stylesheets go inside the head -->
    <meta charset="UTF-8"> <!-- Sets the character encoding to UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Ensures responsive behavior on mobile devices -->
    <title>My First Webpage</title> <!-- Sets the title of the page that appears in the browser tab -->
</head>
<body> <!-- Body section where visible content on the webpage goes -->
    <h1>Hello, World!</h1> <!-- Main heading -->
    <p>This is my first HTML webpage!</p> <!-- Paragraph of text -->
</body>
</html>

This is the basic structure of any HTML document. Let’s break it down:

<!DOCTYPE html>: This tells the browser that the document is written in HTML5, which is the latest version of HTML.
<html> </html>: These tags wrap the entire content of the page. The opening <html> tag tells the browser that everything within it is HTML.
<head> </head>: The head section contains metadata (information about the document that isn’t displayed on the page). This includes the title, character encoding, and links to CSS files.
<meta charset="UTF-8">: This sets the character encoding to UTF-8, which includes nearly all characters from written languages.
<meta name="viewport">: This tag ensures that the page displays well on mobile devices by setting the page width to the device’s width.
<title> </title>: This sets the title of the webpage, which appears in the browser tab when someone visits your site.
<body> </body>: The body section contains the content that users will see on the webpage, such as text, images, and links.
<h1> </h1>: This is a heading tag, which we’ll discuss more in the next section. It represents the main heading of the webpage.
<p> </p>: This is a paragraph tag used to display blocks of text.

Once you've written this code, save the file by clicking on File > Save As, and name it index.html. Now, double-click the file from your file manager (or right-click and select Open with > Your Browser). This will open your HTML file in your default web browser, and you should see a webpage with "Hello, World!" as the heading and a paragraph below it.

Step 3: Understanding HTML Tags

Now that we’ve set up a basic HTML page, let’s dive deeper into the most common HTML tags. HTML tags are what you use to structure your content on the web. Every HTML element starts with an opening tag and ends with a closing tag (except for self-closing tags like <img> and <br>).

Headings

HTML provides six levels of headings, from <h1> to <h6>, with <h1> being the most important (usually used for titles) and <h6> being the least important. Headings help structure your content, making it easier for users and search engines to understand the hierarchy of information.


<h1>This is an H1 Heading</h1>
<h2>This is an H2 Heading</h2>
<h3>This is an H3 Heading</h3>
<h4>This is an H4 Heading</h4>
<h5>This is an H5 Heading</h5>
<h6>This is an H6 Heading</h6>

Headings are crucial for creating a readable and well-structured webpage. They not only make the content easier to digest for users but also help search engines determine the relevance of content. In general, the <h1> tag is used for the main title, while subsequent heading tags are used for subheadings.

Paragraphs

The <p> tag is used to define paragraphs in HTML. Text enclosed within the <p> tag will appear as a block of text, with space above and below it. This is how you write blocks of content that are logically grouped together.


<p>This is a paragraph of text. HTML paragraphs help organize content into readable sections.</p>
<p>Another paragraph of text goes here.</p>

Paragraphs should be used for blocks of text that belong together. Remember, using multiple paragraphs will improve the readability of your webpage by avoiding long walls of text.

Links

Links are what make the web a web. To create a link, use the <a> tag. The href attribute defines the destination URL, and the clickable text goes between the opening and closing <a> tags.


<a href="https://www.example.com">Click here to visit Example</a>

In this example, "Click here to visit Example" will be the clickable text, and when clicked, it will take you to www.example.com. Links are vital for navigating between pages on your site and other websites on the internet.

Images

To add images to your webpage, use the <img> tag. The src attribute specifies the image file’s path, and the alt attribute provides a text description of the image (useful for accessibility and when the image fails to load).


<img src="image.jpg" alt="A description of the image" width="300">

The <img> tag is a self-closing tag, meaning it doesn’t need a closing tag like </p> or </h1>. You can also adjust the image size using the width and height attributes.

Lists

HTML allows you to create both ordered and unordered lists. An unordered list is created with the <ul> tag, and each list item is wrapped in <li> tags.


<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

For ordered lists (lists with numbers), use the <ol> tag instead of <ul>.


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

Tables

Tables are used to display data in a tabular format. A table is created with the <table> tag, and each row is wrapped in <tr> (table row) tags. Inside each row, table data is wrapped in <td> tags, and table headers are wrapped in <th> tags.


<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Occupation</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
    <td>Developer</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>30</td>
    <td>Designer</td>
  </tr>
</table>

This will create a table with three rows, where the first row is the header row. Tables are useful for displaying data in an organized manner but should be used sparingly for layout purposes, as CSS is better suited for that.

Step 4: Structuring a Complete HTML Page

Now that we’ve covered the basic HTML tags, let’s put it all together by building a simple webpage that includes a header, navigation menu, hero section, features section, and footer.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Simple Webpage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- Header Section -->
  <header>
    <nav>
      <h1>My Business</h1>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#features">Features</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hero Section -->
  <section id="home" class="hero">
    <div class="hero-content">
      <h2>Welcome to My Business</h2>
      <p>We provide the best services to help your business grow.</p>
      <a href="#contact" class="cta-button">Get Started</a>
    </div>
  </section>

  <!-- Features Section -->
  <section id="features">
    <h2>Our Features</h2>
    <div class="features-container">
      <div class="feature">
        <h3>Feature 1</h3>
        <p>Quality service tailored to your needs.</p>
      </div>
      <div class="feature">
        <h3>Feature 2</h3>
        <p>Custom solutions for your goals.</p>
      </div>
      <div class="feature">
        <h3>Feature 3</h3>
        <p>Affordable pricing options.</p>
      </div>
    </div>
  </section>

  <!-- Footer Section -->
  <footer>
    <p>© 2024 My Business. All rights reserved.</p>
  </footer>

</body>
</html>

Conclusion

Congratulations! You’ve just built your first static webpage using HTML. Throughout this tutorial, we’ve covered the basics of HTML tags, how to structure your content, and how to create a complete webpage layout. You now have the foundational knowledge to start exploring more complex features like CSS for styling, and eventually, JavaScript for interactivity.

Remember, web development is all about practice. The more you experiment with HTML and build different pages, the better you’ll become. Keep coding and building, and soon, you’ll be able to create beautiful, functional websites from scratch.

← Back to Blog

Get Started Today

Get started now