Does the <li> tag in HTML have an ending tag?

Asked 12/12, 2013 at 17:59 Answered 23/5, 2018 at 16:34

So, I was learning about lists in HTML at college and the professor said <li> doesn't have an ending tag </li> along with some other tags like <img> and <br>. Is that correct or not? Because I've seen a lot of templates / themes using tag at the end, as well many sites also teach you that </li> exists, so I'm not sure whom to believe and what is correct way of using <li>?

The reason why I'm asking this is because last time we learned about <img> tag, he said that the alt="" attribute gives you a text displayed over the image when you hover the mouse, which turned it's only alternative text for broken images when I asked here and he was wrong for that case, which also made me wonder this as well.

Thanks.

Thomasinethomason answered 12/12, 2013 at 17:59 Comment(27)

Your professor should be fired. <li> is not a self-closing tag and needs a separate closing </li>. – Wert 12/12, 2013 at 18:0

@Cthulhu so, what is correct? – Thomasinethomason 12/12, 2013 at 18:0

Is that correct or not? — was answering this. – Pleiad 12/12, 2013 at 18:1

@j08691: it's optional in most cases. The professor is correct. – Incantation 12/12, 2013 at 18:2

@Incantation Optional or not, a closing </li> tag should never be considered 'optional' if you wish to write proper HTML code. – Laurettalaurette 12/12, 2013 at 18:3

BTW the alt="" tag inside of the image tag WILL create mouse over tag, but not in all browsers. You should test all of you HTML in multiple browser because font and placement may vary. Just thought I'd throw that in for a little extra FYI. – Parathion 12/12, 2013 at 18:4

It'll work, but that doesn't mean it's a good idea. – Boson 12/12, 2013 at 18:4

@SlyRaskal: That's your mere opinion. "Proper" HTML is determined by specification, not by your opinion. – Incantation 12/12, 2013 at 18:4

@JeremyJohnson Tested in all browsers and only IE works for that. – Thomasinethomason 12/12, 2013 at 18:5

The reason it will work either way is because HTML compliance and XHTML compliance are two different things. To find if your code is XHTML compliant, and therefore as correct as possible, use a code validator like this one: validator.w3.org/unicorn – Parathion 12/12, 2013 at 18:5

@Wert Which are the cases when it's not optional? I'm just curious. – Thomasinethomason 12/12, 2013 at 18:5

alt="" is also capable of reading the text of the picture to visually impaired persons. This is why meaningful text is useful here and why it is required to validate properly. – Parathion 12/12, 2013 at 18:7

@user2699298: There are specific rules you can read in the spec. I said "most cases" because I thought in the back of my mind that there may be specific rules with respect to intermingling with <optgroup> elements. This may not be the case. – Incantation 12/12, 2013 at 18:7

Note: As discussed in this related answer, you need to make sure that void tags (such as br and input) use only the shorthand (<input/>) and do not use the full <input></input> syntax, because it is actually invalid in HTML4 – Retraction 12/12, 2013 at 18:9

@user2736012: I understand the spec, but there is also something to be said about writing good code that is easily readable. Not closing a tag is known to be a bad practice. – Laurettalaurette 12/12, 2013 at 18:9

@SlyRaskal: Again, that's a matter of opinion. Can you give an example of harm that can arise from not closing an <li> element? It's easily readable if one understands the technology one is using. Understanding the technology should be considered the "good practice". – Incantation 12/12, 2013 at 18:11

@SlyRaskal not writing a closing tag will also cause the page to fail to validate for XHTML compliance. This is not a problem with ALL browsers, but it WILL cause issues in others. It's right up there with using <B> instead of the more correct <b>. <B> will not validate because it is not compliant with standards that are used to determine valid pages. It won't always cause a huge issue, but, then again, there is something to be said for good practice. It also helps others read your code. – Parathion 12/12, 2013 at 18:11

@Incantation the problem that it will cause is that it will not validate meaning that as browsers continue to change the problem could snowball. It's never guaranteed, but following XHTML is more correct because browsers are built around these specs. – Parathion 12/12, 2013 at 18:12

@JeremyJohnson: Please give one example of one browser that can't properly interpret HTML4 with respect to elided </li> tags. – Incantation 12/12, 2013 at 18:14

Writing HTML to be XHTML-compliant just to make sure some obsolete browser that would theoretically ignore the doctype and parse the page as XHTML just doesn't make any sense. Such a browser would refuse to parse >99.9% of web pages anyway. – Eulogy 12/12, 2013 at 18:15

@Incantation you miss the point. Just because it does not demonstrate itself as a huge problem now doesn't mean that it won't. The reason for XHTML compliance is so that there is a more uniform standard so that browsers will behave more similarly. I know that most browsers will interpret this correctly (for now), but most will also correctly interpret <B>, which is being deprecated and will likely no longer work in the future incremental updates to some browsers. If you want you webpage to be valid for longer and update it less, use XHTML standards – Parathion 12/12, 2013 at 18:18

