HTML Basics - Learn HTML Basics: A Beginner's Tutorial for Creating Web Pages

Master the essentials of HTML with our beginner-friendly tutorial. Discover how to structure content, format text, create links, add images, and build your first webpage. Start your web development journey today!

HTML Basics Tutorial

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It provides the structure and content of a webpage, defining elements and their relationships. In this HTML basics tutorial, we will cover the fundamental concepts of HTML, including its syntax, basic tags, and how to create a simple web page.

Table of Contents

  1. Introduction to HTML
  2. Setting Up Your First HTML Document
  3. HTML Document Structure
  4. Text Formatting
  5. Lists
  6. Links
  7. Images
  8. Working with Forms
  9. HTML Comments
  10. Creating a Simple Web Page
  11. Additional Resources

1. Introduction to HTML

HTML is a markup language that uses a system of tags to structure and format content on a web page. Tags are enclosed in angle brackets (< >) and typically come in pairs: an opening tag and a closing tag. The content between the opening and closing tags defines the element.

2. Setting Up Your First HTML Document

To create an HTML document, all you need is a simple text editor, such as Notepad (Windows), TextEdit (macOS), or Visual Studio Code. Here's the basic structure of an HTML document:

 
<!DOCTYPE html>
<html>
<head>
    <title>Your Page Title</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>
  • <!DOCTYPE html>: This declaration defines the document type and version of HTML you're using (HTML5 in this case).
  • <html>: The root element that encloses the entire HTML content.
  • <head>: Contains meta-information about the document, like the title.
  • <title>: Sets the title that appears in the browser's title bar or tab.
  • <body>: Contains the visible content of the webpage.

3. HTML Document Structure

HTML documents consist of a hierarchical structure of elements. Elements can be nested inside other elements. Each element has an opening tag and a closing tag.

Example of a simple HTML structure:

 

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

 

  • <h1>: Heading element (largest size)
  • <p>: Paragraph element

4. Text Formatting

You can format text using various HTML tags:

  • <strong>: Bold text
  • <em>: Italic text
  • <u>: Underlined text
  • <br>: Line break
  • <hr>: Horizontal rule (line)

5. Lists

HTML supports both ordered and unordered lists:

Ordered list:

 
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

Unordered list:

<ul> <li>Item A</li> <li>Item B</li> </ul>

6. Links

Create hyperlinks using the <a> tag:

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

7. Images

Display images with the <img> tag:

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

8. Working with Forms

HTML forms gather user input. Example form elements:

  • <form>: Form container
  • <input type="text">: Text input
  • <input type="submit">: Submit button

9. HTML Comments

Comments help you annotate your code:

<!-- This is a comment -->

10. Creating a Simple Web Page

Let's create a basic webpage:

<!DOCTYPE html>
<html>
<head>
    <title>My Simple Page</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a simple webpage created using HTML.</p> <a href="https://www.example.com">Visit Example</a>
</body>
</html>

11. Additional Resources

Review