HTML, explained.
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:
<h1>My vacation</h1>
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
tag:
<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 alt
. With 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.
Add the img
tag where you want the image to show up.
Some other useful tags in HTML include:
a
where you can add links to other web pages within your website or externally.ul
shows a list with bullet points. Each point is tagged asli
within theul
tag.ol
is the same asul
but with numbers instead of bullet points.header
to 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 title
tag:
<title>My vacation</title>
So how do we differentiate between things that show up on the page and things that are about the page? This is where the head
and 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:
The
<!DOCTYPE html>
line at the top that simply says: "This is an HTML file"The
<html>
tag that surrounds every other tag in the filethe
<head>
tag that contains information about the page (like thetitle
)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!
Learn more
To learn more about HTML, check out these resources:
[2] Introduction to HTML - MDN Web Docs
Dev, Explained (43 part series)
- Javascript Scopes, explained.
- Javascript Promises, explained.
- 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.
- Javascript Hoisting, explained.
- Immediately Invoked Function Expressions (IIFE), explained.
- ARIA roles, explained.
- Test-driven Development, explained.
- ARIA live regions, explained.
- aria-label in accessibility, explained.
- Type coercion in Javascript, explained.
- Variables, explained.
- if statements, explained.
- Arrays, explained.
- Currying in Javascript, explained.
- Memoization, explained.
- For loops, explained.
- Javascript Prototypes, explained.
- React Hooks, explained.
- Graph databases, explained.
- MongoDB, explained.
- Serverless, explained.
- Javascript Callback functions, explained.
- HTML, explained.
- CSS, explained.
- Responsive design, explained.
- Javascript, explained.
- The CSS Box Model, explained.
- CSS Flexbox, explained.
- CSS Grid, explained.