<!DOCTYPE html> |
All HTML documents must start with a document type declaration
|
N/A |
<html></html> |
Required for HTML documents |
|
<body></body> |
The body element contains all the contents of an HTML document,
such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
|
|
<h1></h1> to <h6></h6> |
Headings from most important to least important. Good practice
is to never jump multiple headings at a time
|
|
<head></head> |
The head element contains general information about an HTML page
that isn't displayed on the page itself. This information is
called metadata and includes things like the title of the HTML
document and links to stylesheets.
|
 |
<title></title> |
The title tag defines the title of the document. The title must
be text-only, and it is shown in the browser's title bar or in
the page's tab
|
View image above |
<div></div> |
A container element, holds no meaning. Normally its given a
class or id attribute to define what the div is.
|
 |
<p></p> |
Used to insert text such as a paragraph |
 |
<span></span> |
This is a inline container thats purpose is to group specific
text. Comes in handy if you want to style a specfic part of
text.
|
View image above |
<strong></strong> and <em></em> |
Strong is used to Bold text and em is used to emphasise text.
|
 |
<ol></ol> |
Ordered list, aka numbered. |
 |
<ul></ul> |
Unordered list, aka bullet points |
View image above |
<li></li> |
The actual list data. |
View image above |
<img/> |
Used to add a image for content. If a image is just for style
purposes, use CSS instead. The img tag needs the attributes src
to link the image. The alt tag is used incase the img cant load.
|
 |
<video></video> |
Used to add a video for content. Theres several attributes such
as controls.
|
 |
<a></a> |
The anchor tag is used to link the same page to another
document, or to a website using href attribute.
|
 |
<!--This is a comment--> |
Comments are used to help you and others read the code. Anything
commented will not display on document, only in source code or
DOM.
|
 |
<table></table> |
The table container |
 |
<thead></thead> |
Table head is where the table headers go. |
View image above |
<tbody></tbody> |
Table body is where the table content goes |
View image above |
<tr></tr> |
Table row is the row that well hold the table data. |
View image above |
<th></th> |
Table header |
View image above |
<td></td> |
Table data, or cell |
View image above |