@JeremyJohnson <b> is not and is not being deprecated, neither in lower case nor upper case. – Eulogy 12/12, 2013 at 18:20

@JeremyJohnson No I'm not missing the point. You're saying that someday some browser could decide to only support the XHTML doctype and ignore the more common doctypes. You've fabricated this imaginary scenario to bolster your point, but it's not at all based on reality. – Incantation 12/12, 2013 at 18:21

@Incantation take from it what you will. Just trying doing web design that won't validate and see how long you keep clients. – Parathion 12/12, 2013 at 18:22

Again, it does validate. It doesn't validate the XHTML doctype, and that is only relevant if you use that doctype. – Incantation 12/12, 2013 at 18:24

Whilst we can argue over the simple technicalities of different specs, there is a more sinister side to this, and that's when programmers presume that there will be no closing tag and code only for that. I've just experienced (not for the first time either) a CMS system editing my (should be optional) closing LI tags and making whole new LI tags in their place, resulting in a ridiculous mess up of the content. Not good. – Margemargeaux 12/9, 2018 at 10:38

Well, I certainly learned something new today... I came here from the Angular documentation which has an example with an omitted </li> – Prothorax 19/3, 2023 at 6:31

The li element has an end tag (</li>), but it’s optional in some cases:

An li element's end tag may be omitted if the li element is immediately followed by another li element or if there is no more content in the parent element.

Niccolite answered 12/12, 2013 at 18:7 Comment(12)

So, the </li> is optional if we have multiple <li> elements, but we should only add it to the last one? – Thomasinethomason 12/12, 2013 at 18:8

</li> is not optional for XHTML compliance. Since most browsers are built around these specs, it can cause problems in the future. This does not mean that it will cause problems here and now, but that it could in the future. Failure to include an end tag means that the browser has to interpret where one should be. If the browser fails to do so correctly, it could cause issues. Why not just go ahead and tell it where to end the tag? It is considered better practice by professional standards and it will avoid pesky bugs that might pop up as browsers change. – Parathion 12/12, 2013 at 18:15

@JeremyJohnson That's just simply not true. Modern browsers are built for HTML compliance, and the HTML spec clearly says the end tag is optional. – Eulogy 12/12, 2013 at 18:16

"</li> is not optional for XHTML compliance. Since most browsers are built around these specs, it can cause problems in the future." Huh? XHTML is obsolete, old browsers have no trouble with HTML4, and new browsers have no trouble with HTML5. – Incantation 12/12, 2013 at 18:17

XHTML arose when web development expanded and professional programmers needed something beyond HTML 4. The strict version of XHTML (eXtensible HyperText Markup Language) was considered much more precise and predictable than HTML 4. – Parathion 12/12, 2013 at 18:21

@JeremyJohnson: Your arguments have nothing to do with that question. You like XHTML and seem to think that all browsers should and presumably will only support that markup. As much as you may want it, this is not the real world. – Incantation 12/12, 2013 at 18:22

@Incantation XHTML is proven to be more and more standard. These standards cause multiple browsers to behave more similarly and have fewer elements that could deprecate in incremental updates of browsers. You can believe what you will, but every facet of documentation of this matter has shown this to be true. – Parathion 12/12, 2013 at 18:26

HTML5 is also built more closely to XHTML than HTML4, so there's also that. – Parathion 12/12, 2013 at 18:28

@JeremyJohnson If there's all this proof and documentation, then please provide some (that isn't some guys blog post). "HTML5 is also built more closely to XHTML than HTML4" HTML5 allows for boolean attributes without any value, as well as elided closing tags like HTML4. How is that closer to XHTML? – Incantation 12/12, 2013 at 18:31

From 1.6 of the W3 HTML5 spec "There are various concrete syntaxes ..., two of which are defined in this specification. The first such concrete syntax is the HTML syntax. This is the format suggested for most authors. It is compatible with most legacy Web browsers. If a document is transmitted with the text/html MIME type, then it will be processed as an HTML document by Web browsers... (Emphasis mine) – Incantation 12/12, 2013 at 18:38

@Incantation - Sorry for bumping this but I want to help here. You are misinterpreting something quite important. A HTML5 document can only be served with mimetype text/html and renders in quirksmode most of the time. True XHTML documents can also be served with mimetype application/xml+xhtml. It turns your pages more or less into data-carriers and the markup needs to be very strict. – Gutsy 29/7, 2017 at 14:52

It's worth noting that <li> is not a special case, also

<html>, <head>, <body>, <dt>, <dd>, <p>, <rb>, <rt>, <rtc>, <rp>, <optgroup>, <option>, <thead>, <tbody>, <tfoot>, <tr>, <td>, <th>

