TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Fun Facts on Producing Minimal HTML

101 pointsby ryanmjacobsabout 5 years ago

20 comments

w0mbatabout 5 years ago
Ex-browser dev here. Please don&#x27;t ship invalid HTML like this.<p>Web standards specify how to render valid HTML in a standard way, and browsers have become better and better at that over the years.<p>Invalid HTML destroys all that. Each browser will have to guess how to repair and fill in the blanks on malformed incomplete tag soup, and there is no one right way to do that. Browser X will make different guesses from Browser Y, and the next version of each will be different too.<p>Please just write actual HTML that is valid and your website will render much more consistently and reliably across shifting platforms, browsers and versions. It is not the size of HTML that slows the web down anyway.
评论 #23121381 未加载
评论 #23121434 未加载
评论 #23121775 未加载
评论 #23123337 未加载
SahAssarabout 5 years ago
&gt; Text outside of tags is acceptable in modern browsers.<p>Please don&#x27;t. If it&#x27;s plaintext serve it as such and if it&#x27;s html serve it and format it as such.<p>&gt; &lt;!DOCTYPE html&gt; <i>is</i> required by the HTML spec<p>Yes, it is and do it. Disregard everything the author wrote after that on this point.<p>&gt; &lt;html&gt;, &lt;head&gt;, &lt;body&gt; are not required by modern browsers.<p>Agreed, they should be left behind. This is a valid HTML doc:<p><pre><code> &lt;!DOCTYPE html&gt; &lt;title&gt;test&lt;&#x2F;title&gt; &lt;p&gt;test doc here&lt;&#x2F;p&gt; </code></pre> &gt; You don&#x27;t need to close your tags.<p>Some tags need closing, some don&#x27;t. This is documented in the standard. Follow it, don&#x27;t just freestyle it.<p>&gt; If you do not define &lt;meta charset=&quot;utf-8&quot;&gt;, then most browsers will default to ASCII or Windows-1252. So if you are confidently in the ASCII range, skip the declaration.<p>Please don&#x27;t. Set the charset in your headers (and it should be utf-8 unless you have a very good reason).<p>&gt; Using a preformatted block (&lt;pre&gt;) of links<p>This is just bad. You have a list of links but you don&#x27;t use the exact element created for creating lists?
评论 #23122656 未加载
评论 #23122541 未加载
评论 #23121294 未加载
评论 #23122599 未加载
syrrimabout 5 years ago
Couple more tips for those who &#x2F;really&#x2F; want to slim down their html:<p>- opening &lt;a&gt; tags close the previous &lt;a&gt; tag... but without an href they do nothing. Use them as if they were closing &lt;a&gt;s to save on slashes<p>- &lt;select&gt;...&lt;select&gt; is completely equivalent in html to &lt;select&gt;...&lt;&#x2F;select&gt;. Save more slashes this way<p>- formatting elements won&#x27;t be closed automatically, they rear their head again like so many hydras until your burn the wounds with end tags. But! there&#x27;s a way around this: consider &#x27;&lt;div&gt;&lt;b&gt;&lt;b&gt;&lt;b&gt;&lt;b&gt;&lt;&#x2F;div&gt;&lt;&#x2F;b&gt;&lt;&#x2F;b&gt;&lt;&#x2F;b&gt;X&#x27;; that&#x27;s funny... why isn&#x27;t the X bold? it turns out that only three identical (down to attributes) formatting tags are remembered. Use this to your advantage when nesting identical formatting tags inside themselves.<p>- since we&#x27;re saving on slashes: &lt;table&gt; (while in a row, ie &lt;tr&gt;&lt;table&gt;) closes the last table, and opens a new one. You might think: &quot;I don&#x27;t want to start another table so soon!&quot; fear not! the browser will move anything you put in a table, above the start of the table, right up until you start putting cells in it. This also avoids having to open the table later, you can start &lt;tr&gt;ing right away.<p>- you saved characters by dropping the doctype... but was it worth it? only with a valid doctype declaration will you &lt;p&gt; tags be closed automatically when you open tables. Just 4 closing &lt;&#x2F;p&gt; tags will make you wish you included that doctype. still think it&#x27;s worth it?
评论 #23121509 未加载
btrettelabout 5 years ago
Practically speaking these optimizations won&#x27;t make much of a difference, but I still find them interesting. I have been keeping a list of similar optimizations. Here are some not in the linked article:<p>- Use relative URLs when possible, i.e., &#x2F;page.html, no need to specify the protocol.<p>- Use shorthand CSS properties like font, background, margin, border, padding, and list.<p>- Use lowercase tags as they compress better. See: <a href="https:&#x2F;&#x2F;encode.su&#x2F;threads&#x2F;1889-gzthermal-pseudo-thermal-view-of-Gzip-Deflate-compression-efficiency" rel="nofollow">https:&#x2F;&#x2F;encode.su&#x2F;threads&#x2F;1889-gzthermal-pseudo-thermal-view...</a><p>- Use shorthand hex colors.<p>These optimizations are harmless compared against some of the ones recommended in the linked article...
评论 #23128138 未加载
评论 #23121689 未加载
评论 #23121646 未加载
lhorieabout 5 years ago
These are certainly fun (in a for-teh-lulz sort of way), but production grade html minifiers actually use techniques like omitting quotes too. Many of the other techniques are highly questionable, so again, as a rule of thumb, if an html minifier doesn&#x27;t do it, you probably shouldn&#x27;t either<p>Also worth mentioning, the ultimate minimalism &quot;hack&quot; is to simply serve a txt or md file w&#x2F; Content-Type: text&#x2F;plain
_bxg1about 5 years ago
Please please please don&#x27;t write article text in preformatted blocks. It makes it impossible to read on mobile. Even reader mode doesn&#x27;t work, because it respects preformatting.
divbzeroabout 5 years ago
From my own notes on minimal HTML5…<p>Closing tags are optional for the following tags:<p><pre><code> html head body p dt dd li option thead th tbody tr td tfoot colgroup </code></pre> The following tags are self-closing and should <i>not</i> have closing tags:<p><pre><code> meta img input hr br </code></pre> Attributes can be left unquoted if the following characters don’t appear in the attribute value:<p>- Single quote (&#x27;)<p>- Double quote (&quot;)<p>- Space ( )<p>- Equal sign (=)<p>- Greater-than sign (&gt;)
评论 #23122577 未加载
thinkloopabout 5 years ago
&gt; &lt;meta name=viewport content=&quot;width=device-width, initial-scale=1&quot;&gt;<p>&gt; This snippet is copy and pasted a whole lot around the web. Most people don&#x27;t explain how it actually functions though. &quot;width&quot; sets the initial width to the mobile&#x27;s physical display width in 100% pixels.<p>I still don&#x27;t get this - if the browser is the width of the device, why doesn&#x27;t the site flow to 100% of the browser?
评论 #23122648 未加载
评论 #23121172 未加载
ShaneMcGowanabout 5 years ago
This is gross, please don&#x27;t tell people this stuff, pleeeeease
评论 #23121093 未加载
mindctrl-orgabout 5 years ago
&gt; You don&#x27;t need to close your tags.<p>Not always true. I’ve run into numerous issues caused by the lack of closing tags, and just did earlier this week.
评论 #23121176 未加载
评论 #23121190 未加载
panicabout 5 years ago
Another helpful meta tag is<p><pre><code> &lt;meta charset=utf-8&gt; </code></pre> Without this, your document may be interpreted using an implementation-defined ASCII-like encoding (e.g., windows-1252 for English-speaking locales) if served without a Content-Type.
treeman79about 5 years ago
Reader view in iPhone is broken on this page.<p>My vision is poor, and reader view is an amazing help.
评论 #23122547 未加载
jraphabout 5 years ago
I&#x27;m conflicted on omitting tags to make pages lighter. I&#x27;m sensitive to making things lighteight but I really do like the XHTML parser catching dumb errors that would be silent bugs in HTML.<p>I also like the readability of a document where all closing tags are here. Some tricks can arguably make the code more readable (ommitting head and body) but some tricks require effort to understand if you are not used to them. We write code for human beings first.<p>Maybe an HTML minimizer could be used if one wants to save bytes?
评论 #23123715 未加载
vpzomabout 5 years ago
I think there are some differences in rendering if you omit the DOCTYPE<p>Also, why?
评论 #23121320 未加载
hannobabout 5 years ago
A less well known tip if you want to micro-optimize html: Use protocol-relative external links.<p>If your own site is https only (which it should be) then &lt;a href=&quot;&#x2F;&#x2F;example.org&#x2F;&quot;&gt;example&lt;&#x2F;a&gt; is the same as &lt;a href=&quot;<a href="https:&#x2F;&#x2F;example.org&#x2F;&quot;&gt;example&lt;&#x2F;a&gt;" rel="nofollow">https:&#x2F;&#x2F;example.org&#x2F;&quot;&gt;example&lt;&#x2F;a&gt;</a>
boznzabout 5 years ago
It&#x27;s never going to look nice but I have a couple of embedded devices with a few K of memory from 15 years ago still serving pages and still working fine in google and Firefox.<p>Nit-picking, but rather than saying &quot;99% of browsers&quot; (and I am not sure there are 100 browsers out there to get that particular stat) it would be best to just mention the ones it doesn&#x27;t work on.
MR4Dabout 5 years ago
I wonder why we don’t have Markdown browsers. Seems like that would help a ton.
评论 #23122459 未加载
emilfihlmanabout 5 years ago
It seems people are entirely missing the point of the exercise.
评论 #23121406 未加载
评论 #23121389 未加载
评论 #23121446 未加载
chrismorganabout 5 years ago
<p><pre><code> &lt;meta name=viewport content=&quot;width=device-width, initial-scale=1&quot;&gt; </code></pre> The `, initial-scale=1` has been unnecessary for a few years now (sorry, not searching for the citation now, hopefully you can find it if you’re interested), so it’s slimmer to use this instead:<p><pre><code> &lt;meta name=viewport content=&quot;width=device-width&quot;&gt; </code></pre> If you drop the quotes, it’ll parse the same way (and parsing is well-defined in HTML now, so you can be confident all browsers will handle all parsing the same) but be nominally non-conformant. Up to you how much you care about non-conformance, but I avoid writing non-conformant documents, though I do regularly hand-write minimal HTML (omitting html&#x2F;head&#x2F;body, skipping unnecessary closing tags, unquoting attribute values, <i>&amp;c.</i>)<p>----<p><pre><code> &lt;!DOCTYPE html&gt; </code></pre> I strongly recommend against omitting this, because removing it throws you into quirks mode.<p>Also I recommend spelling it `&lt;!doctype html&gt;`, because that will regularly save a byte or two in gzipping due to the much greater frequency of lowercase letters.<p>----<p><pre><code> &lt;meta charset=utf-8&gt; </code></pre> I strongly recommend keeping this; it’s a safe bet that your text editor is working in UTF-8, so specifying the charset thus ensures that if later on you insert some non-ASCII (e.g. pasting a quote that includes curly quotes) it will work properly.<p>You can also save one more byte by spelling this `&lt;meta charset=utf8&gt;`. There’s fun history around that in the encoding spec, where that used to not be a valid value, but based on observing people spelling it that way sometimes they added it. So it’s now valid, but particularly old browsers might not like it.<p>----<p>Using &lt;pre&gt; for line breaks? Please no. Just don’t do this. The side-effects are awful. Use &lt;br&gt; if line breaks is all you want.<p>----<p>&gt; <i>Both single-quotes and double-quotes are valid for tag parameters. This is useful for producing valid HTML output in programs without resorting to escaped double-quote.</i><p>I like to do minimal encoding. Within a quoted attribute value, the only characters that need to be escaped are &amp; and the particular quote used, so for an attribute that includes a large blob of JSON I like to use single quotes, so that I only need to escape single quotes and ampersands:<p><pre><code> &lt;a data-json=&#x27;{&quot;department&quot;:&quot;R&amp;amp;D&quot;}&#x27;&gt;…&lt;&#x2F;a&gt; </code></pre> This yields a smaller and more human-readable result, which is also nice.<p>----<p>&gt; <i>You don&#x27;t need to close your tags.</i><p>Well, there are three cases to consider here:<p>1. Self-closing tags like &lt;meta&gt;, which don’t <i>have</i> a closing tag (so it’s actively wrong to include one).<p>2. Tags for which the end-tag is optional, depending on what follows it, e.g. &lt;p&gt; doesn’t need &lt;&#x2F;p&gt; if it’s followed by various elements such as another &lt;p&gt;.<p>3. Non-conformant documents where the well-defined parsing behaviour just <i>happens</i> to produce what you want, despite what you’ve written being probably nonsensical and something where a human wouldn’t be sure what you meant.
johncmouserabout 5 years ago
not sure how right this is but this is on twitter <a href="https:&#x2F;&#x2F;twitter.com&#x2F;hncynic&#x2F;status&#x2F;1258916263562219520" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;hncynic&#x2F;status&#x2F;1258916263562219520</a>