/> or > void element closing

HTML-CSS
1

I have noticed that both /> and > can be used to close void elements. I think the course might even use both. Can you clear up usage of the two. For example is it convention to always use /> to end void elements but not always necessary. In case I am getting my terminology wrong by void elements I am talking about the likes img and meta elements. Correct me if I am wrong a elements can also be void in some cases if so worth covering these too.

2

/> is unnecessary, and you can avoid using it.

Common linters will add it, but it’s an issue that keep getting raised by users, so hopefully eventually they will change that.
It’s a reason on why it is in the curriculum.

And if people use it by habit, it comes from a precursor of html where it was mandatory, but that is a different story.

Once you move to a front end library like React, then it is mandatory, but that’s an other different story.

no, a elements can’t be void in html. Maybe you mean dead? that means that it has href="#" and it doesn’t link anywhere

1 Like
3

Sorry what is a linter and by predecessor do you mean “xml”, it came up in reference to this matter when I did a general internet search. To clear I have heard of it before this.

4

a linter is a tool used to tidy your code, look it up for more infos.

I guess it was xml, but I did not want to give bad infos as I do not remember for sure

1 Like
5

On the a element point I use to get a and link elements fully mixed up. I am sure this is not unusual. So confusion on whether they can be void will have its origin there.

6

Right whether it is xml or not is not important. What is important is the stage of study I am at now I never need to use /> but in html /> and > in void elements are equivalent. On a side point anchor elements are never void.

7

link elements are void, a elements are not

that’s correct

well, for the equivalent part, if you test your code with a html validator like Ready to check - Nu Html Checker you will be told “Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.”

in the sense that

<img alt=SVG src=http://www.example.com/logo.svg/>
<img alt=SVG src="http://www.example.com/logo.svg"/>

while it is valid to use, if you forget spaces, the / gets merged into the attribute value unless you use quotes

8