No ending '/' for self-closing link element?


#1

If the <link> element is self-closing, why does it not need the ending slash (’/’) at the end, like the img element does?

For example, the link element in the demonstration:

<link href="/style.css" type="text/css" rel="stylesheet">

And here, the img element from an earlier demonstration:

<img src="https://www.example.com/picture.jpg" />

It says that all self-closing elements need the closing forward slash, but the link element doesn’t seem to need it. Why is that?


Common HTML Elements, Images: Is a Forward Slash Really a Requirement?
#2

In order to understand why the slash was ever there, we need to consider XML and its strict specification (which I won’t go into here. Whew!)

The strict rule in XML is that there are no unclosed elements. In fact all elements in XML have an OPENTAG and an ENDTAG. The language is specially designed for organizing (encoding) data, necessitating that it be entirely declarative. No guesswork for the parsing engine. A single error and nothing happens.

https://discuss.codecademy.com/t/in-depth-history-of-xml/201110

Step forward in time a couple of years and XML meets HTML in a language that conforms to the special requirements of XML strictness… XHTML.

When authors were looking at compliance issues in HTML the biggest one was the void tags that were scattered throughout the language. That’s the old term that describes empty elements. XML would require them to have an ENDTAG to conform. The writers of XHTML arrived at a compromise, space slash would tell the parsing engine to insert the endtag in the DOM without making it a requirement to page authors. Thus, the bridge was built, on this spec, at least.

<img />

The self-closing tag was born. Browsers could look up the namespace where the codebase resided (that was written in the rather complex DOCTYPE) and be able to interpret the tags into,

<img></img>

which would conform with XML requirements.

Fine and good for a few years until web applications became mobile apps that we see today. To bring XHTML (and HTML in general) into that world, writing groups worked tirelessly on beefing up the standard for HTML and CSS (and JS). Enter, HTML5 and CSS3 around 2005ish, and ES5 around 2009.

HTML5 working groups actually created two forms of HTML. One that would behave like XHTML, and one that would behave like HTML. The DOCTYPE is simplified to name just the root element, html, and the namespace is determined by the manner in which the document is served out (its MIME type).

application/xml  => served as XML conforming, so validating as XHTML (roughly)

text/html        => served as text, so validating as HTML 4 (roughly)

If some lesson authors are expecting the slash, then give it to them. If not, then forget it. Not needed when we consider we are writing text/html markup.

HTML5 went one step further. They got rid of the requirement for the space. (Why the space was there in the first place is a story in itself, to be learned in studying the history of XHTML).

<img/>

is valid HTML5, XML compliant.

For serving as text/html,

<img>

is valid, and all we need concern outselves with here (for the most part).

