I promise there will be a quick explanation here at some point about what tags are and what "self-closing" means
BASIC TAGS
<!DOCTYPE html> Required document type declaration at the start of any HTML document. Unless specified otherwise, the browser will assume HTML5 (for now!). Self-closing.
<html> Should contain all other elements of an HTML document.
<head> Contains metadata like the title of the document and links to stylesheets.
<title> Contains the title of a page, as seen on a browser tab. Must be contained in the <head> element.
<body> The whole enchilada. Everything displayed on the page is in here.
<!-- (insert comment here) --> Used to add comments. Self-closing.
<h1> through <h6> Used to create headings. h1 is for main headings, 2-6 are subheadings.
<p> Paragraphs. Self-explanatory.
<span> Contains short pieces of text or other HTML. Used to separate small pieces of content that are on the same line as other content.
<div> A way of grouping elements together. These and spans don’t change anything visually unless a CSS style is applied.
<em> (Typically) italicises text inside it.
<strong> (Typically) boldens text inside it.
<br> Line break. Self-closing.
LISTS
<ul> Contains an unordered (bulleted) list. This page is full of them!
You can nest lists by simply starting a new list within an existing list tag.
The different nest levels get different icons!
<ol> Contains an ordered (numbered) list.
This is what they look like in practice.
They're automatically numbered, so you can just worry about the list items themselves!
<li> Marks a list item. Should always be a direct child of <ul> or <ol>. This page is full of them!
MEDIA
<img> (or </img>) Displays an image. Self-closing. Requires a src attribute.
You can use gifs, too!
<video> Displays a video. Requires a src attribute. Can include text between tags that will show if the video cannot load (such as 'Video not supported').
Neocities doesn't support videos so just imagine there's a video here :)
<a> Creates a hyperlink on the text within the tags. Requires a href attribute. Can contain an image tag or nearly any other element instead of text. In this case, any text will be displayed if the image cannot load. The a stands for anchor! This link will take you to the top of the page!
BASIC ATTRIBUTES
id Used to add a name to content (such as divs) to specify when referencing them.
src Indicates the source file or URL of an image or video.
alt Contains alt text for an image.
width Sets the width of a video.
height Sets the height of a video.
controls Instructs the browser to include basic video controls (pause, play, and skip).
href Determines the destination of a hyperlink. Can also link to the <id> of an element in the current document (using # before the <id>) or a new html file in the same folder as the current one (using ./ at the start of the address).
target Determines where a link will be opened. A value of “_blank” will open in a new tab (or window, in an older browser).
TABLES
<table> Contains all tabular data, made up of the following tags:
<tr> Adds a table row.
<th> Adds a table heading. Must be contained within a row.
<td> Contains table data. Appears as columns. Must be contained within a row.
<tbody> Used to enclose all parts of a table outside of the head and foot.
<thead> Used to section off a table’s head. Only for column headings!
<tfoot> Used to section off the bottom of a table (such as for totals or other data results).
scope Takes one of two values: row or col, making it clear which a heading applies to.
rowspan Makes a table item take up multiple rows, set by an integer.
colspan Makes a table item take up multiple columns, set by an integer.
Example Table
This is a table heading!
This heading takes up 2 columns!
Here's a bit of data.
Your data boxes will automatically resize unless you set them with CSS.
Make sure you have the same number of columns in each row!
This data point takes up 2 rows!
Be sure to take into account any rowspans or colspans you've used.
When using rowspan, your next row should have fewer <td> elements to make up the difference.
You can leave also boxes empty, like this one ----->
Here's the footer, at the bottom.
It looks a lot like a regular row, but you can change that with CSS!
Use it for totals, results, and other stuff like that.
FORMS
<form> Creates a form, used to collect information and send it to an external source.* Requires the action and method attributes.
action Tells the form where to send the information. Can be a URL or another local document.
method method Tells the form what to do with the information using an HTTP verb (i.e. PUT, GET, POST, DELETE, etc.). Here's more info on HTTP verbs!
<input> Creates an input field. Requires type and name attributes. Self-closing.
type Specifies what kind of input a field can accept. Default value is “text.” Other values include:
number
password (replaces text with * automatically!)
range
checkbox**
radio**
submit (the input’s value will appear as the text on the submit button. If the input’s value is empty, “Submit” will appear as the default.)
name Names the input field. (Duh)
value A built-in attribute that holds whatever is submitted in the input field. Can be assigned a default value.
step Adds arrows/adjusts sliders to set the value incrementally.***
min Sets the minimum value for a numerical input. Warns the user when attempting to submit below the min.
max Sets the maximum value for a numerical input. Warns the user when attempting to submit above the max.
list Connects an input to a <datalist> when equal to the list’s id.
placeholder Adds a value that can be typed over and won’t be submitted.
<label> Labels an <input> for the user. To associate the two, the <input> must have an id and the <label> must have a for attribute with the same value as the id. Bonus: clicking a label in the browser automatically selects the related input field!
for Connects a label to an input by holding the same value as the input’s id.
<select> Creates a dropdown list. By default, only one option can be selected. Requires a name attribute.
<datalist> Creates a datalist for a text <input> to pull from. Must be connected via id.
<option> Holds an option for a dropdown or datalist. Requires a value attribute.
<textarea> Creates a larger area for text input. Any text between the tags will be set as the default.
rows Determines the number of rows in a text area.
cols Determines the number of columns in a text area.
FORM VALIDATION
A quick note: there are 2 kinds of validation! Server-side validation is when data is sent to an external machine for processing (as with login info, etc.), while client-side validation happens within the browser, saving time and protecting the server from potential malicious code or data. Everything covered on this page is client-side validation.
required Makes it so an input must be filled in before submitting the form. If the user attempts to submit anyway, the browser will show a notice like “please fill out this field.”
minlength Sets the minimum character count for a text input. Warns the user if they attempt to submit under the limit.
maxlength Sets the maximum character count for a text input. Won’t let the user type more than the maximum.
pattern Sets a regular expression (regex) that an input must follow. For example, a regex of “[0-9]{14,16}” indicates a credit card number: a set of 14-16 numerals from 0-9. For another example, a regex of "[a-zA-Z0-9]+" limits the input to alphanumeric characters (i.e. no special characters like !?&*%) Helpful Link!
SEMANTIC HTML
Semantic HTML is all about choosing elements based on their meaning. Therefore, tags like <div> or <span> are not semantic since they have no explicit meaning, and should be avoided in favor of alternatives like <main> or <header>. Why do we do this? There are several reasons, including accessibility, SEO (search engine optimization), and just making the code easier to understand. Most semantic tags have no effect on the visual presentation of the page, but help both people and machines understand the code better!
<header> Denotes a header, i.e. the content at the top of a page.
<nav> Denotes navigational links such as menus or tables of contents. Can be used inside a header or on its own.
<main> Holds the main content of a page.
<footer> Contains footer content such as copyright info, a sitemap, terms of use, contact info, or links to the top of the page.
<section> Used to create sections like an introduction, contact info, chapters, or headings; anything where a more specific element can’t be found. A section should make sense in the outline of a document, whereas <div> is used for styling.
<article> Contains an article (duh).
<aside> Marks information that can enhance the main content but isn’t necessary to understand said content. I.e. bibliographies, end notes, comments, pull quotes, editorial sidebars, or additional information.
<figure> Holds an image/illustration/diagram/code snippet referenced by the main document.
<figcaption> Adds a caption to a figure. Typically goes inside the figure tag.
<audio> Creates an audio element. Requires a . Can include fallback content like videos.
<source> Adds a source for an audio element using the src attribute. Can also include a type attribute with a value like “audio/mp3” to let the browser know what kind of file it is. You should probably include controls too.
autoplay Sets an audio or video file to play automatically.
