HTML Snippets

Welcome to this Article.

Feel free to copy and paste. That is the ultimate purpose.

HTML Boilerplate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <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 & 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.

Mozilla HTML developer resources
W3schools HTML refernece
Codecademy concepts reference