Elements

A listing of the HTML elements with a brief description next to each. Click the element names for more information.

a - navigation link
abbr - describe an abbreviation in text
address - contact information
area - image map hotspot link
article - container for one or more related sentences or paragraphs
aside - related but not integral content
audio - sound object with optional player controls
b - make text bold
base - specify a base URL
bdi - isolate text for formatting rtl(right to left) reading languages
bdo - text direction override
blockquote - quoted material from another source
body - parent container for all of the content in the document
br - break line in text
button - all-purpose button
canvas - drawing and animation rendering element
caption - table caption
cite - cite a source
code - display source code
col - lends characteristics to a table column
colgroup - create a grouping of table columns
data - offer a machine readable version of content
datalist - data list for another control in the document
dd - value part of a definition list
del - deleted content
details - toggle information control
dfn - defining instance of a term in text
dialog - dialog box popup
div - all-purpose container
dl - definition lise
dt - definition term
em - emphasis on text
embed - embed plugins and media resources
fieldset - form input grouping container
figcaption - caption for the figure element
figure - describe a reference made in the document
footer - footer for a content section
form - establish a form
h1, h2, h3, h4, h5, h6 - headings for section titles
head - contain document metadata elements
header - header for a content section
hr - horizontal rule
html - root element
i - italicize text
iframe - embed another documents
img - embed an image
input - data intake and editing controls
ins - inserted content
kbd - keyboard or process instructions
keygen - encryption generator for form submissions
label - label form elements
legend - title for the fieldset element
li - list item
link - establish a relationship with external documents
main - main content of the document
map - image mapping
mark - highlight text
meta - establish metadata
meter - gauge or graphing bar
nav - main navigation links container
noscript - handle users that disable JavaScript
object - embed media object
ol - ordered list
optgroup - group options
option - establish options in a drop down select element
output - calculation output
p - paragraph
param - object parameter
pre - preserve white space and new lines in text
progress - progress bar
q - quoted string
rb, rp, rt, rtc, ruby - ruby annotations
s - strike text out
samp - program output
script - add script to the document
section - content section
select - drop down option selector
small - make text smaller
source - source resources for audio and video
span - isolate content for styling differences
strong - stress importance in text
style - add css style properties to the document
sub, sup - subscript and superscript text formats
summary - title for the details element
table - table container
tbody - group rows in a table
td - a table cell
template - template for cloning elements through script
textarea - multiline text input
tfoot - footer rows in a table
th - header cells in a table
thead - heading rows in a table
time - date and time related content
title - title of the document
tr - a table row
track - text track for media subtitles
u - underline text
ul - unordered list
var - variable
video - video object with optional player controls
wbr - line break hint in long strings

Read More

File Creation

A standard HTML document must have a file extension of .html. Some people like to use plain text editors that have no robust markup features, while others will use a very robust text editing software tool.

Choosing a code editor

Plain Text Editors If you want to test the HTML waters without going through the hassle of getting and installing some software package, I laid out instructions for both Windows(notepad) and Mac(textedit) users below on this page. Robust Code Editors Software exists that will do things like autocomplete your code, offer you code hints, built in HTML components for you, give you a design view to work in instead of code all the time, and many other things you may find helpful and productive. If you already have a robust text editing tool like Dreamweaver or BBEdit, they will render out HTML files for you easily in the "Save As" dialog. If that is the case for you then you can skip this information below and continue learning.

Creating HTML files on Windows using Notepad

1. Open Notepad
2. Write your HTML code
3. Go to File >> Save As
4. Change the "Save As Type:" option on the bottom from "Text Document" to "All Files"
5. Type in the file name: "index.html" and press the "Save" button
6. That is it, you should now have an HTML file

Creating HTML files on Mac using TextEdit

1. Open TextEdit
2. Open the "Format" tab and switch to plain text
3. Write your HTML code
4. Go to File >> Save As
5. Change the file extension from ".txt" to ".html" and name your file
6. Popup will ask you if you want to append ".txt". Choose "Don't Append"
7. That is it, you should now have an HTML file

After you successfully create an HTML file you should be able to double click the file icon and your default web browsing software will open it. That is how you test your HTML, run it in browser software. Browser software can also be told to open files from within the browser "File" menu(File >> Open >> browse for your .html file).

Read More

HTML Intrduction

HTML stands for Hypertext Markup Language. When browser software accesses any file it understands how to parse the document according to the file's extension(.html - .txt - .php - .xml - .pdf - .doc - etc... ). HTML provides us a means of laying out and structuring our web pages using paragraphs, graphics, images, audio/video media, applications, forms, user interaction and much more. Browser software interprets exactly how to render the document by the HTML elements laid out in it. An HTML document is just a well dressed text(.txt) file, given a different extension(.html) so that browser software can process it properly. It is important to know all of the elements at your disposal, this way you can choose the correct elements and avoid using elements out of the context for which they are specified. HTML elements wrapped around content making it render the way the author wants:

<h2>Movies for Nerds</h2>
<ol>
<li>Star Wars</li>
<li>Avatar</li>
<li>Interstellar</li>
</ol>

Read More