HTML & CSS Tags Reference Tables
Basic HTML <a href="#ID"> Creates a hyperlink to “ID” in same page
Tag Description Forms and Input
<!DOCTYPE> Defines the document type Tag Description
<html> Defines an HTML document <form action="/action_page.php" Defines an HTML form
<head> Contains metadata/information for the document method="get"> for user input
<title> Defines a title for the document <label> Defines a label for an
<body> Defines the document's body <input> element
<h1> to <h6> Defines HTML headings <button name="" id=”” type="" value=""> Defines a clickable
<p> Defines a paragraph button
<br> Inserts a single line break <input name="" id=”” type=”” value="">
<!--...--> Defines a comment type=text/number/ date/ password/ Defines an input control
<div> Defines a section/division of the webpage button/checkbox/radio/ reset/submit
<span> Select a portion of text <textarea name=”” id=”” rows="" cols=""> Defines a multiline text
-- input
Text Formatting <select name="" id=""> Defines a drop-down list
Tag Description <option value="">Option1
<b> Defines bold text <fieldset> Groups related
elements in a form
<del> Defines text that has been deleted from a document
<legend> Defines a caption for a
<i> Defines a part of text in an alternate voice or mood
<fieldset> element
<strong> Defines important text
--
<sub> Defines subscripted text
Audio & Video
<sup> Defines superscripted text
Tag Description
<u> Defines some text that is unarticulated and styled
<audio ‘att1 att2’>
differently from normal text
<source src=" " Defines sound content
--
type=" ”>
List
Attributes and Values
Tag Description
controls Audio controls should be displayed
<ul> Defines an unordered list
loop The audio will start over again
<ol> Defines an ordered list
autoplay Automatically start audio while page load
<li> Defines a list item
src=”URL” Audio file location with extension (.mp3/ .wav)
Attributes and Values
type=" ” Audio file type (“audio/mpeg” or “audio/wav”)
type=" " Bullets Type for ul {circle, square, disk}
Bullets Type for ol {1, I, I, A, a}
start=" " Starting Number for ol <video ‘att1 att2’>
-- <source src=" " Defines a video or movie
Table type=" ”>
Tag Description Attributes and Values
<table> Defines a table controls Video controls should be displayed
<caption> Defines a table caption height Specifies the height of the video window
<th> Defines a header cell in a table width Specifies the width of the video window
<tr> Defines a row in a table loop The video will start over again
<td> Defines a cell in a table autoplay Automatically start video while page load
<thead> Groups the header content in a table src=”URL” Video file location with ext (.mp4 or .ogg)
<tbody> Groups the body content in a table type=" ” Video file type (“video/mp4” or “video/ogg”)
<tfoot> Groups the footer content in a table --
Attributes and Values Style
border=" " Table border in integer {1,2,3,4…..} Tag Description
cellspacing=" " Define space between cell in integer {1,2,3,4…..} style=”” Define In-line CSS on a HTML tag
cellpadding=" " Define space between cell-wall and text in Cell (div/span/p/h1-h6)
colspan=" " Marge no. of column {2,3,4…..} <style> ….</style> Define Internal CSS on class/id or HTML tag
rowspan=" " Marge no. of row {2,3,4…..} in head section
-- <link rel="stylesheet" Define External CSS as stylesheet in head
Graphics/Image href="mystyle.css"> section
Tag Description Attributes and Values
<hr> Inserts a horizontal rule/ line width:50%; Define width of the element in px or %
Attributes and Values height:80px; Define height of the element in px
size= Sets size (height) of horizontal rule font-family: sans-serif; Name of the font used
width= Sets width of rule (as a % or absolute pixel length) font-size=10px Size of the font in px or %
Noshade Creates a horizontal rule without a shadow margin:5px Define space between element
= padding:3px Define space between margin and text
<img> Inserts an Image border: 2px solid red Define border size, color and type
Attributes and Values border-radius:7px Define border edge bending
src="URL File located at the URL border-collapse: Collapse border of a table in single line
" text-align:center Text orientation like left, right, center
alt="" Name of the image text-decoration:none overline, underline, dotted, wavy, blue, 5px
height= Sets height of the image as absolute pixel length (px) color:green Set Text color
width= Sets width of the image as absolute pixel length (px) text-shadow: 2px 2px Text Shadow Horizontal and Vertical value in
-- #FF0000; px and color of the shadow
Links background-color:blue Set Background color of an element
Tag Description float:left Alignment of an Element
<a href=”URL”> Creates a hyperlink to URL table-layout: auto; Table text align as auto/fixed
<a id="IDname"> Creates an id of any section of the page opacity: 0.5; Define object Opacity from 0.0 to 1.0
Author: Engr. M. Ariful Islam (Phone: 01818-23 2003)
M.Sc in Computer Science & Engineering, Lecturer (ICT)
HTML & CSS Tags Reference Tables
Author: Engr. M. Ariful Islam (Phone: 01818-23 2003)
M.Sc in Computer Science & Engineering, Lecturer (ICT)