The default MIME type is `‘text/html’ so we don’t need to declare it unless serving it as application/xml. A site so oriented would decalre the MIME type on the server, so still would not be needed in the site’s pages. If the server configuration is inaccessible, then we would need a declaration in the source HEAD of the document.


#3

Read some articles which you can find with a google seaarch
html No ending ‘/’ for self-closing link element site:stackoverflow.com
her a discussion/opions article
https://stackoverflow.com/questions/3558119/are-non-void-self-closing-tags-valid-in-html5


#4

Extra


HTML5 even went one step further, though again this only applies the text/html MIME type Elements that cannot contain like types (no nesting) are allowed to not have endtags.

<p>This line is a paragraph.
<p>This line is a paragraph.
<p>This line is a paragraph.
<p>This line is a paragraph.

is valid HTML5, served as text. Not valid served as XML. The parsing engine will insert the endtags.

Same applies to list items…

<li>This is a list item
<li>This is a list item
<li>This is a list item
<li>This is a list item

Also valid HTML5, as text. Not so as XML.

Best advice concerning this is ignore the forgiving nature of the browser and keep your markup as declarative as possible. Include the endtag and don’t leave it up to the browser to decide.


#5

thank you so much!! that was really helpful


#6

In truth, the compromise was to include just a slash, and the space got added later because IE 5 Mac could not handle the slash. The space was discovered to solve that issue so got immediate adoption.

HTML5 writers wanted to undo this hack and restore the original XHTML compromise, and so have succeeded. Of course IE 5 is long gone. That is another story.

XMLisation of HTML 4


#7

Total segue


An XML file

Click to view
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="/courses/index.xsl" ?>
<document>
 <row>
  <id>2</id>
  <courseid>asist</courseid>
  <coursename>Applied Suicide Intervention Skills Training</coursename>
  <instructorid>csp_asist</instructorid>
  <instructorname>Center for Suicide Prevention</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>3</id>
  <courseid>first_aid_training</courseid>
  <coursename>St. John Ambulance First Aid</coursename>
  <instructorid>st_john_ambulance</instructorid>
  <instructorname>St. John Ambulance Training</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>10</id>
  <courseid>tutor_orientation</courseid>
  <coursename>Tutor Orientation and Working with the Adult Learner</coursename>
  <instructorid>louella_komadina</instructorid>
  <instructorname>Louella Komadina</instructorname>
  <objective>2</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>11</id>
  <courseid>learning</courseid>
  <coursename>Learning Styles and Tutoring Reading Skills</coursename>
  <instructorid>louella_komadina</instructorid>
  <instructorname>Louella Komadina</instructorname>
  <objective>2</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>13</id>
  <courseid>writing</courseid>
  <coursename>Writing for a Purpose</coursename>
  <instructorid>louella_komadina</instructorid>
  <instructorname>Louella Komadina</instructorname>
  <objective>2</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>14</id>
  <courseid>firearms_safety</courseid>
  <coursename>Canadian Firearms Safety Course</coursename>
  <instructorid>sheldon_frissell</instructorid>
  <instructorname>Sheldon Frissell</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>15</id>
  <courseid>hunter_education</courseid>
  <coursename>Conservation &amp; Hunter Education</coursename>
  <instructorid>sheldon_frissell</instructorid>
  <instructorname>Sheldon Frissell</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>23</id>
  <courseid>learn_spanish</courseid>
  <coursename>Learn to Speak Spanish&#44; Beginner Level</coursename>
  <instructorid>ivonne_anderson</instructorid>
  <instructorname>Ivonne Anderson</instructorname>
  <objective>4</objective>
  <flag>0</flag>
 </row>
 <row>
  <id>24</id>
  <courseid>advanced_spanish</courseid>
  <coursename>Learn to Speak Spanish&#44; Advanced Level</coursename>
  <instructorid>ivonne_anderson</instructorid>
  <instructorname>Ivonne Anderson</instructorname>
  <objective>4</objective>
  <flag>0</flag>
 </row>
 <row>
  <id>30</id>
  <courseid>women_self_defense</courseid>
  <coursename>Self Defense for Women</coursename>
  <instructorid>michael_bourguignon</instructorid>
  <instructorname>Michael Bourguignon</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>31</id>
  <courseid>south_african_cooking</courseid>
  <coursename>South African Cooking</coursename>
  <instructorid>elmari_anderson</instructorid>
  <instructorname>Elmari Anderson</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>44</id>
  <courseid>english_language_learning</courseid>
  <coursename>English Language Learning</coursename>
  <instructorid>louella_komadina</instructorid>
  <instructorname>Louella Komadina</instructorname>
  <objective>2</objective>
  <flag>0</flag>
 </row>
 <row>
  <id>45</id>
  <courseid>safe_boater</courseid>
  <coursename>BoaterEXAM Safe Boating Course</coursename>
  <instructorid>dan_merrill</instructorid>
  <instructorname>Dan Merrill</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>46</id>
  <courseid>mhfa_canada_basic</courseid>
  <coursename>Mental Health First Aid Canada - Basic</coursename>
  <instructorid>mhfa_canada</instructorid>
  <instructorname>MHFA Canada</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>55</id>
  <courseid>october_second</courseid>
  <coursename>An Evening With Brian Keating</coursename>
  <instructorid>brian_keating</instructorid>
  <instructorname>Brian Keating</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>56</id>
  <courseid>sage-ing</courseid>
  <coursename>Becoming a Sage - The Art of Aging with Wisdom</coursename>
  <instructorid>judy_steiert</instructorid>
  <instructorname>Judy Steiert</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>57</id>
  <courseid>wisdom_in_film</courseid>
  <coursename>Elder Wisdom in Movies</coursename>
  <instructorid>judy_steiert</instructorid>
  <instructorname>Judy Steiert</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>64</id>
  <courseid>compassion_fatigue</courseid>
  <coursename>Compassion Fatigue</coursename>
  <instructorid>michelle_hamilton</instructorid>
  <instructorname>Michelle Hamilton</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>65</id>
  <courseid>board_development</courseid>
  <coursename>Board Development</coursename>
  <instructorid>barb_peterson</instructorid>
  <instructorname>Barb Peterson</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>66</id>
  <courseid>learn_spanish_level_ii</courseid>
  <coursename>Beginner Spanish Level II</coursename>
  <instructorid>ivonne_anderson</instructorid>
  <instructorname>Ivonne Anderson</instructorname>
  <objective>4</objective>
  <flag>3</flag>
 </row>
 <row>
  <id>67</id>
  <courseid>personal_development</courseid>
  <coursename>Personal Development</coursename>
  <instructorid>brenda_robinson</instructorid>
  <instructorname>Brenda Robinson</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>68</id>
  <courseid>writing_circle</courseid>
  <coursename>Monthly Writing Circle</coursename>
  <instructorid>writers_group</instructorid>
  <instructorname>Wainwright &amp; District Writer's Group</instructorname>
  <objective>4</objective>
  <flag>0</flag>
 </row>
 <row>
  <id>69</id>
  <courseid>writers_workshop</courseid>
  <coursename>Writers' Workshop with Gail Bowen</coursename>
  <instructorid>gail_bowen</instructorid>
  <instructorname>Gail Bowen</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>71</id>
  <courseid>write_now</courseid>
  <coursename>Write Now!</coursename>
  <instructorid>wdcall</instructorid>
  <instructorname>W. &amp; D. Council for Adult Lifelong Learning</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>73</id>
  <courseid>financial_literacy</courseid>
  <coursename>Financial Literacy</coursename>
  <instructorid>kerry_riglin</instructorid>
  <instructorname>Kerry Riglin</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>75</id>
  <courseid>wow_super-session</courseid>
  <coursename>Community Wellness Super-Session</coursename>
  <instructorid>wow</instructorid>
  <instructorname>Wainwright on Wellness</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>76</id>
  <courseid>mhfa_canada_youth</courseid>
  <coursename>MHFA Canada: For Adults Who Interact with Youth</coursename>
  <instructorid>ariel_haubrich</instructorid>
  <instructorname>Ariel Haubrich</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>77</id>
  <courseid>scrapbook_in_a_day</courseid>
  <coursename>Scrapbook in a Day</coursename>
  <instructorid>annette_mckillop</instructorid>
  <instructorname>Annette McKillop</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>78</id>
  <courseid>learner_supports_series</courseid>
  <coursename>Learner Supports Series</coursename>
  <instructorid>wdcall</instructorid>
  <instructorname>W &amp; D Council for Adult Lifelong Learning</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>79</id>
  <courseid>intermediate_spanish</courseid>
  <coursename>Intermediate Spanish</coursename>
  <instructorid>ivonne_anderson</instructorid>
  <instructorname>Ivonne Anderson</instructorname>
  <objective>4</objective>
  <flag>0</flag>
 </row>
 <row>
  <id>80</id>
  <courseid>personal_directives</courseid>
  <coursename>Personal Directives</coursename>
  <instructorid>shelley_bailey</instructorid>
  <instructorname>Shelley Bailey</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>82</id>
  <courseid>fetal_alcohol_spectrum_disorders</courseid>
  <coursename>Fetal Alcohol Spectrum Disorders</coursename>
  <instructorid>dr_jacqueline_pei</instructorid>
  <instructorname>Dr. Jacqueline Pei</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>84</id>
  <courseid>digital_photography</courseid>
  <coursename>Digital Photography Class</coursename>
  <instructorid>james_lam</instructorid>
  <instructorname>Jame Lam</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>85</id>
  <courseid>frugal_and_fabulous</courseid>
  <coursename>Frugal and Fabulous!</coursename>
  <instructorid>tara_liegh_severin</instructorid>
  <instructorname>Tara-Liegh Severin</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>86</id>
  <courseid>card_making</courseid>
  <coursename>Card Making</coursename>
  <instructorid>annette_mckillop</instructorid>
  <instructorname>Annette McKillop</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>87</id>
  <courseid>computer_basics</courseid>
  <coursename>Computer Basics</coursename>
  <instructorid>kendra_barss</instructorid>
  <instructorname>Kendra Barss</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>88</id>
  <courseid>avoiding_holiday_stress</courseid>
  <coursename>Avoiding Holiday Stress Luncheon</coursename>
  <instructorid>ariel_haubrich</instructorid>
  <instructorname>Ariel Haubrich</instructorname>
  <objective>2</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>89</id>
  <courseid>mental_health_first_aid</courseid>
  <coursename>Mental Health First Aid</coursename>
  <instructorid>ariel_haubrich</instructorid>
  <instructorname>Ariel Haubrich</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>90</id>
  <courseid>banner_making</courseid>
  <coursename>Banner Making</coursename>
  <instructorid>annette_mckillop</instructorid>
  <instructorname>Annette McKillop</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>91</id>
  <courseid>asl_basic</courseid>
  <coursename>Basic Conversational Sign Language</coursename>
  <instructorid>krista_borden</instructorid>
  <instructorname>Krista Borden</instructorname>
  <objective>2</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>92</id>
  <courseid>fsl</courseid>
  <coursename>French as a Second Language</coursename>
  <instructorid>tina_duvall</instructorid>
  <instructorname>Tina Duvall</instructorname>
  <objective>4</objective>
  <flag>1</flag>
 </row>
 <row>
  <id>93</id>
  <courseid>build_a_website</courseid>
  <coursename>Build Your Own Website</coursename>
  <instructorid>business_iq_training</instructorid>
  <instructorname>Business IQ Training</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>94</id>
  <courseid>computing_fundamentals</courseid>
  <coursename>Computing Fundamentals</coursename>
  <instructorid>business_iq_training</instructorid>
  <instructorname>Business IQ Training</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>95</id>
  <courseid>basic_bookkeeping</courseid>
  <coursename>Basic Bookkeeping</coursename>
  <instructorid>business_iq_training</instructorid>
  <instructorname>Business IQ Training</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>96</id>
  <courseid>basic_excel</courseid>
  <coursename>Basic Excel</coursename>
  <instructorid>business_iq_training</instructorid>
  <instructorname>Business IQ Training</instructorname>
  <objective>1</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>97</id>
  <courseid>get_organized</courseid>
  <coursename>Get Organized!</coursename>
  <instructorid>robin_phillips</instructorid>
  <instructorname>Robin Phillips</instructorname>
  <objective>3</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>98</id>
  <courseid>digital_photography_basics</courseid>
  <coursename>Digital Photography Basics</coursename>
  <instructorid>james_lam</instructorid>
  <instructorname>Jame Lam</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>99</id>
  <courseid>force_free_dog_training_intro</courseid>
  <coursename>Intro to Force Free Dog Training</coursename>
  <instructorid>sheena_neil</instructorid>
  <instructorname>Sheena Neil</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>100</id>
  <courseid>sacred_brain</courseid>
  <coursename>The Sacred Brain</coursename>
  <instructorid>marilyn_buan</instructorid>
  <instructorname>Marilyn Buan</instructorname>
  <objective>4</objective>
  <flag>2</flag>
 </row>
 <row>
  <id>101</id>
  <courseid>sewing_classes</courseid>
  <coursename>Sewing Classes with Lana Olsen</coursename>
  <instructorid>lana_olsen</instructorid>
  <instructorname>Lana Olsen</instructorname>
  <objective>4</objective>
  <flag>0</flag>
 </row>
</document>

I’ve deliberately included a huge file to illustrate the data volume and structure. The data is from a now gone website so is more or less lorem ipsum.


#8

Segue cont’d…


This was the stye sheet that aided in the rendering…

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet  [
 <!ENTITY nbsp   "&#160;">
 <!ENTITY copy   "&#169;">
 <!ENTITY reg    "&#174;">
 <!ENTITY trade  "&#8482;">
 <!ENTITY mdash  "&#8212;">
 <!ENTITY ldquo  "&#8220;">
 <!ENTITY rdquo  "&#8221;"> 
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>
<xsl:variable name="header">
    <tr bgcolor="#cccccc">
      <th align="left">ID</th>
      <th align="left">Course ID</th>
      <th align="left">Course Name</th>
      <th align="left">Instructor ID</th>
      <th align="left">Instructor Name</th>
      <th align="left">Objective</th>
      <th align="left">Flag</th>
    </tr>
</xsl:variable>
<xsl:template match="/">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CALLW Courses and Instructors Table</title>
</head>

<body>



 <h2>Table of Courses and Instructors</h2>
    <table id="courses" style="border-collapse:collapse;">
    <xsl:copy-of select="$header" />
    <xsl:for-each select="document/row">
    <tr>
      <td><xsl:value-of select="id"/></td>
      <td><xsl:value-of select="courseid"/></td>
      <td><a><xsl:attribute name="href" >/courses/?id=<xsl:value-of select="courseid"/></xsl:attribute><xsl:value-of select="coursename"/></a></td>
      <td><xsl:value-of select="instructorid"/></td>
      <td><a><xsl:attribute name="href" >/instructors/?id=<xsl:value-of select="instructorid"/></xsl:attribute><xsl:value-of select="instructorname"/></a></td>
      <td><xsl:value-of select="objective"/></td>
      <td><xsl:value-of select="flag"/></td>
    </tr>
    </xsl:for-each>
    </table>




</body>
</html>

</xsl:template>
</xsl:stylesheet>

Notice that an XML stylesheet contains a template HTML document. Curious? Study on…

Bottom line, if you are working on data, then learn this language. If not, then concentrate on HTML. This is the stuff that is abstracted away, for the most part. (In IE, somewhere is an XML document archive of every page visited.) Doesn’t hurt to learn, though, even if superficially. That is where understanding comes from, even when we do not know a subject.


#9

Still waiting for the OP to call me out on certain details.


#10

Like visiting the…


#11

Not quite. It’s more to do with the empty tags. XML had them all along…

Twenty year old history gets grayed out rather easily. If there was any compromise at all (for XHTML), it was the hack to cure IE 5 Mac.


#12

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.