HTML Quick Reference

tags / elements

code render name / description
<!DOCTYPE html> HTML5 <!DOCTYPE> declaration
The <!DOCTYPE> declaration is not case sensitive.
<html lang="en">
<html lang="en-US">		 HTML root element
  • <html> element is the root element
  • Always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist search engines and browsers.
    • HTML Language Code Reference https://www.w3schools.com/tags/ref_language_codes.asp
<h1>Header 1<h1>
<h6>Header 6<h6>		 Heading element,
<h1> to <h6>
Important! Use only one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.
<p>paragraph</p>

paragraph

 paragraph element
<br />
line break
<hr />
horizontal rule
<img src="/img/smile.png" alt="smile face" /> smile face image
  • link to source
    • Absolute URL <img src="https://www.dzyubak.com/img/img1.jpg" alt="..." />
    • Relative URL, relative to the current page (begins w/o slash) <img src="img1.jpg" alt="..." />
      • or, if inside dir: <img src="img/img1.jpg" alt="..." />
    • Relative URL, relative to the current domain (begins w/ slash) <img src="/media/img/img1.jpg" alt="..." />
    • image formats and browser support
      • .jpg - JPEG - Joint Photographic Expert Group image
        • browser support: all versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
      • .png - PNG - Portable Network Graphics
        • not supported: IE6
        • PNG is preferred over JPEG for more precise reproduction of source images, or when transparency is needed
      • .gif - GIF - Graphics Interchange Format
        • browser support: all versions of Chrome, Edge, Firefox, Internet Explorer, Opera, and Safari
        • for animation
      • .ico, .cur - ICO - Microsoft Icon
        • .ico - for favicon, must not be used in web content
        • .cur - might be used for cursor
      • .svg - SVG - Scalable Vector Graphics
        • SVG (basic support) not supported: IE 8, Edge 18 requires workaround, Firefox 2 partial support, Safari 3.1 partial support
        • vector image format; ideal for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes
      • .apng - APNG - Animated Portable Network Graphics
        • not supported: Chrome 58, Firefox 2, Edge 18, Safari 7.1
      • sources
        • Image file type and format guide https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
        • PNG alpha transparency https://caniuse.com/png-alpha
        • cursor https://caniuse.com/?search=cursor
        • cursor https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
        • SVG (basic support) https://caniuse.com/svg
        • Animated PNG (APNG) https://caniuse.com/apng
  • The required alt attribute specifies an alternate text for an image; shown, if src link can not be loaded / displayed
  • The <img> tag should also contain width and height
    • if width and height are not specified, the web page might flicker while the image loads
    • <img src="img1.jpg" alt="alternate text" width="100" height="200" />
    • <img src="img1.jpg" alt="alternate text" style="width:100px;height:200px;" />
    • BUT better specify width and height in CSS class
<p><img src="/img/smile.png" alt="smile face" style="float:left;width:50px;height:50px;" />float:left</p>
<p style="clear:both"><img src="/img/smile.png" alt="smile face" style="float:right;width:50px;height:50px;" />clear:both, then image float:right inside paragraph</p>

smile facefloat:left

smile faceclear:both, then image float:right inside paragraph

 image float:left, clear:both, image float:right
<p><img src="/img/smile.png" alt="smile face" style="float:left;width:50px;height:50px;" />float:left</p>
<p><img src="/img/smile.png" alt="smile face" style="float:right;width:50px;height:50px;" />image float:right inside paragraph; clear:both is not added</p>

smile facefloat:left

smile faceimage float:right inside paragraph; clear:both is N/A

 image float:left, image float:right, w/o clear:both 
<pre>line 1: preformatted text
line 2: fixed-width font</pre>
 
line 1: preformatted text
line 2: fixed-width font
 preformatted text
