Home Thanks Collection How Do I? History Of Site Blog 3D Prints HTML tags

HTML5 tags

You may be wondering what HTML is, HTML or Hypertext Markup Language is the coding language to code every website you've ever visited including this one. On this site, I will show all of the basic and more advanced HTML tags that can be used in your code, along with what they do.

Before I show you the html tags you should probably know how to set up a html file. If you don't know how to do this already it's pretty simple to start you're going to want to open a new notepad file. The steps are below:

notepad

Now that you've opened a new note in Notepad or any text editor, go to the top left corner and you should see a file section. Click on or hover over the file button and select "Save As" (Alternatively you can press Ctrl + Shift + S)

Save As

After selecting "Save as" a new window will pop up where you can change the file's name and where to save it. The main part of this is saving the original .txt file to a .html file, this can be done by changing the "Save as type:" to "All files" to allow the computer to save the file as HTML. Choose whatever name for the file you want, but at the end make sure to change the file extension to .html then press "Save".

Changing the file type

To set up the document so you can start coding you'll need to get the basic structure of every HTML file first. This consists of a <!DOCTYPE>, <html>, <head>, and <body>. These "tags" set up the structure, the doctype tag defines the document type the HTML tag defines the start of the page, and the head tag contains the metadata/information about the site. Finally, the body tag defines the main "body" of the site aka where everything you see is stored. In addition, these tags need an end so they are ended with a duplicate tag with a "/" at the beginning, for example, the end of the HTML document has a </html> tag to signify that's the end of the code.

HTML structure

Basic HTML

<!DOCTYPE>:   Defines the document type
<html>:   The start of the HTML document
<head>:   Contains metadata/information for the document
<title>:   Defines the title of the site/document
<body>:   The main part of the html document/site (holds the stuff you see)
<h1> to <h6>:   HTML headers (1 = biggest 6 = smallest)
<p>:   The text that is displayed on the site
<br>:   A single line break
<hr>:   A thematic break (It makes a straight horizontal line in the page)
<!--...-->:   Adds a comment to the code

Formating

<abbr>:   Allows for creating your own abbreviations
<address>:   Defines contact information about an author or person
<b>:   Makes text bold
<bdi>:   Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>:   Makes text go right to left (backwards text)
<blockquote>:   Indents a section of text that is quoted from another source
<cite>:   Italicises text to cite them
<code>:   Allows for the document to display code without running it
<del>:   Crosses out text (to show its been deleted)
<em>:   Emphasises a word or text (italicises it)
<i>:   Italicises text or a word
<ins>:   Underlines text
<kbd>:   Allows the document to show keyboard shortcuts or keys (Used in paragraph 3 of this site)
<mark>:   Highlights text
<meter>:   Creates a scalable meter with data
<pre>:   Allows for text to keep the pauses and spaces (browser doesn't automatically fix it)
<progress>:   Creates a progress bar made with data
<q>:   Puts small quotations around text
<samp>:   Prints text like a computer program would (CMD text)
<small>:   Prints text smaller
<strong>:   Bolds and italicises text
<sub>:   Subscripts text (This tag Subscripts text)
<sup>:   Superscripts text (This tag Superscripts text)
<template>:   Creates an invisible template that can hold content, use javascript to show it
<var>:   Defines a variable (mainly used for math equations, you can't assign it a value like most var)

Forms and inputs

<form>:   Creates a form for a site
<input>:   Creates a input