HTML
<!DOCTYPE html> <html> <head> <style> body { background:pink; text-align:center; } </style> </head> <body> <h1>A heading</h1> <p>A paragraph</p> <script> function myFunction(a,b){ return a*b } </script> </body> </html>Html elements can be nested(contain other elements)
Tags are case insensitive In some tags it is not a must to have a closing tag e.g <br>
Basic Tags
<tag> | Attributes | Expanation |
!DOCTYPE | Document type | |
html | lang, manifest, xmlns |
Html document |
title | Title of the document | |
head | Head of the document | |
body | Body of the document | |
h1 to h6 | Headings | |
p | Paragraph | |
br | Line break | |
hr | Thematic break/horizontal line | |
<!--...--> | Comment |
abbr | abreviation or acronym | |
adress | about the author | |
b | bold text | |
bdo | Override current text direction | |
blockquote | Quoted from another source | |
cite | ||
code | Computer code | |
del | Deleted text | |
em | Emphasized text | |
i | altenate voice or mood/italics | |
ins | Inserted text | |
kbd | Keyboard Input | |
mark | Marked or highlighted text | |
meter | form, high, low, max, min, optimum, value |
Measurements |
pre | Preformatted text | |
progress | max, value |
Show progress of a task |
q | Short quotation | |
rt | Pronunciation | |
s | Text that is no longer correct | |
samp | Sample output from coputer program | |
small | Smaller text | |
strong | Important text | |
sub | Subscript | |
sup | Superscript | |
time | Date and time | |
u | Different text | |
var | Variable | |
wbr | Possible Line Break |
form | accept, action, autocomplete, enctype, method(get/post), name, target, novalidate |
Html user input |
input | accept, align, alt, autocomplete, autofocus, checked, dirname, form, firmaction, formenctype, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, name, pattern, placeholder, readonly, required, size, src, step, type(button,checkbox,color, date,datetime, datetime-local,email, file,hidden,image, month,number,password, radio,range,reset,search, submit,tel,text, time,url,week), value, width |
Input contol |
textarea | autofocus, cols, dirnsme,disabled, form, maxlength, name, placeholder, readonly, required, rows |
Multiline text input |
button | name, type, value, disabled, autofocus |
Clickable button |
select | autofocus, disabled, form, multiple, name, size, required |
drop down/options list |
optgroup | disabled, label |
Group of related options |
option | disabled, label, selected, value |
options in select element |
label | for, form |
Label for input elements |
fieldset | groups related elememts in a form | |
legend | Caption for fieldset | |
datalist | specifie a list of predefined options | |
keygen | autofocus, challenge, disabled, form, keytype, name |
a key pair generator |
output | for, form |
show results of a calculation |
frame | Defines a frame | |
frameset | A set of frames | |
noframe | Show when frames are not supported | |
iframe | height, name, sandbox, scrolling, src, width |
Inline frame |
img | alt, cross-origin, height, hspace, src, width, target |
Defines an image |
map | name | client side map |
area | alt, coords, download, href, rel, shape |
define area inside image map |
canvas | width, height |
Container for drawing graphics using javascript> |
figcaption | Defines a caption for a figure element | |
figure | specifies self-contained content |