<b>bold</b> bold bold text
<strong>important</strong> important important text
<i>italic</i> italic italic text
<em>emphasized</em> emphasized emphasized text
A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.
<mark>marked</mark> marked marked text
<small>smaller</small> smaller smaller text
<del>deleted</del> deleted deleted text
<ins>inserted</ins> inserted inserted text
H<sub>2</sub>O, CO<sub>2</sub> H2O, CO2 subscript text
(a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup> (a + b)2 = a2 + 2ab + b2 superscript text
<blockquote cite="https://en.wikipedia.org/wiki/HTML">The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.</blockquote>
The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.
 quotation
<q>To be, or not to be</q> is the opening phrase of a speech given by Prince Hamlet To be, or not to be is the opening phrase of a speech given by Prince Hamlet short quotation
<abbr title="HyperText Markup Language">HTML</abbr> HTML abbreviation or acronym
Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.
<address><a href="mailto:mail@example.com">mail@example.com</a><br /><a href="https://www.dzyubak.com/">www.dzyubak.com</a><br />Box 111, Chicago<br />USA</address>
mail@example.com
www.dzyubak.com
Box 111, Chicago
USA
 contact information
contact information for the author/owner of a document or an article (e.g. email address, URL, physical address, phone number, social media handle, etc.)
Musical style of <cite>Mazurka, Op. 17, No. 4</cite> by Frédéric Chopin Musical style of Mazurka, Op. 17, No. 4 by Frédéric Chopin Citation element
title of a creative work (e.g. book, musical score, song, movie, painting, computer program, forum post or comment, etc.)
<bdo dir="rtl">right-to-left</bdo> right-to-left bi-directional override
<!-- HTML comment --> HTML comment
<p title="Tooltip from title">Mouseover to see the tooltip.</p>

Mouseover to see the Tooltip.

 tooltip
<a href="https://www.dzyubak.com/" target="_blank">Dmytro Dzyubak</a>
<a href="https://openclipart.org/" target="_blank" title="Go to Openclipart website"><img src="/img/smile.png" alt="smile face"></a>		 Dmytro Dzyubak
smile face		 Anchor element, Hypertext REFerence attribute
  • href attribute
    • Absolute URL
      <a href="https://www.dzyubak.com/about.html">About Dmytro Dzyubak</a>
    • Relative URL, relative to the current page - begins w/o slash
      <a href="about.html">About Dmytro Dzyubak</a>
    • Relative URL, relative to the current domain - begins w/ slash (recommended)
      <a href="/about.html">About Dmytro Dzyubak</a>
      • except for Google SEO, for example, not in rel="canonical"
    • "mailto:" scheme opens email program
      <a href="mailto:user@example.com">user@example.com</a>
  • target attribute specifies where to open the link
    • target="_self" same window (default)
    • target="_blank" new window
    • target="_parent" parent frame
    • target="_top" the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as _self
  • title attribute, shown as a tooltip on mouseover
    • <a href="https://openclipart.org/" title="Go to Openclipart website">Openclipart</a>
  • default link colors and text-decoration
    • unvisited link: underlined and blue
    • visited link: underlined and purple
    • active link: underlined and red
<a href="#unique-id">Jump to "Unique"</a>
<p id="unique-id">Unique</p>		 Jump to "Unique"

Unique

 link to element on the same page
  • link to element on another page
    <a href="/some_page.html#unique-id">Jump to "Unique" on "some_page"</a>
<p style="background-color:violet;color:red;border:3px solid DodgerBlue;">Paragraph in red text color, violet background color, and DodgerBlue border color.</p>

Paragraph in red text color, violet background color, and DodgerBlue border color.

 style attribute, text color, background-color, border color
  • Color can be specified with predefined color names, or with HEX, RGB, HSL, RGBA, HSLA values

    • style="background-color:orange;"

    • style="background-color:#ff6347;"

    • style="background-color:rgb(255, 165, 0);"

    • style="background-color:hsl(38.82, 100%, 50%);"

    • set an Alpha channel to 1 (= 0% transparency, same as rgb or hsl w/o using Alpha channel)

      • style="background-color:rgba(255, 165, 0, 1);"

      • style="background-color:hsla(38.82, 100%, 50%, 1);"

    • set an Alpha channel to 0.5 (= 50% transparency)

      • style="background-color:rgba(255, 165, 0, 0.5);"

      • style="background-color:hsla(38.82, 100%, 50%, 0.5);"

    • device-cmyk(0%, 35.29%, 100%, 0%) - device-cmyk() approach to color is useful when creating material to be output to a particular printer, when the output for particular ink combinations is known. CSS processors may attempt to approximate the color, however the end result is likely to be different to the printed result.
  • 140 standard HTML Color Names https://www.w3schools.com/colors/colors_names.asp
  • #000000
    • #rrggbb defines the intensity of the color with hexadecimal values between 00 and ff
    • #ff0000 = red
    • #000000 = black
    • #ffffff = white
    • #303030, #a5a5a5 = shades of gray (equal values for all three parameters)
  • rgb(0, 0, 0) and rgba(0, 0, 0, 1)
    • RGB - Red, Green, and Blue light sources + Alpha channel (opacity)
    • rgb(red, green, blue) defines the intensity of the color with a value between 0 and 255.
    • rgba(red, green, blue, alpha) alpha parameter defines transparency with a value between 0.0 (fully transparent) and 1.0 (not transparent at all)
    • rgb(255, 0, 0) = red
    • rgb(0, 0, 0) = black
    • rgb(255, 255, 255) = white
    • rgb(70, 70, 70), rgb(210, 210, 210) = shades of gray
    • 256 * 256 * 256 = 16777216 colors
  • hsl(0, 100%, 0%) and hsla(0, 100%, 0%, 1)
    • hsla(hue, saturation, lightness, alpha) - hue, saturation, and lightness + Alpha channel (opacity)
      • Hue - degree on the color wheel from 0 to 360
        • 0 = red
        • 120 = green
        • 240 = blue
      • Saturation - intensity of a color
        • 0% = shade of gray, no color
        • 100% = full / pure color
      • Lightness - amount of light
        • 0% = black, no light
        • 100% = white, full lightness
      • Alpha - transparency / opacity
        • 0.0 = fully transparent
        • 1.0 = not transparent at all
    • hsl(0, 100%, 50%) = red
    • hsl(0, 100%, 0%) = black
    • hsl(0, 100%, 100%) = white
    • hsl(0, 0%, 30%), hsl(0, 0%, 70%) = shades of gray
<p style="margin:5px;padding:5px;border:3px solid red;">margin 5px, padding 5px, border 3px solid red</p>

margin 5px, padding 5px, border 3px solid red

 style attribute: margin property, padding property, border property
  • padding property defines a padding (space) between the text and the border
  • margin property defines a margin (space) outside the border
<p style="font-size:20px;">font size 20px</p>

font size 20px

 style attribute, font-size
<p style="font-family:courier;">font-family courier</p>

font-family courier

 font-family
<map name="plane">
<area shape="rect" coords="5,5,46,70" alt="rectangle" href="https://en.wikipedia.org/wiki/Rectangle" target="_blank" />
<area shape="circle" coords="107,22,20" alt="circle" href="https://en.wikipedia.org/wiki/Circle" target="_blank" />
<area shape="poly" coords="53,42,74,31,91,48,80,71,57,65" alt="polygon" href="https://en.wikipedia.org/wiki/Polygon" target="_blank" onclick="polyFunc()" />
</map>
<img src="/img/map.130x78.png" alt="plane with rectangle, circle, and polygon" usemap="#plane" />
<script>function polyFunc() { alert("Polygon Function"); }</script> 		rectangle circle polygon plane with rectangle, circle, and polygon image map, image with clickable areas
  • workflow
    • create image for map element w/ Inkscape, save as .svg, export to .png
    • resize w/ ImageMagick convert -resize 130 map.png map.130x78.png
    • find coordinates w/ GIMP
  • shape="rect" coords="x,y,x,y"
  • shape="circle" coords="x,y,radius"
  • shape="poly" coords="x,y,x,y,x,y,x,y,x,y"
  • <area shape="default" defines the entire region
<td style="background-image: url('/img/smile.png');">background-image</td> background-image background image
  • set background-image on the whole page
    • background-image repeats horizontally and vertically (default) 
      body {
  background-image: url('/img/smile.png');
}
    • disable repeating 
      body {
  background-image: url('/img/smile.png');
  background-repeat: no-repeat;
}
    • disable repeating, cover the entire element, no stretching
      • comment out background-attachment property and resize the window to see the difference
      body {
  background-image: url('/img/smile.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
    • disable repeating, cover the entire element, stretch 
      body {
  background-image: url('/img/smile.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
}
<picture>
<source media="(min-width: 1000px)" srcset="/img/dino_100.png" />
<source media="(min-width: 900px)" srcset="/img/grin_50.png" />
<img src="/img/smile.png" alt="smile face" />
</picture> 		smile face picture, different pictures on different conditions
  • always specify an <img> element as the last child element of the <picture> element, used either as default or for browsers that do not support <img> element
  • add images in different formats 
    <picture>
  <source srcset="/img/img1.svg" />
  <source srcset="/img/img1.png" />
  <img src="/img/img1.jpg" alt="image" />
</picture>
  • browser uses the first matched element and ignores any following elements
<table>
<tr><th>th 1</th><th>th 2</th><th>th 3</th></tr>
<tr><td>td 1.1</td><td>td 1.2</td><td>td 1.3</td></tr>
<tr><td>td 2.1</td><td>td 2.2</td><td>td 2.3</td></tr>
</table>
th 1th 2th 3
td 1.1td 1.2td 1.3
td 2.1td 2.2td 2.3
 table, table row, table header cells, table data cells
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
  • list item
  • list item
  • list item
 unordered list, list item
<ol>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ol>
  1. list item
  2. list item
  3. list item
 ordered list, list item

CSS