Html Syntax Cheat Sheet

29-04-2021

Html Syntax Cheat Sheet

This cheat sheet - or HTML code quick reference - lists the common HTML tags and their attributes, grouped into relevant sections in an easy-to-read format.

What is html? What are tags? - Perhaps check out where to start or what is html first :-)

HTML Cheat Sheet PDF. Save the.pdf version of this interactive page to keep it on your desktop or print it and hang it on the wall and always sneak a peek while coding, composing an article or designing a website. A PDF file is available for every cheat sheet on this website: CSS, JavaScript and others. P:last-of-type last of some type. P:lang (en) p with en language attribute.:not (span) element that's not a span. P:first-child first child of its parent. P:last-child last child of its parent. P:nth-child (2) second child of its parent. P:nth-child (3n+1) nth-child (an + b) formula.

Basic HTML Structure	Help \| Top

Common Tags for Blogs	Help \| Top
<h?> heading </h?>	Heading (h1 for largest to h6 for smallest)
<p> paragraph </p>	Paragraph of Text
<b> bold </b>	Make text between tags bold
<i> italic </i>	Make text between tags italic
<a href='url'> link name </a>	Create a link to another page or website
<div> ... </div>	Divide up page content into sections, and applying styles
<img src='filename.jpg'>	Show an image
<ul> <li> list </li> </ul>	Unordered, bullet-point list
<br>	Line Break (force a new line)
<span> red </span>	Use CSS style to change text colour

Text Formatting	Help \| Top
<h?> ... </h?>	Heading (?= 1 for largest to 6 for smallest, eg h1)
<b> ... </b>	Bold Text
<i> ... </i>	Italic Text
<u> ... </u>	Underline Text
<strike> ... </strike>	Strikeout
<sup> ... </sup>	Superscript - Smaller text placed below normal text
<sub> ... </sub>	Subscript - Smaller text placed below normal text
<small> ... </small>	Small - Fineprint size text
<tt> ... </tt>	Typewriter Text
<pre> ... </pre>	Pre-formatted Text
<blockquote> ... </blockquote>	Text Block Quote
<strong> ... </strong>	Strong - Shown as Bold in most browsers
<em> ... </em>	Emphasis - Shown as Italics in most browsers
<font> ... </font>	Font tag obsolete, use CSS. (*)

C++ Syntax Cheat Sheet Pdf

Section Divisions	Help \| Top
<div> ... </div>	Division or Section of Page Content
<span> ... </span>	Section of text within other content
<p> ... </p>	Paragraph of Text
<br>	Line Break
<hr>	Basic Horizontal Line
<hr> Tag Attributes:
size='?'	Line Thickness in pixels
width='?'	Line Width in pixels
width='??%'	Line Width as a percentage
color='#??????'	Line Colour(*)
align='?'	Horizontal Alignment: `left, center, right`(*)
noshade	No 3D cut-out
<nobr> ... </nobr>	Line Break

Images	Help \| Top
<img src='url' alt='text'>	Basic Image
<img> Tag Attributes:
src='url'	URL or filename of image (required!)
alt='text'	Alternate Text (required!)
align='?'	Image alignment within surrounding text (*)
width='??'	Image width (in pixels or %)
height='??'	Image height (in pixels or %)
border='??'	Border thickness (in pixels) (*)
vspace='??'	Space above and below image (in pixels) (*)
hspace='??'	Space on either side of image (in pixels) (*)

Linking Tags	Help \| Top
<a href='url'> link text </a>	Basic Link
<a> Tag Attributes:
href='url'	Location (url) of page to link to.
name='??'	Name of link (name of anchor, or name of bookmark)
target='?'	Link target location: `_self, _blank, _top, _parent`.
href='url#bookmark'	Link to a bookmark (defined with `name` attribute).
href='mailto:email'	Link which initiates an email (dependant on user's email client).

C++ Syntax Cheat Sheet

Lists	Help \| Top
<ol> ... </ol>	Ordered List
<ul> ... </ul>	Un-ordered List
<li> ... </li>	List Item (within ordered or unordered)
<ol type='?'>	Ordered list type: `A, a, I, i, 1`
<ol start='??'>	Ordered list starting value
<ul type='?'>	Unordered list bullet type: `disc, circle, square`
<li value='??'>	List Item Value (changes current and subsequent items)
<li type='??'>	List Item Type (changes only current item)
<dl> ... </dl>	Definition List
<dt> ... </dt>	Term or phrase being defined
<dd> ... </dd>	Detailed Definition of term

Tables	Help \| Top
<table> ... </table>	Define a Table
<table> Tag Attributes:
border='?'	Thickness of outside border
bordercolor='#??????'	Border Colour
cellspacing='?'	Space between cells (pixels)
cellpadding='?'	Space between cell wall and content
align='??'	Horizontal Alignment: `left, center, right`(*)
bgcolor='#??????'	Background Colour (*)
width='??'	Table Width (pixels or %) (*)
height='??'	Table Height (pixels or %) (*)
<tr> ... </tr>	Table Row within table
<th> ... </th>	Header Cell within table row
<td> ... </td>	Table Cell within table row
<td> Tag Attributes:
colspan='?'	Number of columns the cell spans across (cell merge)
rowspan='?'	Number of row a cell spans across (cell merge)
width='??'	Cell Width (pixels or %) (*)
height='??'	Cell Height (pixels or %) (*)
bgcolor='#??????'	Background Colour (*)
align='??'	Horizontal Alignment: `left, center, right`(*)
valign='??'	Vertical Alignment: `top, middle, bottom`(*)
nowrap	Force no line breaks in a particular cell

Frames	Help \| Top
<frameset> ... </frameset>	Define the set of Frames
<frameset> Tag Attributes:
rows='??,??, ...'	Define row sizes & number of rows (size in pixels or %)
cols='??,??, ...'	Define column sizes & number of columns (size in pixels or %)
noresize='noresize'	User cannot resize any frames in frameset
<frame> ... </frame>	Define a frame within the frameset
<frame> Tag Attributes:
src='url'	Location of HTML File for a frame
name='***'	Unique name of frame window
marginwidth='?'	Horizontal margin spacing inside frame (pixels)
marginheight='?'	Vertical margin spacing inside frame (pixels)
noresize='noresize'	Declare all frameset sizes as fixed
scrolling='***'	Can the user scroll inside the frame: `yes, no, auto`
frameborder='?'	Frame Border: (`1`=yes, `2`=no)
bordercolor='#??????'	Border Colour (*)
<noframes> ... </noframes>	Unframed content (for browsers not supporting frames)