Weird HTML Tags

Here is a weird way to get your head round how HTML code works.
HTML code describes things on a web page.
Imagine if it described things in real life!

Tags

Imagine we want to write a dog in HTML code.

Here's how we could do it:

The dog has an opening tag (<dog>) and a closing tag (</dog>).

---

Now imagine we want to write a ship in HTML code.

Here's how we could do it:

Tags Inside Tags

Now we want to put the dog inside a ship.

Here's how we could do it:

You can see the dog's tags are between the opening ship tag and the closing ship tag.

---

Say we want to put the dog next to a ship.

Here's how we could do it:

You can see the dog's tags are after the closing ship tag.

Attributes of Tags

Imagine we want to give the dog a name.
We need to use an attribute inside the opening dog tag

Here's how we could do it:

We've named our dog "Dog" (we're not very inventive, but we love him).

---

Let's give the dog pink fur.
We'll use another attribute inside the opening dog tag

Here's how we could do it:

The dog has now been coloured pink.

---

Oops! Dog doesn't look very happy. Let's make him smile.
We'll use yet another attribute inside the opening dog tag

The dog has now been coloured pink and is happy.

---

Taking things further

Now, try writing yourself and friends in weird HTML code.
Or try our Weird HTML quiz!

---

---

@goberserk1

like us >