540-440-1540‬

[email protected]

HTML – The Foundation of Every Website

Created by Adugna Asrat in Quick Notes 27 Mar 2025

💡 What is HTML?

HTML stands for HyperText Markup Language. It is not a programming language but a markup language that tells the browser how to structure and display content.

✅ It forms the skeleton of every web page
✅ HTML works hand-in-hand with CSS (style) and JavaScript (interactivity)
✅ Every site you visit is made of HTML at its core

Think of HTML as a blueprint for a house, where each tag represents a room, doorway, or window — it gives structure and meaning to content.

🧱 1. Understanding HTML Elements

HTML is made up of tags that wrap content. An element usually has an opening tag, content, and a closing tag.

Example Concept: A heading looks like this in code

<h1> = Start of heading
Hello Ardiland = Content
</h1> = End of heading

The browser understands that this is a title and displays it larger and bolder than normal text.

There are many tags for different types of content, such as:

Headings (h1 to h6)
Paragraphs (p)
Lists (ul, ol, li)
Images (img)
Links (a)
Sections (div, section, article)

Each tag has a purpose, and learning to use them properly helps you create well-structured, accessible websites.

🗂️ 2. HTML Document Structure

Every HTML page has a common structure that includes:

A declaration to tell the browser it's an HTML document
A <head> section with the page title and metadata (not visible)
A <body> section which contains the visible content

This structure helps the browser understand how to render your content.

🖼️ 3. Images and Media

You can add images to a web page using the img tag. Unlike most elements, it doesn't need a closing tag.

The image needs a source (file path or URL) and an alt description (for screen readers or if image fails to load).

Real-life use case: You’re designing a personal portfolio page and want to show your photo, or a product image in an online store.

🔗 4. Links and Navigation

HTML allows users to navigate between pages using the a tag. You can link to:

Other websites
Other pages in your website
Sections within the same page

This is the core of the World Wide Web — “hypertext” in HTML means these links can jump to any resource on the internet.

📄 5. Lists, Tables, and Content Blocks

Use lists to group items (e.g., skills or menu items), and tables to organize structured data (like schedules, student scores, or price lists).

Content is grouped using block-level elements:

div: A generic container
section: A meaningful content block
article: A blog post, news story, or self-contained content
aside: Sidebar or extra information

These are useful for organizing your layout and making your site easier to style with CSS later.

📋 6. Forms and User Input

Forms are how users send information to a website, such as signing up, logging in, or placing an order.

Forms contain:

Text inputs
Password fields
Radio buttons
Checkboxes
Submit buttons

In real life: Think of a job application form or a contact form. HTML allows you to design these and collect user responses.

Forms can be connected to a server using back-end technologies or handled with JavaScript for simple feedback.

🔍 7. Semantic HTML

Semantic HTML means using the correct tag for the correct purpose. It improves:

Accessibility (for screen readers)
SEO (Search Engine Optimization)
Maintainability for developers

Examples of semantic tags:

header, footer, nav, main, section, article

This helps search engines and browsers better understand your site’s structure and content purpose.

🌐 8. How Browsers Use HTML

When a browser loads a web page:

It reads the HTML file from the server
Parses the structure and content
Applies CSS styling
Executes any JavaScript
Displays the final webpage to the user

Understanding this flow helps you troubleshoot and build better-performing sites.

🔧 9. Tools You Need to Learn HTML

✅ A code editor (like VS Code, Sublime Text, or Notepad++)
✅ A browser (Chrome, Firefox)
✅ Optional browser extensions like Live Server or HTML validator
✅ Free tutorials or platforms like W3Schools, FreeCodeCamp, and Ardiland 😉