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.
