×

HTML Basics Reference Guide for Beginners

Welcome to this beginner-friendly guide on the basics of HTML (HyperText Markup Language)! This guide will walk you through the fundamental concepts of HTML, including elements, attributes, headings, paragraphs, links, images, lists, tables, forms, and semantic elements. Each section includes explanations and interactive examples where you can see both the code and the resulting output.

Table of Contents

  1. Introduction to HTML
  2. Basic HTML Structure
  3. Headings and Paragraphs
  4. Links and Images
  5. Lists
  6. Tables
  7. Forms
  8. Semantic Elements

1. Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages. HTML describes the structure of a webpage using a series of elements represented by tags.

2. Basic HTML Structure

An HTML document has a defined structure that includes a doctype declaration, <html>, <head>, and <body> tags.

Example

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

3. Headings and Paragraphs

Headings are defined with <h1> to <h6> tags, where <h1> is the highest level. Paragraphs are defined with the <p> tag.

Example

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<p>This is a paragraph of text that provides information.</p>

Links are created using the <a> tag, and images are embedded with the <img> tag.

Links

The <a> tag defines a hyperlink that can link to internal files or external URLs. You can use the href attribute to specify the destination of the link.

Linking to URLs

To link to an external URL (such as another website), you simply provide the URL in the href attribute.

Example

<a href="https://www.example.com" target="_blank">Visit Example.com</a>

In this example:

  • href="https://www.example.com" is the URL you are linking to.
  • target="_blank" opens the link in a new tab.

Linking to Files in Your Workspace

You can also link to internal files (such as other HTML files in your project) by specifying the file name in the href attribute. Make sure the file exists in your workspace.

Example

<a href="page2.html">Go to Page 2</a>

In this example, clicking the link will take the user to page2.html, assuming that the file exists in the workspace.

Images

The <img> tag embeds an image into the page. It uses the src attribute to specify the image URL and the alt attribute for alternative text.

Example

<img src="/wp-content/uploads/2023/04/construction.png" alt="Logic Blocks">

In this example:

  • src="/wp-content/uploads/2023/04/construction.png" specifies the image file location.
  • alt="Logic Blocks" provides alternative text for the image if it can't be displayed.

Images can also be linked, like so:

<a href="https://www.example.com">
    <img src="https://www.example.com/image.jpg" alt="Example Image">
</a>

This will make the image a clickable link to https://www.example.com.

5. Lists

HTML supports ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>).

Unordered List

Example

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

Ordered List

Example

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

6. Tables

Tables are created using the <table> tag, along with <tr> for table rows, <th> for header cells, and <td> for data cells.

Example

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>

7. Forms

Forms allow users to input data. The <form> element contains form elements like input fields, checkboxes, radio buttons, and submit buttons.

Example

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
</form>

8. Semantic Elements

Semantic elements provide meaning to the HTML structure, making it easier for browsers and search engines to understand the content.

Examples of Semantic Elements

  • <header> - Defines a header for a document or section
  • <nav> - Defines navigation links
  • <main> - Specifies the main content
  • <section> - Defines a section in a document
  • <article> - Defines an independent, self-contained article
  • <footer> - Defines a footer for a document or section

Example

<header>
    <h1>My Website</h1>
</header>
<nav>
    <a href="#home">Home</a> |
    <a href="#about">About</a> |
    <a href="#contact">Contact</a>
</nav>
<main>
    <section>
        <h2>Welcome</h2>
        <p>This is the main content of the page.</p>
    </section>
</main>
<footer>
    <p>© 2024 My Website</p>
</footer>

Conclusion

Congratulations! You've covered the fundamental concepts of HTML. By understanding elements, attributes, headings, paragraphs, links, images, lists, tables, forms, and semantic elements, you're well on your way to creating your own web pages. Keep practicing and experimenting with these concepts to strengthen your skills.

Scroll to Top