<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Home of an independent developer. Find programming projects, games, and work experience on this website.">
<title>Sample title here!</title>
<!-- .ico is a file type for icons. Used for backwards compatibility, but one can use .gif or .png if they wish. -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- This links to another file for style stuff, but one can use the STYLE & /STYLE tags instead. -->
<link rel="stylesheet" href="style.css">
<!-- Links to JavaScript. If you want JavaScript in HTML, use SCRIPT and /SCRIPT tags at the end of the BODY tag instead. -->
<script src="script.js"></script>
</head>
<body>
<header>
<h1>Stuff at the top</h1>
</header>
<p>Stuff for the page</p>
<footer>
<p>Stuff at the bottom</p>
</footer>
</body>
</html>
Headers.
<!-- Make sure to use headers in decending order. Makes it easy on screen readers and other coders. -->
<h1>Header here</h1>
<h2>Header here</h2>
<h3>Header here</h3>
<h4>Header here</h4>
<h5>Header here</h5>
<h6>Header here</h6>
Text.
<!-- There are multiple ways to display text. Here are a couple of ways to do it: -->
<!-- p stands for paragraph. It is the most frequently used text tag in HTML. -->
<p>Text here</p>
<!-- noscript does what it says. If scripts are disabled or unsupported, it lists whatever is in the tags -->
<noscript>Text here</noscript>
Italics.
<!-- If your text needs a little slant then we got you covered! These both vertually do the same thing. -->
<i>slanted text here</i>
<em>slanted text here</em>
Bolded.
<!-- To get the bolded look of text, just use these! -->
<strong>Bold text here</strong>
<b>Bold text here</b>
<!-- samp is a little different. It is bolded, but it uses a monospaced font instead. It replicates computer output -->
<samp>Bold monospaced text here</samp>
Strike-through and adding.
<!-- You want a line to go through text. Hey, that is what this is for! -->
<s>deleted text here</s>
<del>deleted text here</del>
<strike>deleted text here</strike>
<!-- Adding things. Enough said. -->
<ins>added text here</ins>
Subscript and superscript (higher and lower).
<!-- Make your words higher! -->
<sup>Higher text here<sup>
<!-- Make your words lower! -->
<sub>Lower text here<sub>
Smaller and bigger text
<!-- make your text smaller than average -->
<small>Small text</small>
<!-- Depreciated for some reason, but still: make text bigger! -->
<big>Big text</big>
Acronyms (abbreviation).
<!-- In case you don't want to type a very long word every time, you can use this! On hover, displays title attribute. -->
<abbr title="full acronym">Text here</abbr>
<!-- Old acronym format. Used for compatibility. -->
<acronym title="full acronym"Text here></acronym>
Programming Look (code).
<!-- Make something look like a piece of code (copyable too!) with this handy tag. -->
<code>code text here</code>
<!-- The pre tags are short for "pre formatted text". It is used for long forms of code (for example, this) -->
<pre>code text here</pre>
Images.
<!-- Images are frequently used on websites to make the website look good. There are many ways for a website to use an image. -->
<img src="link to where the image is located on the website." alt="Text that is displayed if the image hasn't loaded yet or failed to load." />
<!-- Old image format. Harder to use and can only do SVG, PNG and JPEG. Could be used for compatibility. -->
<image href="link to where the image is located on the website." height="number" width="number" />
Videos.
<!-- Expensive on bandwidth, but is generally better at getting points across. Multiple sources can be put for compatibility. -->
<video controls>
<source src="reference to media.mp4" type="video/mp4" />
</video>
Audio.
<!-- Audio is used to (in neocities case) play music as a background or as ambiance. It can also serve as sound effects. -->
<audio controls src="audio source file">Text in case tags aren't supported</audio>
HyperLinks and contacts.
<!-- Hyperlinks are made to send a user to a different page of a website, to another website, to a specific file on a website, and other things! -->
<a href="FULL link here">Name here</a>
< The internet, back in the day, used E-mail and phone numbers for direct contact more often than text or social media. Here is how to replicate that! -->
<address>
<a href="mailto:Email@test.com">Text here</a>
<a href="tel:+11231231234">Text here</a>
</address>
Advanced use of tags.
I try to make these snippets as simple as possible, but sometimes you need something MORE. Check out these resources.