Sign in Subscribe

HTML Beginner's Guide: Understanding the Basics

Last updated on 
HTML Beginner's Guide: Understanding the Basics
Photo by Mohammad Rahmani / Unsplash

Table of Contents

  1. Introduction to HTML
  2. What You Need to Get Started
  3. Structure of an HTML Document
  4. HTML Tags and Elements
  5. Text Formatting in HTML
  6. Adding Links and Images
  7. Lists in HTML
  8. Tables in HTML
  9. Forms and Input Elements
  10. Understanding HTML5 Features
  11. HTML Best Practices
  12. Conclusion

1. Introduction to HTML

HTML (HyperText Markup Language) is the foundation of every web page. It is a markup language used to structure content for the web. Whether you're building a simple webpage or a complex site, HTML is where it all begins.

  • What is HTML? HTML consists of a series of elements that describe how to display content on a web page.
  • Why learn HTML? Learning HTML allows you to create websites, structure content, and understand web development fundamentals.

2. What You Need to Get Started

Before you begin coding HTML, you need the following:

  1. A Text Editor - Software like Visual Studio Code, Sublime Text, or even Notepad.
  2. A Web Browser - Chrome, Firefox, Safari, or Edge to view your HTML files.
  3. Basic Understanding of Computers - No prior coding experience required!

3. Structure of an HTML Document

An HTML document is composed of specific elements. Here's the basic structure:

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

Basic structure of HTML

Breakdown of the Code:

  • <!DOCTYPE html>: Declares the document type and version (HTML5).
  • <html>: The root element of the HTML document.
  • <head>: Contains metadata such as the page title.
  • <title>: Sets the title of the page (seen in the browser tab).
  • <body>: Contains the visible content of the page.
  • <h1>: A heading element.
  • <p>: A paragraph element.

4. HTML Tags and Elements

HTML is made up of tags and elements.

Tags

Tags are keywords enclosed within angle brackets <> that mark the beginning and end of an element.

Example:

<h1>This is a heading</h1>

Elements

An element includes the start tag, content, and the end tag.

Example:

<p>This is an HTML element.</p>

Common Tags

Tag Purpose
<h1>-<h6> Headings (from large to small)
<p> Paragraph text
<a> Hyperlinks
<img> Images
<ul>/<ol> Lists (unordered/ordered)
<table> Tables
<div> Division of sections
<span> Inline container

5. Text Formatting in HTML

You can format text using various tags:

Example:

<p>This is <strong>bold</strong> and <em>italic</em> text.</p>
<p>This is a <u>underlined</u> word.</p>

Text Formatting Tags

Tag Description
<strong> Bold text
<em> Italic text
<u> Underlined text
<br> Line break (no closing tag)
<hr> Horizontal rule (divider)

Use the <a> tag to link to another page or website.

Example:

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

Images

Use the <img> tag to display an image.

Example:

<img src="image.jpg" alt="Description of image" width="300" height="200">
  • src: Specifies the image file.
  • alt: Provides alternate text for the image.

7. Lists in HTML

HTML supports two main types of lists: ordered and unordered.

Unordered List

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

Ordered List

<ol>
  <li>Step 1</li>
  <li>Step 2</li>
  <li>Step 3</li>
</ol>

8. Tables in HTML

Tables organize data into rows and columns.

Example:

<table border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

9. Forms and Input Elements

Forms collect user input. Common form elements include text boxes, buttons, and checkboxes.

Example:

<form action="submit_form.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <input type="submit" value="Submit">
</form>

10. Understanding HTML5 Features

HTML5 introduces new elements and capabilities:

  • Semantic Tags: <header>, <footer>, <nav>, <section>, <article>
  • Audio and Video: Embed media using <audio> and <video> tags.

Example:

<video controls>
  <source src="video.mp4" type="video/mp4">
</video>

11. HTML Best Practices

  1. Always use proper indentation for readability.
  2. Use semantic tags for better structure and accessibility.
  3. Include the alt attribute for all images.
  4. Test your HTML on multiple browsers.
  5. Keep your code clean and organized.

12. Conclusion

Congratulations! You now have a basic understanding of HTML. With practice, you can start creating your own web pages and move on to more advanced topics like CSS and JavaScript.

Start small, experiment with different tags, and gradually build your skills. Happy coding!

Next Steps: Learn how to style your HTML with CSS and add interactivity with JavaScript!