Table of Contents
HTML
These are my notes while taking the The Complete Web Developer Zero to Mastery course by Andrei Neagoie on ZTM Academy.
Getting started with a HTML document
MDN HTML Document
HTML Cheat Sheet by Stanford University
HTML, HyperText Markup Language, is a markup language that lays out the structure of your content.
In Visual Studio Code, you can press ! and enter to get a boilerplate HTML template to start with.
Basic Tags
<!DOCTYPE html>is required at the beginning of every HTML document.
<html> </html>wraps all of the content on the entire page and can be referred to as the root element.
<head> </head>is a container for metadata on the site used for SEO, title, styling tags, any script tags that are needed to run the page, and others.
<link rel="" href="">specifies the relationship between the current HTML document and an external resource, like a stylesheet or icon. The rel attribute takes the type of link you are importing, such as stylesheet, and the href attribute is the location of the link relative to the current file.
<meta charset="utf-8">sets the default character set for your page and includes most characters from many written languages.
<title> </title>sets the title of your page, which appears in the browser tab your page is loaded in.
<style> </style>allows you to add css directly into your html without linking an outside css file.
<body> </body>is a container for everything your user sees on the page.
<script> </script>tags are where javascript is written or linked and can be placed at the bottom, before the closing body tag, so that they do not block the rendering of the html.
Sectioning Tags
<address> </address>formats the contact information correctly for an address or a person or company.
<article> </article>is used for self-contained posts that are from newspapers, magazines, forums, etc.
<aside> </aside>content is indirectly related to the content of the page
<div> </div>generic container element for flow of the page.
<header> </header>specifies the introductory content, such as a logo, navigation bar, search, and others.
<nav> </nav>is the section where the navigation links are placed.
<main> </main>is where the main content of your document lies.
<section> </section>allows you to group your content into sections that are related.
<footer> </footer>is usually located at the bottom of the page and typically contains information about the author, copyright data, or links.
<h1> </h1>are section heading tags and go from h1 being the largest or highest section to h6 being the smallest or lowest heading.
Text Content Tags
<blockquote> </blockquote>indicated an extended quotation. A cite attribute may be added to link a source URL.
<dd> </dd>gives the description, definition, or value of the previous term, used with dl (definition list tag) and a dt (definition term) tag.
<figcaption> </figcaption>is a caption or legend describing the content before it (the parent container).
<figure> </figure>is self-contained content that can include a figcaption element below it.
<hr> </hr>stands for horizontal rule and creates a line horizontally across the page to break up the content.
<li> </li>is used inside of and ol or ul tag to represent and item in a list.
<ol> </ol>is an ordered list tag that wraps the list items (li tag) by numbering them.
<p> </p>stands for paragraph tag to wrap your paragraph text in.
<pre> </pre>preformatted text which is presented exactly as written inside the HTML file.
<ul> </ul>is an unordered list tag that wraps the list items (li tag) without numbering them, default styling is bullet points.
Inline Text Tags
<a href=""> </a>stands for anchor element and creates a hyperlink to another place. The href attribute is used to add the location relative to the HTML file.
<abbr> </abbr>is an abbreviation or acronym and has an optional title attribute than can a description for the abbreviation.
<br />adds a line break into the document.
<code> </code>styles the content in a way that indicates it is machine or computer code.
<i> </i>italic text typically text that is set off from the normal text.
<kbd> </kbd>Keyboard Input element is a span of inline text indicating user input from a keyboard, voice input, or other text entry device.
<mark> </mark>marked or highlighted text.
<q> </q>short inline quote, usually styled with quotes surrounding the text.
<s> </s>strike-through element adds a line through the text.
<small> </small>side-comments or small print, such as copyright or legal text.
<span> </span>generic container for grouping elements for styling purposes.
<strong> </strong>indicated the content has a strong importance and is usually rendered in bold type.
<sub> </sub>subscript type for typographical content.
<sup> </sup>superscript type for typographical content.
<tt> </tt>styles the text in the default monospace font face.
<var> </var>is a Variable Element and formats the content to stand out in a mathematical expression or programming content.
<wbr> </wbr>allows you to place a word break within your text, where the browser may not break a line at that location.
Image and multimedia Tags
<audio src=""> </audio>used to embed sound content with a source tag or an src attribute with the location of the file.
<img src="" alt="" />embeds an image with a src attribute with the location of the file.
<track> </track>is used with audio and video tags to specify timed text tracks.
<video src=""> </video>embeds a media player for video playback with a source tag or an src attribute with the location of the file.
<iframe src=""> </iframe>embeds another HTML page into the current one.
<canvas src=""> </canvas>allows users to drag graphics and animations.
Form Tags
<button> </button>is a clickable button, which can be used anywhere, but in forms the type attribute is added with "submit" to send the form.
<datalist> </datalist>contains a set of option elements that are available for other controls.
<fieldset> </fieldset>used to group controls and labels.
<form> </form>wraps the entire form content and has an action attribute that tells the server to "POST" the data among other options.
<input> </input>is an interactive area where the user can type into based on the attribute type given to the input; text, number, email, are just a few of the types available.
<label> </label>gives a caption or label for an item within the form.
<legend> </legend>a caption or label for fieldset element.
<meter> </meter>represents the data given in the attributes as a meter. Some attributes are min, max, low, high, value, to name a few.
<optgroup> </optgroup>groups options within a select element.
<option> </option>defines an item in a select, optgroup, or datalist element.
<output> </output>is a container where a calculation or output can be displayed.
<progress> </progress>is an indicator showing the completion progress, usually displayed as a progress bar.
<select> </select>provides a menu of options, used with option element.
<textarea> </textarea>is a multi-line, resizable text box that allows users to write a sizable amount of text like a comment.