HTML is basically a piece of text that your browser (like Chrome, Firefox, or Edge) reads to show you a website on your screen.
This piece of text contains some instructions on what to show on the website, and also some details about the site itself, for example what to show on the tab when the website is opened.
So how does it work?
Suppose you want to write a small document. Something that contains a title and two paragraphs. Something that would look like this:
You can tell a browser how to show this a web page using HTML.
HTML uses "tags" to label each line of text. For example:
A title (or a first-level heading) can be written using the
h1 tag like so:
With this line, you're basically telling the browser:
Show me a title that says "My vacation".
A paragraph can be written using the
p tag. So to write our two paragraphs, we do this in HTML:
<p>Last summer I went on vacation to the Greek islands or Rhodes and Crete. It was loads of fun</p> <p>We went to the beach, ate tons of ice cream and enjoyed the sun so much that we got a little sunburned</p>
So what if you want to add an image?
You can do this using the
<img src="https://upload.wikimedia.org/wikipedia/commons/0/01/Island_of_Crete%2C_Greece.JPG" alt="Satellite image of Crete" />
As you can see the
img tag contains two more things you need to include: a
src and an
src you can tell it where to go and find the image. With
alt you can add a description of the image so that people using assistive software know what the image contains.
img tag where you want the image to show up.
Some other useful tags in HTML include:
awhere you can add links to other web pages within your website or externally.
ulshows a list with bullet points. Each point is tagged as
olis the same as
ulbut with numbers instead of bullet points.
headerto tell the browser that this is the top header of the website, that usually contains the logo and the navigation.
For a full list of tags, see this page.
As I mentioned before, HTML doesn't only contain things that show on the page, it also contains information about the page that don't show up on the page itself.
Stuff like what to show on the browser's tab, when a page opens. This is done with the
So how do we differentiate between things that show up on the page and things that are about the page? This is where the
body tags come in. This is how a complete HTML page looks like:
<!DOCTYPE html> <html lang="en"> <head> <title>My vacation</title> </head> <body> <h1>My vacation</h1> <p>Last summer I went on vacation to the Greek islands or Rhodes and Crete. It was loads of fun</p> <p>We went to the beach, ate tons of ice cream and enjoyed the sun so much that we got a little sunburned</p> </body> </html>
A few things to notice from the code above:
<!DOCTYPE html>line at the top that simply says: "This is an HTML file"
<html>tag that surrounds every other tag in the file
<head>tag that contains information about the page (like the
<body>tag that contains information that will be shown on the page (like the paragraphs and heading)
And this is HTML in a nutshell!
To learn more about HTML, check out these resources:
Dev, Explained (43 part series)
- Accessibility, explained.
- React, explained
- Should I use forEach() or map()?
- Should I use Flexbox or CSS Grid?
- Docker, explained.
- Unit testing, explained
- Git, explained.
- Typescript, explained.
- async/await, explained.
- The DOM, explained.
- Regular expressions, explained
- GraphQL, explained.
- Vue, explained.
- Svelte, explained.
- API, explained.
- Immediately Invoked Function Expressions (IIFE), explained.
- ARIA roles, explained.
- Test-driven Development, explained.
- ARIA live regions, explained.
- aria-label in accessibility, explained.
- Variables, explained.
- if statements, explained.
- Arrays, explained.
- Memoization, explained.
- For loops, explained.
- React Hooks, explained.
- Graph databases, explained.
- MongoDB, explained.
- Serverless, explained.
- HTML, explained.
- CSS, explained.
- Responsive design, explained.
- The CSS Box Model, explained.
- CSS Flexbox, explained.
- CSS Grid, explained.