Showing posts with label HyperText Markup Language. Show all posts
Showing posts with label HyperText Markup Language. Show all posts

Friday, September 18, 2026

What Is HTML?

// web development

What Is HTML?

HTML is the markup language used to describe the structure and meaning of content on web pages. It tells a web browser what elements exist on a page and how those elements relate to one another.

// definition

HTML means HyperText Markup Language

HTML stands for HyperText Markup Language.

It is the standard markup language used to structure content on the World Wide Web.

HTML can describe headings, paragraphs, links, images, lists, tables, forms and many other parts of a web page.

// example

What does HTML look like?

A very simple piece of HTML might look like this:

<h1>Freelance Coder</h1> <p>Welcome to my website.</p>

The browser interprets the first element as a main heading and the second as a paragraph.

// elements

HTML is built from elements

An HTML element usually consists of an opening tag, some content and a closing tag.

<p>This is a paragraph.</p>

<p>

The opening tag marks the beginning of the paragraph.

</p>

The closing tag marks the end of the paragraph.

// terminology

A tag and an element are not quite the same thing

People often use the words interchangeably, but there is a useful distinction.

<h2>About Me</h2>

<h2> is a tag.

The complete structure including the opening tag, content and closing tag is the HTML element.

// attributes

Elements can have attributes

Attributes provide additional information about an HTML element.

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

The href attribute tells the browser where the link should go.

<img src="photo.jpg" alt="A photograph">

Here, src identifies the image file and alt provides alternative text.

// document

A complete HTML document has a structure

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Freelance Coder</title> </head> <body> <h1>Hello, world!</h1> <p>This is my web page.</p> </body> </html>
// head

The <head> contains information about the page

The head normally contains metadata and resources used by the document rather than the main visible page content.

Page Title Character Encoding Metadata Stylesheets Scripts
// body

The <body> contains the page content

Most of the content that users see and interact with appears inside the body element.

<body> <h1>My Website</h1> <p>Welcome to my website.</p> <a href="/contact">Contact me</a> </body>
// common elements

Some common HTML elements

Element Purpose
<h1> Main heading
<p> Paragraph
<a> Link
<img> Image
<ul> Unordered list
<ol> Ordered list
<table> Tabular data
<form> User input form
// hypertext

HTML links pages together

The "HyperText" part of HTML refers to the ability to connect documents through hyperlinks.

<a href="https://example.com">Open website</a>

Links are one of the fundamental ideas behind the web. They allow users to move between pages, websites and other resources.

// nesting

HTML elements can contain other elements

<article> <h2>What Is HTML?</h2> <p> HTML structures web content. </p> </article>

This creates a hierarchical document structure.

The article contains both a heading and a paragraph.

// semantic html

HTML can describe meaning, not just appearance

Modern HTML includes semantic elements that describe the purpose of different sections of a page.

<header> <nav> <main> <article> <section> <footer>

Semantic HTML can make documents easier for browsers, developers, search engines and assistive technologies to understand.

// html + css + javascript

HTML, CSS and JavaScript have different jobs

HTML

Defines the structure and meaning of the content.

CSS

Controls presentation, layout, colours, spacing and visual design.

JavaScript

Adds behaviour, logic and interactive functionality.

Together

These technologies form much of the foundation of modern front-end web development.

// structure vs style

HTML describes what something is

Consider:

<h1>Freelance Coder</h1>

HTML tells the browser that this text is the main heading.

CSS could then decide that the heading should be blue, large and centred.

h1 { color: blue; font-size: 42px; text-align: center; }

Keeping structure and presentation separate is an important principle of web development.

// markup language

HTML is a markup language

HTML is generally described as a markup language, rather than a programming language.

Its main purpose is to mark up and describe the structure and meaning of document content.

HTML structures content. It does not by itself provide the general-purpose programming logic associated with languages such as JavaScript, Python or PHP.

// utf-8

HTML and UTF-8

HTML is text, so character encoding matters.

Modern pages commonly declare UTF-8 using:

<meta charset="UTF-8">

This helps browsers correctly interpret characters such as:

£ € é π √ ≤ ≥ 日
// browser

The browser interprets the HTML

When a browser receives an HTML document, it parses the markup and constructs an internal representation of the page.

HTML file ↓ Browser parses HTML ↓ Document structure ↓ CSS applied ↓ JavaScript can interact with the page ↓ Rendered web page

The browser does not simply display the HTML source code. It interprets the markup and renders the corresponding document.

// accessibility

Good HTML also improves accessibility

Correctly structured HTML gives information about headings, navigation, images, forms and other content.

Assistive technologies such as screen readers can use this structure to help users understand and navigate a page.

<img src="chart.png" alt="Bar chart showing monthly sales" >

The alternative text describes the image when the image itself cannot be seen.

// uses

Where is HTML used?

Web Pages Blogs Web Applications Landing Pages Online Stores Documentation Forms Email Templates
// summary

The structure of the web.

HTML is the markup language used to describe the structure and meaning of web content. It uses elements, tags and attributes to define headings, paragraphs, links, images, forms and other parts of a document, providing the structural foundation on which CSS and JavaScript can build.

What Is PHP?

// server-side programming What Is PHP ? PHP is a programming language widely use...