HTML Explained: The Skeleton Every Website Is Built On

Introduction

Every website you have ever visited is, underneath, an HTML document. HTML (HyperText Markup Language) is not a programming language — it has no logic, no loops, no variables. It is a way of describing structure: this is a heading, this is a paragraph, this is a link, this is a list. Everything else — CSS for styling, JavaScript for behaviour — builds on top of that structure.

Tags, elements, and nesting

HTML is made of tags in angle brackets. Most come in pairs: an opening tag, content, and a closing tag.

<article>
  <h1>The Practical Developer</h1>
  <p>Practical tutorials, tools, and tips for developers.</p>
  <a href="https://practicaldevblog.blogspot.com/">Visit the blog</a>
</article>

<article> groups a self-contained piece of content, <h1> is the main heading, <p> is a paragraph, and <a> is a link whose destination lives in the href attribute. Elements nest inside each other like boxes — and like boxes, they must be closed in the right order, innermost first.

Semantic HTML: meaning, not just boxes

Older pages wrapped everything in generic <div> tags. Modern HTML uses semantic tags that say what content is, not just how it should look:

<header>...</header>
<nav>...</nav>
<main>
  <section>...</section>
  <aside>...</aside>
</main>
<footer>...</footer>

This matters for two practical reasons. Screen readers use these landmarks to help blind users navigate a page, and search engines use them to understand what a page is about. Writing semantic HTML is therefore both an accessibility practice and an SEO practice — for free, from the same tags.

Forms: the interactive half of HTML

Forms are how users send information to a website — and they are pure HTML until the server (like PHP, from the previous post) takes over:

<form action="/search" method="get">
  <label for="q">Search:</label>
  <input type="search" id="q" name="q" required>
  <button type="submit">Go</button>
</form>

<label> ties the text to the input (clicking the label focuses the field), required blocks empty submissions, and type="search" gives phones the right keyboard. Good forms are mostly about these small details.

Takeaway

HTML is structure, not logic: headings, paragraphs, links, lists, and forms, nested properly. Semantic tags add meaning that helps both people using screen readers and search engines find their way around — and every framework, from React to Vue, ultimately renders down to this.

Comments

Post a Comment

Popular posts from this blog

Swift Explained: Apple's Language for iPhone, Mac, and More

Introduction Swift is Apple's language for its platforms: iPhone, iPad, Mac, Apple Watch, and Apple TV. Introduced in 2014 to replace the older Objective-C, it was designed to be safe, fast, and — unusually for a systems language — genuinely pleasant to read and write. Even if you never ship an app, Swift teaches one idea every developer should understand: optionals. Optionals: saying "this might be missing" Most bugs in app development come from one cause: code assuming a value exists when it does not. Swift makes that assumption impossible to hide. A value that might be missing is wrapped in an Optional, and you must unwrap it before use. var nickname: String? = nil nickname = "Waqas" if let name = nickname { print("Hello, \(name)!") } else { print("No nickname set.") } String? means "a String, or nothing". The if let unwraps it safely: inside the block, name is guaranteed to exist. There is no way to accidentally us...
Read more

Flutter Explained: One Codebase, Every Screen

Introduction Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes. Everything is a widget In Flutter, there are no separate concepts for layout, styling, and controls — everything is a widget, nested inside other widgets like HTML elements, but in code: import 'package:flutter/material.dart'; class Greeting extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: Text( 'Hello, Sara!', style: TextStyle(fontSize: 24, color: Colors.teal), ), ); } } Center positions its child, Text displays words, TextStyle styles them — each a widget, composed by nesting. Layout widgets (like Row, Column, ...
Read more

Go Explained: Simple Code That Runs Fast

Introduction Go was built at Google for a specific frustration: large programs that were slow to build and hard to read. The answer was a language that is deliberately small — fewer features, but the right ones, done well. If you know one programming language already, Go will feel familiar within an hour. The interesting parts are not the syntax, but two ideas: goroutines and channels. Goroutines: cheap concurrency Most languages make running things at the same time feel heavy — threads, thread pools, and careful setup. A goroutine is Go's lightweight version: you start one by writing go in front of a function call. package main import ( "fmt" "time" ) func say(text string) { for i := 0; i < 3; i++ { fmt.Println(text) time.Sleep(100 * time.Millisecond) } } func main() { go say("hello") say("world") time.Sleep(500 * time.Millisecond) } The go say("hello") line does not wait — it st...
Read more