Minimal Base.html(basehtml.xyz)
basehtml.xyz
Minimal Base.html
https://basehtml.xyz/
5 comments
Can confirm that ‘initial-scale=1.0’ is still meaningfully important. Mostly for mobile devices (including Safari on still in-use versions of iOS)
To save you a click to the dedicated website, this is all there is to it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<title>Minimal base.html</title>
</head>
</html>Thanks for sharing but the body tag was missing.
so here's the complete one:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content=""> <title>Minimal base.html</title> </head> <body> </body> </html>
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="description" content=""> <title>Minimal base.html</title> </head> <body> </body> </html>
Another, less network intensive, way to quickly produce an html starting boilerplate, is to use a snippet tool in your editor, like Emmet, https://www.emmet.io/.
My bang snippet, `! + <tab>`, outputs:
My bang snippet, `! + <tab>`, outputs:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/main.css" />
<meta
name="description"
content="" />
<meta name="author" content="Brian Zelip" />
<link rel="author" href="https://zelip.me" />
</head>
<body>
</body>
</html>
```FYI: the trailing slash is completely useless on HTML tags in the HTML serialisation. It doesn’t close HTML tags, it’s just ignored by the parser for XML compatibility. I advise against including it, because it’s simple visual noise, and misleading (people may come to think they can close tags that way, as in XML; but you can’t, and it’s only valid on empty elements like <meta>, <link> and <img>).
I'm used to call this HTML5 boilerplate. So that's the way I google when I actually need something like this.
https://github.com/h5bp/html5-boilerplate/blob/master/src/in...
https://github.com/h5bp/html5-boilerplate/blob/master/src/in...
Don't most editors have snippets for this?
----
This was basically always the default for IE, and for almost the last decade has been, I think, pretty superfluous. It’s a holdover from IE7–9 days, and to instruct those extremely rare devices which had changed the actual browser default (which was never easy to do, but which is extremely difficult by IE11) not to operate in compatibility mode for this site.
Plus IE is dead, so you shouldn’t care about IE to any meaningful extent anyway.
----
<html>, <head> and <body> elements can be omitted if they have no attributes. I like to omit them.
----
Unless you’re careful about this, it’s easy to do more harm than good. I’m not convinced it belongs in an “absolute minimum base.html”.
----
And one more that I’m not certain about: the `, initial-scale=1.0` in the viewport declaration. I think it’s been unnecessary for the past five or six years, that it was basically just a way of working around a bug in iOS Safari that has since been fixed, but I don’t have any iOS device handy with which I can test this.
This is my typical starting point: