Learn Web Development with Jacuba Visuals Web

Explore simple visual guides and practical structure to help you build your first website properly.

HTML5 Basics

How to Build Your First Basic Website

Using semantic HTML5 to create a clean, structured and readable webpage.

Step 1

What You Need Before You Start

Text Editor

Use a code editor such as Visual Studio Code to write and save your HTML and CSS files properly.

Project Folder

Create one main folder for your website project so your files stay organised from the beginning.

HTML File

Create a file named index.html. This will be the main page of your website.

CSS File

Create a file named style.css and connect it in the head of your HTML document.

Browser

Open your HTML file in a web browser to test how your page looks and behaves.

Step 2

Basic HTML5 Page Structure

Doctype

Start with <!DOCTYPE html> so the browser knows you are using modern HTML5.

Html Element

Wrap the whole page inside the <html> element and set the page language.

Head Setup

Add the character set, viewport meta tag, page title and stylesheet link inside the head.

Body Content

Inside the body, place the visible parts of the page such as header, main content and footer.

Semantic Layout

Use elements like <header>, <main>, <article> and <footer> to give the page proper structure.

Visual Guide

Infographic Examples

Click any infographic to open it larger and inspect the details more clearly.

See More Infographics

Step 3

What Each Element Means

Head

Contains metadata, page title, viewport settings, and the link to style.css.

Header

The top area of the page is usually used for the site title or navigation.

Main

Holds the main unique content of the webpage.

Div Container

Used for grouping content and controlling layout. It is not semantic by itself.

Article

Self-contained content such as a post, tutorial block, or topic section.

Footer

Bottom part of the page, often containing copyright or contact information.

Step 4

What You Get

Better Structure

Easier to read and maintain.

Better Search Engine Optimization

Search engines understand your content better.

Better Accessibility

Improves support for assistive technologies.

Better Scalability

A stronger base for future features.

Step 5

Tips

  • Use semantic elements where possible.
  • Keep your code clean and well-indented.
  • Always connect your stylesheet properly.

Step 6

Next Steps

  • Learn CSS for styling
  • Make the layout responsive
  • Add JavaScript interactivity
  • Publish the page online