Can a span be closed using ?

by

Whether or not this is valid depends on your doctype, basically whether or not you’re using XHTML or HTML.

When using XHTML, all major browsers will support self closing tags like the example you provided. Take the following example, this is valid because I’m specifying the page is using XHTML (in other words, HTML that is valid XML).

Update: Based on the very good comments below, browsers will only interpret all self closing tags correctly if the mime type is text/xml or application/xhtml+xml, see here for the details. For pages served as text/html (the vast majority), see here here for the tags that can be self closing.

This example will validate:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h2>Will test page</h2>
    <p>some stuff <span class="drop" /></p>
</body>
</html>

However, this example is not valid, because I’ve switched the doctype to HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <h2>Will test page</h2>
    <p>some stuff <span class="drop" /></p>
</body>
</html>

A few helpful references:

More Related Contents:

  1. What is a clearfix?
  2. How to center an element horizontally and vertically
  3. How do you keep parents of floated elements from collapsing? [duplicate]
  4. CSS: Width in percentage and Borders
  5. How can I expand floated child div’s height to parent’s height?
  6. Fixed Table Cell Width
  7. Transform: translate(-50%, -50%)
  8. Position absolute and overflow hidden
  9. Get rid of space underneath inline-block image [duplicate]
  10. Difference between position:sticky and position:fixed?
  11. Printing HTML table with many columns/rows using CSS layout?
  12. Can overflow:hidden affect layout?
  13. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  14. CSS Layout 2-Column fixed-fluid [closed]
  15. Yet Another Divs vs Tables issue: Forms
  16. Balanced text wrapping in HTML
  17. CSS margin pushing the body element
  18. Is it bad design to use table tags when displaying forms in html?
  19. Does ID have to be unique in the whole page?
  20. flex property not working in IE
  21. `col-xs-*` not working in Bootstrap 4
  22. How to turn off word wrapping in HTML?
  23. How to bevel the corner of a block div?
  24. How can I resize an image to a percentage of itself with CSS?
  25. HTML/CSS: Make a div “invisible” to clicks?
  26. Image in SELECT element [duplicate]
  27. Can Outlook 2010 use a web font in an html email?
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment