You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way.<\/p>\n\n\n\n
What is the XHTML way of writing HTML, and what is the HTML way of writing HTML? Let\u2019s have a look.<\/p>\n\n\n\n\n\n\n
In the 1990s, there was HTML. In the 2000s, there was XHTML. Then, in the 2010s, we switched back to HTML. That\u2019s the simple story.<\/p>\n\n\n\n
You can tell by the rough dates of the specifications, too: HTML \u201c1\u201d 1992, HTML 2.0 1995, HTML 3.2 1997, HTML 4.01 1999; XHTML 1.0 2000, XHTML 1.1 2001; \u201cHTML5\u201d 2007<\/a>.<\/p>\n\n\n\n XHTML became popular when everyone believed XML and XML derivatives were the future. \u201cXML all the things.\u201d For HTML, this had a profound effect: The effect that we learned to write it the XHTML way.<\/p>\n\n\n The XHTML way is well-documented, because XHTML 1.0 describes in great detail in its section on \u201cDifferences with HTML 4\u201d<\/a>:<\/p>\n\n\n\n Does this look familiar? With the exception of marking CDATA content, as well as dealing with SGML exclusions, you probably follow all of these rules. All of them.<\/strong><\/p>\n\n\n\n Although XHTML is dead, many of these rules have never been questioned again. Some have even been elevated to \u201cbest practices\u201d for HTML.<\/p>\n\n\n\n That is the XHTML way of writing HTML, and its lasting impact on the field.<\/p>\n\n\n One way of walking us back is to negate the rules imposed by XHTML. Let\u2019s actually do this (without the SGML part, because HTML isn\u2019t based on SGML anymore<\/a>):<\/p>\n\n\n\n Let\u2019s remove the esoteric things; the things that don\u2019t seem relevant. This includes XML whitespace handling, CDATA sections, doubling of Peeling away from these rules, this looks a lot less like we\u2019re working with XML, and more like working with HTML. But we\u2019re not done yet.<\/p>\n\n\n\n \u201cDocuments may not be well-formed\u201d suggests that it was fine if HTML code was invalid. It was fine for XHTML to point to wellformedness because of XML\u2019s strict error handling. But while HTML documents work even when they contain severe syntax and wellformedness issues, it\u2019s neither useful for the professional \u2014 nor our field \u2014 to use and abuse this resilience. (I’ve argued this case before in my article, \u201cIn Critical Defense of Frontend Development.\u201d<\/a>)<\/p>\n\n\n\n The HTML way would therefore not suggest \u201cdocuments may not be well-formed.\u201d It would also be clear that not only end, but also start tags aren\u2019t always required. Rephrasing and reordering, this is the essence:<\/p>\n\n\n\n How does this look like in practice? For start and end tags, be aware that many tags<\/a> are optional. A paragraph and a list, for example, are written like this in XHTML:<\/p>\n\n\n\n In HTML, however, you can write them using only this code (which is valid):<\/p>\n\n\n\n Developers also learned to write void elements, like so:<\/p>\n\n\n\n This is something XHTML brought to HTML, but as the slash has no effect on void elements<\/a>, you only need this:<\/p>\n\n\n\n In HTML, you can also just write everything in all caps:<\/p>\n\n\n\n It looks like you\u2019re yelling and you may not like it, but it\u2019s okay to write it like this.<\/p>\n\n\n\n When you want to condense that link, HTML offers you the option to leave out certain quotes<\/a>:<\/p>\n\n\n\n As a rule of thumb, when the attribute value doesn\u2019t contain a space or an equal sign, it\u2019s usually fine to drop the quotes.<\/p>\n\n\n\n Finally, HTML\u2013HTML \u2014 not XHTML\u2013HTML \u2014 also allows to minimize attributes. That is, instead of marking an You can minimize the attributes:<\/p>\n\n\n\n If you\u2019re not only taking advantage of the fact that the quotes aren\u2019t needed, but that The above isn\u2019t a representation of where HTML was in the 90s. HTML, back then, was loaded with If you\u2019re open to a suggestion of what a more comprehensive, contemporary way of writing HTML could look like, I have one. (HTML is my main focus area, so I\u2019m augmenting this by links to some of my articles.)<\/p>\n\n\n\n It\u2019s not a coincidence that this resembles the three ground rules for HTML<\/a>, that it works with the premise of a smaller payload also leading to faster sites<\/a>, and that this follows the school of minimal web development<\/a>. None of this is new \u2014 our field could merely decide to rediscover it. Tooling is available, too: html-minifier<\/a> is probably the most established and able to handle all HTML optimizations.<\/p>\n\n\n\n You\u2019ve learned HTML the XHTML way. HTML isn\u2019t XHTML. Rediscover HTML, and help shape a new, modern way of writing HTML \u2014 which acknowledges, but isn\u2019t necessarily based on XML.<\/p>\n","protected":false},"excerpt":{"rendered":" You may not use XHTML (anymore), but when you write HTML, you may be more influenced by XHTML than you think. You are very likely writing HTML, the XHTML way. What is the XHTML way of writing HTML, and what is the HTML way of writing HTML? Let\u2019s have a look.<\/p>\n","protected":false},"author":249661,"featured_media":363751,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Write HTML, the HTML Way (Not the XHTML Way) by @j9t","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[479,731],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/xhtml.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":342448,"url":"https:\/\/css-tricks.com\/how-to-create-css-charts-with-interesting-shapes-glyphs-and-emoji\/","url_meta":{"origin":363745,"position":0},"title":"How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji","date":"June 21, 2021","format":false,"excerpt":"Let\u2019s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover \ud83e\ude84 I\u2019ll show\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/chart-shapes.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":1209,"url":"https:\/\/css-tricks.com\/xhtml-11-or-html-401\/","url_meta":{"origin":363745,"position":1},"title":"XHTML 1.1 or HTML 4.01?","date":"October 20, 2008","format":false,"excerpt":"NOTE: This article is super old. As I write this warning in mid-2013, there is only one DOCTYPE that should be used, the HTML5 Aaron Bazinet originally posted this question in the forums. I'm going to go ahead and say right away I'm not an expert on this subject, but\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":730,"url":"https:\/\/css-tricks.com\/html-5-vs-xhtml-2-an-article-roundup-and-poll\/","url_meta":{"origin":363745,"position":2},"title":"HTML 5 vs. XHTML 2: An Article Roundup and Poll","date":"May 19, 2008","format":false,"excerpt":"Much like CSS3, widespread adoption for the next-gen web languages is a distant mirage. Still, it is important to stay educated on these things and even participate in these early stages while things are still malleable. Rather than re-hash everything here, here is a roundup of articles talking about the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373167,"url":"https:\/\/css-tricks.com\/css-checkerboard-background-but-with-rounded-corners-and-hover-styles\/","url_meta":{"origin":363745,"position":3},"title":"CSS Checkerboard Background… But With Rounded Corners and Hover Styles","date":"September 20, 2022","format":false,"excerpt":"On one hand, creating simple checkered backgrounds with CSS is easy. On the other hand, though, unless we are one of the CSS-gradient-ninjas, we are kind of stuck with basic patterns. At least that\u2019s what I thought while staring at the checkered background on my screen and trying to round\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/checkerboard-gradient.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":201268,"url":"https:\/\/css-tricks.com\/the-at-rules-of-css\/","url_meta":{"origin":363745,"position":4},"title":"The At-Rules of CSS","date":"May 12, 2015","format":false,"excerpt":"The at-rule is a statement that provides CSS with instructions to perform or how to behave. Each statement begins with an @ followed directly by one of several available keywords that acts as the identifier for what CSS should do. This is the common syntax, though each at-rule is a\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":407,"url":"https:\/\/css-tricks.com\/listless-navigation-using-css-to-do-more-with-less\/","url_meta":{"origin":363745,"position":5},"title":"Listless Navigation – Using CSS To Do More With Less","date":"December 13, 2007","format":false,"excerpt":"The best part about CSS is that it allows web developers to achieve more with less. What exactly does that mean? Well, for a start, CSS allows developers to: Code much, much less XHTML Separate website formatting from content Control as much of the website theme\/design as the developer allows\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363745"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/249661"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=363745"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363745\/revisions"}],"predecessor-version":[{"id":365148,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363745\/revisions\/365148"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/363751"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=363745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=363745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=363745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}The XHTML way of writing HTML<\/h3>\n\n\n
id<\/code> and name<\/code> attributes, like a<\/code>, applet<\/code>, form<\/code>, frame<\/code>, iframe<\/code>, img<\/code>, and map<\/code>, should only use id<\/code>.<\/li>The HTML way of writing HTML<\/h3>\n\n\n
id<\/code> and name<\/code> attributes may not only use id<\/code>.<\/li>name<\/code> attribute values, the case of pre-defined value sets, and hexadecimal entity references:<\/p>\n\n\n\nExamples<\/h3>\n\n\n
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<\/p>\n<ul>\n <li>Praesent augue nisl<\/li>\n <li>Lobortis nec bibendum ut<\/li>\n <li>Dictum ac quam<\/li>\n<\/ul><\/code><\/pre>\n\n\n\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n<ul>\n <li>Praesent augue nisl\n <li>Lobortis nec bibendum ut\n <li>Dictum ac quam\n<\/ul><\/code><\/pre>\n\n\n\n<br \/><\/code><\/pre>\n\n\n\n<br><\/code><\/pre>\n\n\n\n<A HREF=\"https:\/\/css-tricks.com\/\">CSS-Tricks<\/A><\/code><\/pre>\n\n\n\n<A HREF=https:\/\/css-tricks.com\/>CSS-Tricks<\/A><\/code><\/pre>\n\n\n\ninput<\/code> element as required and read-only, like this:<\/p>\n\n\n\n<input type=\"text\" required=\"required\" readonly=\"readonly\"><\/code><\/pre>\n\n\n\n<input type=\"text\" required readonly><\/code><\/pre>\n\n\n\ntext<\/code> is the default for the type<\/code> attribute here (there are more such unneeded attribute\u2013value combinations<\/a>), you get an example that shows HTML in all its minimal beauty:<\/p>\n\n\n\n<input required readonly><\/code><\/pre>\n\n\nWrite HTML, the HTML way<\/h3>\n\n\n
<table><\/code> elements for layout, packed with presentational code, largely invalid (as it\u2019s still today<\/a>), with wildly varying user agent support. Yet it\u2019s the essence<\/em> of what we would have wanted to keep if XML and XHTML hadn\u2019t come around.<\/p>\n\n\n\n