end tags can be omitted under certain circumstances. – Dogged 8/10, 2018 at 11:29

It is not good coding practice to leave out the end tags.

If you always write the end tags in

you will never have an issue if you need to change from HTML to XHTML
you will always know where the end of the element is
it's cleaner and easier to read.

Semantically, all tags have a beginning tag and an end tag, whether you use them or not is a different matter entirely.

Margeret answered 12/12, 2013 at 19:1 Comment(12)

all tags have a beginning tag and an end tag that's not quite true – Demission 20/5, 2015 at 3:20

@RokoC.Buljan how so? do you have a link that specifies a tag that you cannot write with an open and close tag? – Margeret 20/5, 2015 at 13:29

there are tags that don't make sense to have a beginning and end tag, like <label text="label text"></label>, there really is no reason to have the ending tag, so it can be self closed. tags like <br /> don't actually hold any information, but they still have an end tag, but browsers accept the standard of this tag being self closed. all tags still have a beginning and end tag. – Margeret 20/5, 2015 at 13:51

another user says that "All XHTML tags must have ending tags but that for HTML many are optional." logically your comment and their comment cannot both be true @RokoC.Buljan – Margeret 20/5, 2015 at 18:23

@Toxz, did you read the answer? please re-read this answer. I didn't say that HTML5 was XHTML, I said that keeping to certain coding structures keeps errors to a minimum. I will rephrase the answer though, I don't think that the fact that I first learned XHTML has anything to do with what I was saying. – Margeret 3/11, 2015 at 14:31

@malachi you picked a bad example, label tags have a beginning and end and it makes sense to use it since the label wraps content. <label> name: <input></label> is an example. A better example would be say <hr>. Not all tags have an ending, some are actually forbidden, like the hr tag, check w3.org/TR/html4/present/graphics.html#h-15.3 note this is for html4 – Girish 22/3, 2016 at 14:10

@dalore, that is the W3C recommendation. it may be forbidden to use it, but it still has one. – Margeret 22/3, 2016 at 14:51

Note that recommendation here means something different, it's actually a standard. W3C Recommendation: This is the most mature stage of development. At this point, the standard has undergone extensive review and testing, under both theoretical and practical conditions. The standard is now endorsed by the W3C, indicating its readiness for deployment to the public, and encouraging more widespread support among implementors and authors. Recommendations can sometimes be implemented incorrectly, partially, or not at all... – Girish 22/3, 2016 at 15:56

And forbidden means it doesn't have one. You're trying to apply english semantics on a spec doc that already has it semantics defined. Forbidden in this context means it does not have one. – Girish 22/3, 2016 at 15:57

Also note that not everyone agrees that leaving out the tags is not good practice. Specifically Google's own style guide recommend to leave out optional tags google.github.io/styleguide/htmlcssguide.xml (see section Optional Tags) – Girish 22/3, 2016 at 15:59

HTML is a Markup language, and given that a header rule isn't text that needs to be marked up kind of makes the hr element stick out among all the text that is actually being marked up. tags are used to define sections of text that is meant to be defined by markup, the hr tag doesn't define a section that needs to be marked up. so speaking of bad examples, I would say that hr tags and br tags are bad examples of the markup language itself. – Margeret 22/3, 2016 at 16:5

There are situations where omitting the </li> end tag makes the code much cleaner and easier to read: For example, when you can't have whitespace between the <li> tags. When using display: inline-block;, the space between <li> elements is often undesired, and omitting </li> fixes this with little effort. – Dogged 8/10, 2018 at 11:14

There is a difference here between HTML and XHTML. XHTML are more strict.

While old regular HTML does not enforce it for all tags, all tags in XHTML must have an ending tag** to validate. Even <br> and <img> is often written as <br /> or <img ... /> to specifically give them ending tags.

XHTML also introduces other requirements, for example:

All tags must be lowercase
Quotations must be used on attributes

For more information see HTML to XHTML

Picket answered 12/12, 2013 at 18:1 Comment(2)

You changed your "aim" after you were corrected. Irrespective of that, the question makes no mention of XHTML. – Incantation 12/12, 2013 at 18:8

@Incantation Sorry for not being as quick as I want to. Fastest gun in the west, you know. My aim was always to separate HTML from XHTML. Even if the question doesn't mention XHTML, it is still generally considered a better practice than HTML. – Picket 12/12, 2013 at 18:18

-2

Its totally your choice to give end tag at li . There have no strict rules to end tags . li ,br they can also perform without the end tag.

Karlotte answered 23/5, 2018 at 16:34 Comment(1)

Giving the br element an end tag would be an error. – Hyonhyoscine 23/5, 2018 at 16:52

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags