=============================================================================== notryan.com/blog/013.txt Fri, 08 May 2020 Ryan Jacobs 14:54:20 -0700 Minimalist HTML . . . . . . . . =============================================================================== This article is about HTML5. Note: Some of these *might* break spec, but are so commonplace that they might as well be in here. For example, is required by the HTML spec, but 99% of all browsers will make up something for you if it isn't supplied. Note: I wouldn't use this advice on production websites. But for quick development, here are some tips that help me. ------------------------------------------------------------------------------- Update 1: Why? Well maybe you want to write a temperature display in the least amount of HTML, packing a lot of punch onto an ESP8266 or similar device -- and... have it work on a modern browser for easy debugging and flashing. That's one idea. Other reasons include being a minimalist punk. Update 2: Huh. This spawned a lot of discussion on HN. And I've learned a decent bit today. I'll post a follow-up soon for posterity's sake. Two things real quick. I implied that you could drop closing tags for _all_ tags, but in reality, this only works for _some_ tags. Look up "Content Categories" as for why. Secondly, the <doctype> tag *is* mandtory for the HTML5 spec. I already mentioned this, but its importance was not stressed enough. To trigger HTML5 specific-behavior, you will need to include it. Your document will _probably_ render without it, but it might not render what you intended. Omiting it will cause the browser to render the page in "quirks mode". Again, it all depends on what you are doing. Update 3: Someone posted this article on Reddit. Here's a couple of additional tips that I've learned by reading through the comments: * You can set the text encoding type via an HTTP response header instead of using <meta charset="utf-8">. Use "Content-Type: plain/text; charset=utf-8" * On modern mobile devices, you actually do not need 'initial-scale=1' anymore. You can get away with: <meta name=viewport content="width=device-width"> Omit the quotes if you'd like to. It will still be valid HTML5. ------------------------------------------------------------------------------- Here we go: * Text outside of tags is acceptable in modern browsers. * <!DOCTYPE html> *is* required by the HTML spec (but not the XHTML spec). Most of browsers will not care if you omit it. It was created for backwards compatibility with prior HTML versions. You can omit it in minimal documents. * <html>, <head>, <body> are not required by modern browsers. Your document will render fine without them. You don't need to wrap your document with <html> and <body>. * You don't need to close your tags. For example, create a document, add <p>, add some content, and then end the document without providing the closing </p> tag. The browser will construct a DOM with a <p></p> element. Closing tags will be generated for you, in a nested fashion. This lets you to do things like this: <html> <head> <meta http-requiv="refresh" content="0; https://example.com"> (Although, meta redirects aren't even spec compliant with W3C... but alas, that's a can of worms for another day...) * Quotes are optional for tag attributes. For example, <a href=example.com> (Of course, there must be no spaces, etc.) * Both single-quotes and double-quotes are valid for tag attributes. This is useful for producing valid HTML output in programs without resorting to escaped double-quote. For example, in the C language: printf("<h1 style='color: green'>Hi there!</h1>\n"); * If you do not define <meta charset="utf-8">, then most browsers will default to ASCII or Windows-1252. So if you are confidently in the ASCII range, skip the declaration. * Using a preformatted block (<pre>) of links is a handy way to introduce automatic line breaks. For example, this will render nicely: <pre> * <a href=#>link 1</a> * <a href=#>link 2</a> * <a href=#>link 3</a> </pre> Though, keep your links short and be mindful that your text will not wrap. I like using this technique to generate stupid simple index.html files in BASH: #!/bin/bash gen() { echo "<pre>" for f in *; do echo "* <a href='$f'>$f</a>" done echo "</pre>" } gen | tee index.html This works with filenames containing spaces... but not single quotes. Modify it for your use cases. * Add this tag to support mobile views: <meta name=viewport content="width=device-width, initial-scale=1"> This snippet is copy and pasted a whole lot around the web. Most people don't explain how it actually functions though. "width" sets the initial width to the mobile's physical display width in 100% pixels. This is instead of a virtual viewport. This will ensure that the max-width property works properly. Tags such as <p> have an implicit `max-width: auto`. Now their content will flow properly and wrap to the display's dimensions. "initial-scale" sets the initial zoom to a more sensible value, so that high DPI screens (i.e. smart phones) will fill the screen properly. * You can skip out on "http:" or "https:" when defining your references by using the shorthand notation "//" which means "use the current protocol". For example: <a href="//github.com/someuser/repo">here is a link</a> ------------------------------------------------------------------------------- Thanks for reading. Last of all, if you are currently reading on a mobile device, this website was served to you via server.c, which you can find at the root of this site. I detected your User-Agent as mobile and served you an HTML version of this text document to prevent text wrapping. The HTML document was produced as "Minimal HTML" by mobile.c, which you can also find at the root of this site. I apologize if 80-column text is hard to read on your phone. But I don't want to deal with two different versions of my site. I like plaintext. I like formatting it exactly how I want. You're seeing it like you would have on the desktop. UPDATES: #1 - 5:45 PM, 5/8/20 - Description on mobile viewports and a why bit. #2 - 7:40 PM, 5/8/20 - Blurb about corrections and a follow-up. #3 - 2:00 PM, 5/9/20 - Include tips from Reddit at the top. Add "//" tip.