Of course, right click and select View Page Source to see what this looks like. But I'll explain how I do things, and the rationale. I like my HTML being standards-compliant, and within that constraint I optimize for my own comfort.
So we start with the bare minimum for HTML5, the magic words that should be at the start of every document, to reassure the browser that all is OK in the world:
<!doctype html>
Then, something that is really optional, but feels nice to do and can maybe help with automatic hyphenation and the like. We specify the language of the document! (as an ISO short code) And that goes in the <html> element, so even though it's an optional and implicit element, we write it down for the lang attribute:
<html lang="en">
Then, the encoding. We want unicode to work always, regardless of web server configuration or defaults, so we make it explicit. UTF-8 is the standard and there is little reason to use anything else. All the text editors I use, save as UTF-8 by default:
<meta charset="utf-8">
That's technically part of the <head> element! But do I care about that? No. I know it's part of the <head>, the browser knows, and we understand each other when we talk about the <meta>. So yeah, I omit explicit <head> and <body> tags. It's perfectly standards compliant, and saves me typing.
Now this one is a bit of a mouthful, and I always copy-paste it (if I write it at all). It just makes the page a bit nicer in mobile phones:
<meta name="viewport" content="width=device-width,initial-scale=1">
Then, the title, which will appear on the tab or window:
<title>How I write HTML</title>
Some styling in CSS:
<style>
body {
max-width: 700px;
font-size: 14px;
}
img {
max-width: 100%;
display: block;
}
</style>
I add things as I go on and feel like it. I like setting the max-width as a minimum, because wide pages just look a bit bad when they stretch all the screen. And I don't like images to go wider than the rest of the content.
And finally, the actual content! And the body starts implicitly.
<h1>Some heading</h1> <p>Some paragraph. <p>Some other paragraph with a <a href="https://example.com">link</a>. <img alt="a picture I took in galicia" src="galicia1.jpg"> <ul> <li>A list item <li><b>Another</b> list item </ul>
Notice I don't close my paragraphs or list items. You can't have a paragraph inside a paragraph, or a list item inside another list item, so starting one implicitly closes the last one. It's standards-compliant, and less typing, so I take advantage of that. Don't believe me? Run the source of this page through the official W3C tester, and you will see there are no errors and no warnings. I also write the short "b" and "i" instead of "strong" and "em", because it's shorter and it does the same and I don't see the practical advantage in typing more. Screen readers as far as I know treat them the same, and to me strong and em(phasis) mean the same thing.
And that's it. It's easy, and simple. No need to run a markdown parser or anything, what I write is what the browser gets. Writing snippets of code is a bit annoying, because you need to escape < and >, but for normal text that is not an issue.