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

CSS Snippets

Welcome to this Article.

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

Thing 1

<html>
  <head>
    <style>
      
    </style>
  </head>
  
  <body>
    
  </body>
</html>

JavaScript Snippets

Welcome to this Article.

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

Clock (doesn't update constantly)

<script>
  const CurrentTime = new Date();
  document.write("<br>" + CurrentTime);
</script>

Thing 2


        
        

            
Godot Snippets

        

        
Welcome to this Article.

        
Godot has a lot of different ways to create things in code. If you need anything, here it is.

        

        
Thing 1

        

        

        
Thing 2