DEV Community

Cover image for HTML Basics: A Beginner's Guide
Ouma Godwin
Ouma Godwin

Posted on

HTML Basics: A Beginner's Guide

#webdev #programming #beginners #html

Overview

HTML (HyperText Markup Language) is the foundation of every webpage. It structures content using elements (or "tags"). In this tutorial, you'll learn:

  • The basic structure of an HTML document.
  • Common HTML elements.
  • How to properly nest elements.

Step-by-Step Explanation

1. Document Structure & Doctype

Every HTML document starts with a declaration that tells the browser which version of HTML is being used. For HTML5, use:

<!DOCTYPE html>
Enter fullscreen mode Exit fullscreen mode

Then, wrap all content inside the <html> element:

<html lang="en"> ... </html>
Enter fullscreen mode Exit fullscreen mode

The lang attribute improves accessibility and SEO.

2. Head and Body Sections

An HTML document is divided into two main sections:

  • <head>: Contains metadata, such as the title, character set, and links to stylesheets.
  • <body>: Contains visible content, such as text, images, and links.

3. Essential HTML Tags

Headings

HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest):

<h1>Main Heading</h1> <h2>Subheading</h2>
Enter fullscreen mode Exit fullscreen mode

Paragraphs

Use <p> for text content:

<p>This is a paragraph.</p>
Enter fullscreen mode Exit fullscreen mode

Lists

  • Unordered List (<ul>): Uses bullet points.
  • Ordered List (<ol>): Uses numbers. 
<ul> <li>Item 1</li> <li>Item 2</li> </ul>
Enter fullscreen mode Exit fullscreen mode

Images

Use the <img> tag to embed an image. Always include the alt attribute for accessibility:

<img src="image.jpg" alt="Description of image">
Enter fullscreen mode Exit fullscreen mode

Links

The <a> tag defines hyperlinks:

<a href="https://www.example.com">Visit Example</a>
Enter fullscreen mode Exit fullscreen mode

Interactive Coding Example

Open a code editor (or an online editor like CodePen or JSFiddle) and try this:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My First HTML Page</title> </head> <body> <h1>Welcome to HTML Basics</h1> <p>This is a paragraph introducing the page.</p> <h3>My Favorite Things</h3> <ul> <li>Coding</li> <li>Design</li> <li>Gaming</li> </ul> <img src="https://media.istockphoto.com/id/2075908648/photo/engineer-man-hand-type-keyboard-input-configuration-data-ode-for-register-system-structure-or.webp?s=612x612&w=is&k=20&c=H3eN_gF30LRRvD9ex27D0kBRf7mBrzGr1uP9SK0BtwU=" alt="Placeholder image"> <br> <a href="https://www.example.com">Visit Example.com</a> </body> </html>
Enter fullscreen mode Exit fullscreen mode

Exercise

  • Add another paragraph after the list.
  • Change "My Favorite Things" to <h2> and observe how it affects the page hierarchy.

Additional Resources

Top comments (0)