Tags and elements – instructions and objects

Hello to people who went through the first lesson!

Here’s how I like to think about HTML tags and elements. It’s a bit different from how Jessica and Free Code Camp present it, but I think that’s OK – it’s a different perspective that could be useful for some people.
(Feel free to ignore me if this is too much! Also: are posts like these helpful, or do they conflict with how the course is meant to be taught?)


Tags are instructions, while elements are parts of the web page that the browser can e.g. display to you.

A tag is something like <h2> or </h2>. It’s plain text; something the designer types on the keyboard.
When a browser sees <h2>Hello</h2> in a HTML document, it constructs a heading element, which looks like this:

Hello

It’s no longer plain text. There are no angle brackets any more: angle brackets are only part of tags, the instructions that told the browser to make this heading.

To tell the browser to make an element, you need two tags (an opening one and a closing one), and also some content between them. The content becomes a part of the resulting element.
If you leave out the closing tag, the browser is working with incomplete instructions: it needs to guess where the heading ends. This is problematic: for example, different browsers could guess differently, making the page not look as you intended.

There are other ways of making elements than HTML tags (and angle brackets). In JavaScript , the instructions to make an h2 element will look very different than in HTML.

When an assignment tells you to “delete an element”, it really means “delete the tags that tell the browser to make an element”. That’s toooo many words! “Delete an element” is a bit less technically correct but everyone will still get what it means.

A tag like <img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute kitty"> specifies attributes – additional information needed to make an image element.
And since all the text content for an image is given by the alt attribute, there’s no need for a closing tag: the browser already knows the text after the tag isn’t part of the image.

19 Likes

I love this! Posts like this are great and it’s so important to point out that these concepts are going to be things we can mentally map and present in a range of different ways!

Thank you so much for sharing this with the (digital!) class

9 Likes

Thank you so much for this article, it was really helpful! And please, could you write an example of what exactly we’re doing when we read “delete the [name] element”?

When you get asked to Delete your h1 element like this:
image

… then you need to remove all the instructions to create the element – both tags (<h1> and </h1>) and the content between them.

4 Likes

This post was very helpful!

2 Likes