back

how to html

page structure

here's the minimal requirement for a page:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>very good page</title>
    </head>
    <body>
        <!-- whatever you want! -->
    </body>
</html>

you can save this to a file ending in .html if you want. if you then open it in a browser you'll see...

...oh that's not very much. here's what this does:

<!DOCTYPE html> is the doctype. it tells the browser this is html5, not some other version like 4.1, and magically prevents quirks in browsers.
<html> wraps the page. you might notice the </html> later: that's the end. the additional / to mark the end of something is the general pattern.
<head> contains information about the page:
- <meta charset="utf-8" /> tells it to use unicode, because for some reason that still isn't the default. here the slash being at the end means it doesn't have any content or closing tag - there's no such thing as </meta>.
- the "viewport" <meta /> makes it not super tiny on phones etc.
- <title> gets put in the tab label - you'll notice not on the page itself.
<body>'s where you put the actual Stuff on the page! you only ever have one of these.
 wraps comments. these are just for you, they don't get put on the page.

you technically don't need to explicitly mark <html> or <head> or <body>, the browser will do it for you, but it's a good idea to anyway.

now let's add actually Useful stuff.

basic formatting

like paragraphs! those are fun. to make a paragraph, wrap it in a <p>...</p>.

<body>
    <p>wheeeee im a paragraph</p>
    <p>so am i! :3</p>
</body>

ssy you want to have fancy bold or italic text. there sre two ways to do this:

	'regular'	semantic (emphasis)
bold	`<b>`	`<strong>`
italic	`<i>`	`<em>`

the 'regular' ones are for when you just want the formatting:

<p><b>HTML</b> <i>n.</i> HyperText Markup Language</p>

the other two specifically mean you're emphasizing something:

<p><strong>Warning!</strong> Do <em>not</em> eat too many pickles</p>

there's a similar distinction for underline and ~~strikethrough~~:

	'regular'	semantic
underline	-	`<u>` `<ins>`
strikethrough	`<s>`	`<del>`

there is no non-meaningful way to underline stuff without using Magic that i'll tell you about later. <u> is for crap like *checks notes*

<u>speling</u> <u>erors</u>

<ins> and <del> mark inserted and deleted text.

another thing you can do is make headings. there are six levels called <h1> through <h6>.

<h1>how to html</h1>
<h2>Chapter 37.</h2>
<!-- etc -->