HTML Basics

HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

    <!DOCTYPE html>

    <html>
        <body>

            <h1>My First Heading</h1>
            <p>My first paragraph.</p>

        </body>
    </html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The declaration is not case-sensitive.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading.

        <h1>My First Heading</h1>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

        <p>My first paragraph.</p>

HTML Links

HTML links are defined with the <a> tag. The link's destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements.

    <a href="https://www.daemons-code-library.freesite.online">This is a link</a>

HTML Images

HTML images are defined with the <img> tag. The source file (src), alternative text(alt), width and height are provided as attributes.

    <img src="code library.jpg" alt="www.daemons-code-library.freesite.online" width="104" height="142">

HTML Elements

An HTML element is defined by a start tag, some content, and an end tag.

    <tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag.
Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag.

Empty HTML Elements

The <br> tag defines a line break, and is an empty element without a closing tag:

    <p>This is a <br> paragraph with a line break.</p>

HTML Attributes

All HTML elements can have attributes.
Attributes provide additional information about elements.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value".

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

        <a href="https://www.daemons-code-library.freesite.online">Visit Code Library</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

     <img src="img_girl.jpg">

There are two ways to specify the URL in the src attribute:
• Absolute URL - Links to an external image that is hosted on another website. Example: src="https://www.daemons-code-library.freesite.onlineimages/img_girl.jpg".
• Relative URL - Links to an image that is hosted within the website. Here, the URL does not include the domain name. If the URL begins without a slash, it will be relative to the current page. Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):

     <img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.

     <img src="img_girl.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

     <p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You should 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.

    <!DOCTYPE html>

    <html lang="en">
        <body>
            ...
        </body>
    </html>

Country codes can also be added to the language code in the lang attribute. So, the first two characters define the language of the HTML page, and the last two characters define the country.

     <!DOCTYPE html>

    <html lang="en-US">
        <body>
            ...
        </body>
    </html>

The title Attribute

The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the element:

     <p title="I'm a tooltip">This is a paragraph.</p>

HTML Headings

HTML headings are titles or subtitles that you want to display on a webpage.

Note: Browsers automatically add some white space (a margin) before and after a heading.

Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

    <h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs

A paragraph always starts on a new line, and is usually a block of text. Browsers automatically add some white space (a margin) before and after a paragraph.

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code. The browser will automatically remove any extra spaces and lines when the page is displayed:

    <p> 
    This paragraph
    contains a lot of lines
    in the source code,
    but the browser
    ignores it.
    </p>

    <p>
    This paragraph
    contains         a lot of spaces
    in the source         code,
    but the        browser
    ignores it.
    </p>

Horizontal Rules

The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule. The <hr> element is used to separate content (or define a change) in an HTML page. The <hr> tag is an empty tag, which means that it has no end tag.

    <h1>This is heading 1</h1>
    <p>This is some text.</p>
    <hr>
    <h2>This is heading 2</h2>
    <p>This is some other text.</p>
    <hr>

Line Breaks

The HTML <br> element defines a line break. Use <br> if you want a line break (a new line) without starting a new paragraph. The <br> tag is an empty tag, which means that it has no end tag.

 <p>This is<br>a paragraph<br>with line breaks.</p>

The HTML <pre> Element

The HTML <pre> element defines preformatted text. The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

    <pre> 
    My Bonnie lies over the ocean.

    My Bonnie lies over the sea.

    My Bonnie lies over the ocean.

    Oh, bring back my Bonnie to me.
    </pre>

HTML Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more. The HTML style attribute has the following syntax:

    <tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example 1: Set the background color for a page to powderblue.

    <body style="background-color:powderblue;">
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
    </body>

Example 2: Set background color for two different elements.

    <body>
        <h1 style="background-color:powderblue;">This is a heading</h1>
        <p style="background-color:tomato;>This is a paragraph.</p>
    </body>

Fonts

The CSS font-family property defines the font to be used for an HTML element

    <h1 style="font-family:verdana;">This is a heading</h1>
    <p style="font-family:courier;">This is a paragraph.</p>

Text Color

The CSS color property defines the text color for an HTML element:

    <h1 style="color:blue;">This is a heading</h1>
    <p style="color:red;">This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

    <h1 style="text-align:center;">Centered Heading</h1>
    <p style="text-aligncenter;">Centered paragraph.</p>

HTML Text Formatting

Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

HTML <b> and <strong> Elements

• The HTML <b> element defines bold text, without any extra importance.

    <b>This text is bold.</b>

The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

    <strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

    <i>This text is italic.</i>

The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

    <em>This text is emphasized.</em>

HTML <small> Element

The HTML <small> element defines smaller text:

    <small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

    <p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

    <p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

    <p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like h₂o:

    <p>This is <sub>subscripted</sub> text..</p>

HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW^[1]

    <p>This is <sup>superscripted</sup> text.</p>

HTML Quotation and Citation Elements

In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>, <cite> and <bdo> HTML elements.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source. Browsers usually indent <blockquote> elements.

     <p>Here is a quote from WWF's website:</p>
     <blockquote> cite="http://www.worldwildlife.org/who/index.html">
    For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.</blockquote>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation. Browsers normally insert quotation marks around the quotation.

    <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Marking abbreviations can give useful information to browsers, translation systems and search-engines. Use the global title attribute to show the description for the abbreviation/acronym when you mouse over the element.

    <p>The <abbr title="World Health Organization">WHO<abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address>tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

     <address>
        Written by John Doe.<br>
        Visit us at:<br>
        Example.com<br>
        Box 564, Disneyland<br>
        USA
      </address>

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).The text in the <cite> element usually renders in italic.

     <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

The HTML <bdo> tag is used to override the current text direction:

     <bdo dir="rtl">This text will be written from right to left.</bdo>

HTML Comments

HTML comments are not displayed in the browser, but they can help document your HTML source code. You can add comments to your HTML source by using the following syntax:

    <!-- Write your comments here -->

Note: There is an exclamation point (!) in the start tag, but not in the end tag.

Add Comments

With comments you can place notifications and reminders in your HTML code:

     <!-- This is a comment -->
    <p>This is a paragraph.</p>
    <!-- Remember to add more information here -->

Hide Content

Comments can be used to hide content. This can be helpful if you hide content temporarily:

    <p>This is a paragraph.</p>
     <!-- <p>This is another paragraph </p> -->
    <p>This is a paragraph too.</p>

You can also hide more than one line. Everything between the will be hidden from the display:

    <p>This is a paragraph.</p>
     <!-- 
        <p>Look at this cool image:</p>
        <img border="0" src="pic_trulli.jpg" alt="Trulli">
     -->
    <p>This is a paragraph too.</p>

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors.

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

     <p>This <!-- great text --> is a paragraph.</p>

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values.
HTML supports 140 standard color names.

Background Color

You can set the background color for HTML elements:

    <h1 style="background-color:DodgerBlue;">Hello World</h1>
    <p style="background-color:Tomato;">Lorem ipsum...</p>

Text Color

You can set the color of text:

    <h1 style="color:DodgerBlue;">Hello World</h1>
    <p style="color:Tomato;">Lorem ipsum...</p>
    <p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

You can set the color of borders:

    <h1 style="border:2px solid Tomato;">Hello World</h1>
    <h1 style="border:2px solid DodgerBlue;">Hello World</h1>
    <h1 style="border:2px solid Violet;">Hello World</h1>

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.

    <!-- RGB Values -->
    <h1 style="background-color:rgb(255, 99, 71)">Hello World</h1>

    <!-- HEX Values -->
    <h1 style="background-color:#ff6347;">Hello World</h1>

    <!-- HSL Values -->
    <h1 style="background-color:hsl(9, 100%, 64%);">Hello World</h1>

    <!-- RGBA Values -->
    <h1 style="background-color:rgba(255, 99, 71, 0.5);">Hello World</h1>

    <!-- HSLA Values -->
    <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">Hello World</h1>

Let's look at them in more detail.

RGB and RGBA Colors

• An RGB color value represents RED, GREEN, and BLUE light sources. Each parameter (red, green, and blue) defines the intensity of the color with a value between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the other two (green and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value (255), and the other two (red and blue) are set to 0.
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Shades of gray are often defined using equal values for all three parameters: rgb(60, 60, 60), rgb(100, 100, 100), rgb(140, 140, 140), rgb(180, 180, 180), rgb(200, 200, 200), rgb(240, 240, 240)

• RGBA color values are an extension of RGB color values with an Alpha channel - which specifies the opacity for a color. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Fully transparent, rgba(255, 99, 71, 0)
Semi transparent, rgba(255, 99, 71, 0.5)
Not transparent, rgba(255, 99, 71, 1)

HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00.
Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.
Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.
To display white, set all color parameters to ff, like this: #ffffff.
Shades of gray are often defined using equal values for all three parameters: #404040, #686868, #a0a0a0, #bebebe, #dcdcdc, #f8f8f8f

HSL and HSLA Colors

• HSL stands for hue, saturation, and lightness.

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue.
Saturation is a percentage value. 0% means a shade of gray, and 100% is the full color.
Lightness is also a percentage value. 0% is black, and 100% is white.
Shades of gray are often defined by setting the hue and saturation to 0, and adjusting the lightness from 0% to 100% to get darker/lighter shades: hsl(0, 0%, 20%), hsl(0, 0%, 40%), hsl(0, 0%, 60%), hsl(0, 0%, 80%),

• HSLA color values are an extension of HSL color values, with an Alpha channel - which specifies the opacity for a color.

Fully transparent, hsla(0, 100%, 50%, 0)
Semi transparent, hsla(0, 100%, 50%, 0.5)
Not transparent, hsla(0, 100%, 50%, 1)

HTML Links

HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand.

Note: A link does not have to be text. A link can be an image or any other HTML element!

Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

    <a href="url">link text</a>

The most important attribute of the<a> element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address.

    <a href="https://www.daemons-code-library.freesite.online/">Visit Code Library.com</a>

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.

Note: Links can of course be styled with CSS, to get another look!

The target Attribute

By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:

self - Default. Opens the document in the same window/tab as it was clicked.
_blank - Opens the document in a new window or tab.
parent - Opens the document in the parent frame.
top - Opens the document in the full body of the window.

Example: Use target="_blank" to open the linked document in a new browser window or tab:

    <a href="https://www.daemons-code-library.freesite.online/" target="_blank">Visit Code Library.com</a>

Absolute URLs vs. Relative URLs

An absolute URL uses a full web address in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):

    <h2>Absolute URLs</h2>

    <p><a href="https://www.daemons-code-library.freesite.online/">Visit Code Library.com</a></p>
    <p><a href="https://www.google.com/">Google</a></p>

    
    <h2>Relative URLs</h2>

    <p><a href="html_images.asp">HTML Images</a></p>
    <p><a href="/css/default.asp">CSS Tutorial</a></p>

Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

    <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's email program (to let them send a new email):

    <a href="mailto:someone@example.com">Send email</a>

Button as a Link

o use an HTML button as a link, you have to add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button:

<button onclick="document.location='default.asp'">HTML Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.

    <p><a href="https://www.daemons-code-library.freesite.online/" title="Go to Code Library HTML Section">Visit Code Library.com</a></p>

For more on JavaScript, see JavaScript section.

Link Colors

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue.
A visited link is underlined and purple.
An active link is underlined and red.

Note: Links can of course be styled with CSS, to get another look!

Example 1:
Here, an unvisited link will be green with no underline. A visited link will be pink with no underline. An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it will become red and underlined:

    <style>

    a:link {
        color: green;
        background-color: transparent;
        text-decoration: none;
    }

    a:visited {
        color: pink;
        background-color: transparent;
        text-decoration: none;
    }

    a:hover {
        color: red;
        background-color: transparent;
        text-decoration: underline;
    }

    a:active {
        color: yellow;
        background-color: transparent;
        text-decoration: underline;
    }
    
    </style>

Example 2:
A link can also be styled as a button, by using CSS:

    <style>

    a:link, a:visited {
        background-color: #f44336;
        color: white;
        padding: 15px 25px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
    }

    a:hover, a:active {
        background-color: red;
    }

    </style>

For more on CSS styles, see CSS section.

Create Bookmarks

HTML links can be used to create bookmarks, so that readers can jump to specific parts of a web page. Bookmarks can be useful if a web page is very long.
To create a bookmark - first create the bookmark, then add a link to it. When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example: First, use the id attribute to create a bookmark:

    <h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

    <a href="#C4">Jump to Chapter 4</a>

You can also add a link to a bookmark on another page:

    <a href="html_demo.html#C4">Jump to Chapter 4</a>

HTML Images

Images can improve the design and the appearance of a web page.

    <img src="img_girl.jpg" alt="Girl in a jacket">

Images Syntax

The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The <img> tag has two required attributes:

src - Specifies the path to the image
alt - Specifies an alternate text for the image

    <img src="url" alt="alternate text">

The src Attribute

The required src attribute specifies the path (URL) to the image.

    <img src="img_chania.jpg" alt="Flowers in Chania">

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image:

    <img src="img_chania.jpg" alt="Flowers in Chania">

Note: A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

    <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

    <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

    <img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

Images on Another Server/Website

Some websites point to an image on another server. To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

    <img src="https://www.daemons-code-library.freesite.online/images/python_logo.jpg" alt="Code_Library.com">

Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.

Animated Images

HTML allows animated GIFs:

    <img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

    <a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a>

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

    <p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">The image will float to the right of the text.</p>

    <p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">The image will float to the left of the text.</p>

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

[['APNG', 'Animated Portable Network Graphics', '.apng'], ['GIF', 'Graphics Interchange Format', '.gif'], ['ICO', 'Microsoft Icon', '.ico, .cur'], ['JPEG', 'Joint Photographic Expert Group image', '.jpg, .jpeg, .jfif, .pjpeg, .pjp'], ['PNG', 'Portable Network Graphics', '.png'], ['SVG', 'Scalable Vector Graphics', '.svg']]

Image Maps

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are defined with one or more <area> tags.

Here is the HTML source code for the image map above:

    <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

    <map name="workmap">
    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
    <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
    <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
    </map>

• Let's look closely at the above code:

The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. To create an image map you need an image, and some HTML code that describes the clickable areas.

The Image

The image is inserted using the <img> tag. The only difference from other images is that you must add a usemap attribute:

The usemap value starts with a hash tag # followed by the name of the image map, and is used to create a relationship between the image and the image map.

    <img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Note: You can use any image as an image map!

Create Image Map

Then, add a <map> element. The <map> element is used to create an image map, and is linked to the image by using the required name attribute:

    <map name="workmap">

The name attribute must have the same value as the <img>'s usemap attribute.

The Areas

Then, add the clickable areas. A clickable area is defined using an <area> element.

You must define the shape of the clickable area, and you can choose one of these values:

rect - defines a rectangular region.
circle - defines a circular region.
poly - defines a polygonal region.
default - defines the entire region.

You must also define some coordinates to be able to place the clickable area onto the image.

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis.
So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top:

The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top:

Now we have enough data to create a clickable rectangular area:

    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

This is the area that becomes clickable and will send the user to the page "computer.htm":

To add a circle area, first locate the coordinates of the center of the circle:

337,300

Then specify the radius of the circle:

44 pixels

Now you have enough data to create a clickable circular area:

    <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">

This is the area that becomes clickable and will send the user to the page "coffee.htm":

The shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon). This can be used to create any shape.

How can we make the croissant in the image below become a clickable link?

We have to find the x and y coordinates for all edges of the croissant:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

     <area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

This is the area that becomes clickable and will send the user to the page "croissant.htm":

Image Map and JavaScript

A clickable area can also trigger a JavaScript function. Add a click event to the <area> element to execute a JavaScript function:

    <map name="workmap"><area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()"></map>

    <script>
        function myFunction() {
            alert("You clicked the coffee cup!");
        }
    </script>

Background Images

Background Image on an HTML element

A background image can be specified for almost any HTML element.
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property:

    <p style="background-image: url('img_girl.jpg');">

You can also specify the background-image in the <style> element, in the <head> section:

    <style>
        p {
            background-image: url('img_girl.jpg');
        }
    </style>

Background Image on a Page

If you want the entire page to have a background image, you must specify the background image on the <body> element:

    </style> 
        body {
            background-image: url('img_girl.jpg');
        }
    </style>

Background Repeat

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

    </style> 
        body {
            background-image: url('img_girl.jpg');
        }
    </style>

To avoid the background image from repeating itself, set the background-repeat property to no-repeat.

    </style> 
        body {
            background-image: url('img_girl.jpg');
            background-repeat: no-repeat;
        }
    </style>

Background Cover

If you want the background image to cover the entire element, you can set the background-size property to cover. Also, to make sure the entire element is always covered, set the background-attachment property to fixed. This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions):

    </style> 
        body {
            background-image: url('img_girl.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
    </style>

Background Stretch

If you want the background image to stretch to fit the entire element, you can set the background-size property to 100% 100%:

    </style> 
        body {
            background-image: url('img_girl.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
        }
    </style>

Try resizing the browser window, and you will see that the image will stretch, but always cover the entire element.

HTML <picture> Element

The HTML <picture> element allows you to display different pictures for different devices or screen sizes. The HTML <picture> element gives web developers more flexibility in specifying image resources. The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device. Each <source> element has a media attribute that defines when the image is the most suitable.

    <picture>
        <source media="(min-width: 650px)" srcset="img_food.jpg">
        <source media="(min-width: 465px)" srcset="img_car.jpg">
        <img src="img_girl.jpg">
    </picture>

Note: Always specify an <img> element as the last child element of the <picture> element. The <img> element is used by browsers that do not support the <picture> element, or if none of the <source> tags match.

When to use the Picture Element

There are two main purposes for the <picture> element:

• Bandwidth - If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.

• Format Support - Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.

    <picture>
        <source srcset="img_avatar.png">
        <source srcset="img_girl.jpg">
        <img src="img_beatles.gif" alt="Beatles" style="width:auto;">
    </picture>

Note: The browser will use the first <source> element with matching attribute values, and ignore any following <source> elements.

HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon.

Note: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image is displayed to the left of the page title in the browser tab, like this:

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico". Next, add a <link> element to your "index.html" file, after the <title> element, like this:

    <!DOCTYPE html>
    <html>

    <head>
        <title>My Page Title</title>
        <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    </head>
    
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
    
    </html>

Now, save the "index.html" file and reload it in your browser. Your browser tab should now display your favicon image to the left of the page title.

HTML Page Title

Every web page should have a page title to describe the meaning of the page.

The Title Element

The <title> element adds a title to your page:

    <!DOCTYPE html>
    <html>

    <head>
        <title>My Page Title</title>
    </head>
    
    <body>
        The content of the document......
    </body>
    
    </html>

The title is shown in the browser's title bar:

What is a Good Title?

The title should describe the content and the meaning of the page. The page title is very important for search engine optimization (SEO). The text is used by search engine algorithms to decide the order when listing pages in search results.

The <title> element:

defines a title in the browser toolbar.
provides a title for the page when it is added to favorites.
displays a title for the page in search engine-results.

So, try to make the title as accurate and meaningful as possible!

HTML Tables

HTML tables allow web developers to arrange data into rows and columns. A table in HTML consists of table cells inside rows and columns.

    <table>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr>
    </table>

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row.

Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.

Table Data

Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> is the content of a table cell.

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag.
th stands for table header.

Note: By default, the text in <th> elements are bold and centered, but you can change that with CSS.

Table Borders

HTML tables can have borders of different styles and shapes.
To add a border, use the CSS border property on table, th, and td elements:

    table, th, td {
        border: 1px solid black
    }

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border:

    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

    table, th, td {
        border: 1px solid white;
        border-collapse: collapse;
    }

    th, td {
        border-color: #96D4D4;
    }

Round Table Borders

With the border-radius property, the borders get rounded corners:

    table, th, td {
        border: 1px solid black;
        border-radius: 10px;
    }

Skip the border around the table by leaving out table from the css selector:

    th, td {
        border: 1px solid black;
        border-radius: 10px;
    }

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

    th, td {
        border-style: dotted;
    }

Border Color

With the border-color property, you can set the color of the border.

    th, td {
        border-color: #96D4D4;
    }

Table Sizes

HTML tables can have different sizes for each column, row or the entire table.
Use the style attribute with the width or height properties to specify the size of a table, row or column.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element:

    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the <body> element.

HTML Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:

    <table style="width:100%">
        <tr>
            <th style="width:70%">Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

    <table style="width:100%">
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr style="height:200px">
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

HTML Table Headers

HTML tables can have headers for each column or row, or for many columns/rows.Table headers are defined with th elements. Each th element represents a table cell.

    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a <th> element:

    <table>
        <tr>
            <th>Firstname</th>
            <td>Jill</td>
            <td>Eve</td>
        </tr>
        <tr>
            <th>Lastname</th>
            <td>Smith</td>
            <td>Jackson</td>
        </tr>
        <tr>
            <th>Age</th>
            <td>94</td>
            <td>50</td>
        </tr>
    </table>

Align Table Headers

By default, table headers are bold and centered. To left-align the table headers, use the CSS text-align property:

    th {
        text-align: left;
    }

Header for Multiple Columns

You can have a header that spans over two or more columns. To do this, use the colspan attribute on the <th> element:

    <table>
        <tr>
            <th colspan="2">Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
    </table>

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

Table Caption

You can add a caption that serves as a heading for the entire table. To add a caption to a table, use the <caption> tag:

    <table>
        <caption>Monthly savings</caption>
            <tr>
                <th>Month</th>
                <th>Savings</th>
            </tr>
            <tr>
                <td>January</td>
                <td>$100</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$50</td>
            </tr>
    </table>

Note: The <caption> tag should be inserted immediately after the <table> tag.

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the cells.

Cell Padding

Cell padding is the space between the cell edges and the cell content. By default the padding is set to 0.
To add padding on table cells, use the CSS padding property:

    th, td {
        padding: 15px;
    }

To add padding only above the content, use the padding-top property. Add padding to the other sides with the padding-bottom, padding-left, and padding-right properties:

    th, td {
        padding-top: 10px;
        padding-bottom: 20px;
        padding-left: 30px;
        padding-right: 40px;
    }

Cell Spacing

Cell spacing is the space between each cell. By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property on the table element:

    table {
        border-spacing: 30px;
    }

HTML Table Colspan & Rowspan

HTML tables can have cells that span over multiple rows and/or columns.

Colspan

To make a cell span over multiple columns, use the colspan attribute:

    <table>
        <tr>
            <th colspan="2">Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>43</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>50</td>
        </tr>
    </table>

Note: The value of the colspan attribute represents the number of columns to span.

Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

    <table>
        <tr>
            <th>Name</th>
            <td>Jill</td>
        </tr>
        <tr>
            <th rowspan="2">Phone</th>
            <td>555-1234</td>
        </tr>
        <tr>
            <td>555-8745</td>
        </tr>
    </table>

Note: The value of the rowspan attribute represents the number of rows to span.

HTML Table Styling

Use CSS to make your tables look better.

Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.
To style every other table row element, use the :nth-child(even) selector like this:

    tr:nth-child(even) {
        background-color: #D6EEEE;
    }

Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.

Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.
See the :nth-child(even) for table data elements like this:

    td:nth-child(even), th:nth-child(even) {
        background-color: #D6EEEE;
    }

Note: Put the :nth-child() selector on both th and td elements if you want to have the styling on both headers and regular table cells.

Combine Vertical and Horizontal Zebra Stripes

You can combine the styling from the two examples above and you will have stripes on every other row and every other column. If you use a transparent color you will get an overlapping effect.
Use an rbga() color to specify the transparency of the color:

    tr:nth-child(even) {
        background-color: rbga(150, 212, 212, 0.4);
    }

    th:nth-child(even),td:nth-child(even) {
        background-color: rbga(150, 212, 212, 0.4);
    }

Horizontal Dividers

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.
Add the border-bottom property to all tr elements to get horizontal dividers:

    tr {
        border-bottom: 1px solid #ddd;
    }

Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

    tr:hover {background-color: #D6EEEE;}

HTML Table Colgroup

The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup

If you want to style the first two columns of a table, use the <colgroup> and <col> elements

The <colgroup> element should be used as a container for the column specifications.
Each group is specified with a <col> element.
The span attribute specifies how many columns get the style.
The style attribute specifies the style to give the columns.

    <table>
        <colgroup>
            <col span="2" style="background-color: #D6EEEE">
        </colgroup>
        <tr>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
        </tr>
     </table>

Note: The <colgroup> tag must be a child of a <table> element and should be placed before any other table elements, like <thead>, <ttr>, <ttd> etc., but after the <caption> element, if present.

Legal CSS Properties

There is only a very limited selection of CSS properties that are allowed to be used in the colgroup:

width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.

Multiple Col Elements

If you want to style multiple columns with different styles, use more than one <col> element inside the <colgroup>

    <table>
        <colgroup>
            <col span="2" style="background-color: #D6EEEE">
            <col span="3" style="background-color: pink">
        </colgroup>
        <tr>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
        </tr>
     </table>

Empty Colgroups

If you want to style columns in the middle of a table, insert an "empty" <col> element (with no styles) for the columns before:

    <table>
        <colgroup>
            <col span="3">
            <col span="2" style="background-color: pink">
        </colgroup>
        <tr>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
        </tr>
     </table>

Hide Columns

You can hide columns with the visibility: collapse property:

    <table>
        <colgroup>
            <col span="2">
            <col span="3" style=visibility: collapse>
        </colgroup>
        <tr>
            <th>MON</th>
            <th>TUE</th>
            <th>WED</th>
            <th>THU</th>
        </tr>
     </table>

HTML Basics

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

The HTML <ul> tag defines an unordered (bulleted) list.
An unordered list starts with the <ul> tag. Each list item starts with the >li< tag.
The list items will be marked with bullets (small black circles) by default:

    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

List Item Marker

The CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:

disc - Sets the list item marker to a bullet (default)
circle - Sets the list item marker to a circle
square - Sets the list item marker to a square
none - The list items will not be marked

Example: disc

    <ul style="list-style-type:disc;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

Example: circle

    <ul style="list-style-type:circle;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

Example: Square

    <ul style="list-style-type:square;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

Example: none

    <ul style="list-style-type:none;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

Nested HTML Lists

Lists can be nested (list inside list):

    <ul>
        <li<Coffee</li>
        <li>Tea
            <ul>
                <li>Black Tea</li>
                <li>Green Tea</li>
            </ul>
        </li>
        <li>Milk</li>
    </ul>

Note: A list item (<li>) can contain a new list, and other HTML elements, like images and links, etc.

Horizontal List with CSS

TML lists can be styled in many different ways with CSS. One popular way is to style a list horizontally, to create a navigation menu:

    <!DOCTYPE html>
        <html>
        <head>
        <style>
            ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #333333;
            }

            li {
                float: left;
            }

            li a {
                display: block;
                color: white;
                text-align: center;
                padding: 16px;
                text-decoration: none;
            }

            li a:hover {
                background-color: #111111;
            }
        </style>
        </head>
        
        <body>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#news">News</a></li>
                <li><a href="#contact">Contact</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </body>
    </html>

Ordered HTML List

The HTML <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:

    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

type="1" - The list items will be numbered with numbers (default)
type="A" - The list items will be numbered with uppercase letters
type="a" - The list items will be numbered with lowercase letters
type="I" - The list items will be numbered with uppercase roman numbers
type="i" - The list items will be numbered with lowercase roman numbers

Example: Numbers

    <ol type="1">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

Example: Uppercase Letters

    <ol type="A">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

Example: Lowercase Letters

    <ol type="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

Example: Uppercase Roman Numbers

    <ol type="I">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

Example: Lowercase Roman Numbers

    <ol type="i">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

Control List Counting

By default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the start attribute:

    <ol start="50">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ol>

HTML Description Lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list.
The <dt> tag defines the term (name).
The <dd> tag describes each term.

    <dl>
        <dt>Coffee</dt>
        <dd>- black hot drink<dd>
        <dt>Milk</dt>
        <dd>- white cold drink<dd>
    </dl>

HTML Block and Inline Elements

Every HTML element has a default display value, depending on what type of element it is. The two most common display values are block and inline.

Block-level Elements

A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.

    <p>Hello World</p>
    <div>Hello World</div>

Here are the block-level elements in HTML:

<address> - Defines the contact information for the author/owner of a document or an article.
<article> - Specifies independent, self-contained content.
<aside> - Defines some content aside from the content it is placed in.
<blockquote> - Specifies a section that is quoted from another source.
<canvas> - Used to draw graphics, on the fly, via scripting (usually JavaScript).
<dd> - Used to describe a term/name in a description list.
<div> - Defines a division or a section in an HTML document.
<dl> - Defines a description list.
<dt> - Defines a term/name in a description list.
<fieldset> - Used to group related elements in a form.
<figcaption> - Defines a caption for a <figure> element.
<figure> - Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> - Defines a footer for a document or section.
<form> - Used to create an HTML form for user input.
h1 - h6 - Used to define HTML headings.
<header> - Represents a container for introductory content or a set of navigational links.
<hr> - Defines a thematic break in an HTML page (e.g. a shift of topic).
<li> - Defines a list item.
<main> - Specifies the main content of a document.
<nav> - Defines a set of navigation links.
<noscript> - Defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.
<ol> - Defines an ordered list.
<p> - Defines a paragraph.
<pre> - Defines preformatted text.
<section> - Defines a section in a document.
<table> - Defines an HTML table.
<tfoot> - Used to group footer content in an HTML table.
<ul> - Defines an unordered (bulleted) list.
<video> - Used to embed video content in a document, such as a movie clip or other video streams.

Inline Elements

An inline element does not start on a new line. An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.

    <span>Hello World</span>

Here are the inline elements in HTML:

<a> - Defines a hyperlink, which is used to link from one page to another.
<abbr> - Defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".
<b> - Specifies bold text without any extra importance.
<bdo> - BDO stands for Bi-Directional Override. Ued to override the current text direction.
<br> - Inserts a single line break.
<button> - Defines a clickable button.
<cite> - Defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
<code> - Used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
<dfn> - Stands for the "definition element", and it specifies a term that is going to be defined within the content.
<em> - Used to define emphasized text. The content inside is typically displayed in italic.
<i> - Defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
<img> - Used to embed an image in an HTML page.
<input> - Specifies an input field where the user can enter data.
<kbd> - Used to define keyboard input. The content inside is displayed in the browser's default monospace font.
<label> - Defines a label for several elements:
<map> - Used to define an image map. An image map is an image with clickable areas.
<object> - Defines a container for an external resource.
<output> - Used to represent the result of a calculation (like one performed by a script).
<q> - Defines a short quotation.
<samp> - Used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.
<script> - Used to embed a client-side script (JavaScript).
<select> - Used to create a drop-down list.
<small> - Defines smaller text (like copyright and other side-comments).
<span> - An inline container used to mark up a part of a text, or a part of a document.
<strong> - Used to define text with strong importance. The content inside is typically displayed in bold.
<sub> - Defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H₂O.
<sup> - defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW^[1].
<textarea> - Defines a multi-line text input control.
<time> - Defines a specific time (or datetime).
<var> - Used to defines a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

HTML Div Element

The <div> element is used as a container for other HTML elements. By default a block element, meaning that it takes all available width, and comes with line breaks before and after.

    Lorem Ipsum <div>I am a div</div> dolor sit amet.

Result:

    Lorem Ipsum
    I am a div
    dolor sit amet.

The <Div> element has no required attributes, but style, class and id are common.

<div> as a container

The <div> element is often used to group sections of a web pag

    <div>
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>London has over 9 million inhabitants.</p>
    </div>

Center align a <div> element

If you have a <div> element that is not 100% wide, and you want to center-align it, set the CSS margin property to auto.

    <style>
        div {
            width:300px;
            margin:auto;
        }
    </style>

Multiple <div> elements

You can have many <div> containers on the same page.

    <div>
        <h2>London</h2>
        <p>London is the capital city of England.</p>
        <p>London has over 9 million inhabitants.</p>
    </div>

    <div>
        <h2>Oslo</h2>
        <p>Oslo is the capital city of Norway.</p>
        <p>Oslo has over 700,000 inhabitants.</p>
    </div>

    <div>
        <h2>Rome</h2>
        <p>Rome is the capital city of Italy.</p>
        <p>Rome has over 4 million inhabitants.</p>
    </div>

Aligning <div> elements side by side

When building web pages, you often want to have two or more <div> elements side by side. There are different methods for aligning elements side by side, all include some CSS styling.
We will look at the most common methods:

Float

The CSS float property was not originally meant to align <div> elements side-by-side, but has been used for this purpose for many years. The CSS float property is used for positioning and formatting content and allows elements to be positioned horizontally, rather than vertically.

    <style>
        .mycontainer {
            width:100%;
            overflow:auto;
        }
        .mycontainer div {
            width:33%;
            float:left;
        }
    </style>

Inline-block

If you change the <div> element's display property from block to inline-block, the <div> elements will no longer add a line break before and after, and will be displayed side by side instead of on top of each other.

    <style>
        div {
            width:30%;
            display: inline-block;
        }
    </style>

Flex

The CSS Flexbox Layout Module was introduced to make it easier to design flexible responsive layout structure without using float or positioning. To make the CSS flex method work, surround the <div> elements with another <div> element and give it the status as an inline-block container.

    <style>
        .mycontainer {
            display: flex;
        }
        .mycontainer > div {
            width:33%;
        }
    </style>

Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Sounds almost the same as flex, but has the ability to define more than one row and position each row individually. The CSS grid method requires that you surround the <div> elements with another <div> element and give the status as a grid container, and you must specify the width of each column.

    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 33% 33% 33%;
        }
    </style>

HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class. The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
In the following example we have three <div> elements with a class attribute with the value of "city". All the three <div> elements will be styled equally according to the .city style definition in the head section:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        .city {
            background-color: tomato;
            color: white;
            border: 2px solid black;
            margin: 20px;
            padding: 20px;
        }
    </style>
    </head>
    <body>

        <div class="city">
            <h2>London</h2>
            <p>London is the capital of England.</p>
        </div>

        <div class="city">
            <h2>Paris</h2>
            <p>Paris is the capital of France.</p>
        </div>

        <div class="city">
            <h2>Tokyo</h2>
            <p>Tokyo is the capital of Japan.</p>
        </div>

    </body>
    </html>

In the following example we have two <span> elements with a class attribute with the value of "note". Both <span> elements will be styled equally according to the .note style definition in the head sec

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        .note {
            font-size: 120%;
            color: red;
        }
    </style>
    </head>
    <body>

        <h1>My <span class="note">Important</span> Heading</h1>
        <p>This is some <span class="note">important</span> text.</p>

    </body>
    </html>

Tip: The Class attribute can be used on any HTML element.

Note: The class name is case-sensitive!

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        .city {
            background-color: tomato;
            color: white;
            border: 2px solid black;
            margin: 20px;
            padding: 20px;
        }
    </style>
    </head>
    <body>

        <div class="city">
            <h2>London</h2>
            <p>London is the capital of England.</p>
        </div>

        <div class="city">
            <h2>Paris</h2>
            <p>Paris is the capital of France.</p>
        </div>

        <div class="city">
            <h2>Tokyo</h2>
            <p>Tokyo is the capital of Japan.</p>
        </div>

    </body>
    </html>

Multiple Classes

HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.
In the following example, the first <h2> element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

    <h2 class="city main">London</h2>
    <h2 class="city">Paris</h2>
    <h2 class="city">Tokyo</h2>

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.
In the following example, both <h2> and <p> point to the "city" class and will share the same style:

    <h2 class="city">Paris</h2>
    <p class="city">Paris is the capital of France.</p>

Use of the class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.
JavaScript can access elements with a specific class name with the getElementsByClassName() method:

    <script>
        function myFunction() {
            var x = document.getElementsByClassName("city");
            for (var i = 0; i < x.length; i++) {
            x[i].style.display = "none";
            }
        }
    </script>

Don't worry if you don't understand the code in the example above.
You will learn more about JavaScript under HTML JavaScript, or you can study the JavaScript Tutorial.

id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. You cannot have more than one element with the same id in an HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
In the following example we have a <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        #myHeader {
        background-color: lightblue;
        color: black;
        padding: 40px;
        text-align: center;
        }
    </style>
    </head>
    <body>

        <h1 id="myHeader">My Header</h1>
        
    </body>
    </html>

Note:

The id name is case-sensitive!
The id name must contain at least one character, cannot start with a number, and must not contain whitespaces (spaces, tabs, etc.).

The Syntax For ID

The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}

    <!DOCTYPE html>
    <html>
    <head>
    <style>
        #myHeader {
        background-color: lightblue;
        color: black;
        padding: 40px;
        text-align: center;
        }
    </style>
    </head>
    <body>

        <h1 id="myHeader">My Header</h1>
        
    </body>
    </html>

Difference Between Class and ID

A class name can be used by multiple HTML elements, while an id name must only be used by one HTML element within the page:

    <style>
    /* Style the element with the id "myHeader" */
        #myHeader {
            background-color: lightblue;
            color: black;
            padding: 40px;
            text-align: center;
        }

    /* Style all elements with the class name "city" */
        .city {
            background-color: tomato;
            color: white;
            padding: 10px;
        }
    </style>

    <!-- An element with a unique id -->
    <h1 id="myHeader">My Cities</h1>

    <!-- Multiple elements with same class -->
    <h2 class="city">London</h2>
    <p>London is the capital of England.</p>

    <h2 class="city">Paris</h2>
    <p>Paris is the capital of France.</p>

    <h2 class="city">Tokyo</h2>
    <p>Tokyo is the capital of Japan.</p>

HTML Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a webpage. Bookmarks can be useful if your page is very long.
To use a bookmark, you must first create it, and then add a link to it. Then, when the link is clicked, the page will scroll to the location with the bookmark.

First, create a bookmark with the id attribute:

    <h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

    <a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

    <a href="html_demo.html#C4">Jump to Chapter 4</a>

Using the id Attribute in JavaScript

The id attribute can also be used by JavaScript to perform some tasks for that specific element. JavaScript can access an element with a specific id with the getElementById() method:

    <script>
        function displayResult() {
            document.getElementById("myHeader").innerHTML = "Have a nice day!";
        }
    </script>

Learn more about JavaScript under HTML JavaScript, or you can study the JavaScript Tutorial.

iframes

An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.

    <iframe src="url" title="description"></iframe>

Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.
The height and width are specified in pixels by default:

    <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>

Or you can add the style attribute and use the CSS height and width properties:

    <iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>

Iframe - Remove the Border

By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:

    <iframe src="demo_iframe.htm" style="border:none;" title="Iframe Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's border:

    <iframe src="demo_iframe.htm" style="border:2px solid red;" title="Iframe Example"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:

     <iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>

    <p><a href="https://daemons-code-library.freesite.online" target="iframe_a">Daemons Code Library</a></p>

Javascript

JavaScript makes HTML pages more dynamic and interactive.

The HTML <script> Tag

The HTML <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. To select an HTML element, JavaScript most often uses the document.getElementById() method.
This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>

Note: You can learn much more about JavaScript in the JavaScript Tutorial

A Taste of JavaScript

Here are some examples of what JavaScript can do:

• JavaScript can change content:

    document.getElementById("demo").innerHTML = "Hello JavaScript!";

• JavaScript can change styles:

    document.getElementById("demo").style.fontSize = "25px";
    document.getElementById("demo").style.color = "red";
    document.getElementById("demo").style.backgroundColor = "yellow";

• JavaScript can change attributes:

    document.getElementById("image").src = "picture.gif";

The HTML <noscript> Tag

The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts:

    <script>
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
    </script>
    <noscript>Sorry, your browser does not support JavaScript!</noscript>

File Paths

A file path describes the location of a file in a website's folder structure.

File Path Examples

Path	Description
<img src="picture.jpg">	The "picture.jpg" file is located in the same folder as the current page.
<img src="images/picture.jpg">	The "picture.jpg" file is located in the images folder in the current folder.
<img src="/images/picture.jpg">	The "picture.jpg" file is located in the images folder at the root of the current web.
<img src="../picture.jpg">	The "picture.jpg" file is located in the folder one level up from the current folder.

HTML File Paths

A file path describes the location of a file in a website's folder structure.
File paths are used when linking to external files, like:

Web pages
Images
Stylesheets
JavaScripts

Absolute File Paths

An absolute file path is the full URL to a file:

    <img src="https://daemons-code-library.freesite.online/images/picture.jpg" alt="Mountain">

Relative File Paths

A relative file path points to a file relative to the current page.

• In the following example, the file path points to a file in the images folder located at the root of the current web:

    <img src="/images/picture.jpg" alt="Mountain">

• In the following example, the file path points to a file in the images folder located in the current folder:

    <img src="images/picture.jpg" alt="Mountain">

• In the following example, the file path points to a file in the images folder located in the folder one level up from the current folder:

    <img src="../images/picture.jpg" alt="Mountain">

Best Practice

It is best practice to use relative file paths (if possible). When using relative file paths, your web pages will not be bound to your current base URL. All links will work on your own computer (localhost) as well as on your current public domain and your future public domains.

The Head Element

The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script> and <base>.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed on the page. Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML <title> Element

The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The <title> element is required in HTML documents! The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

The <title> Element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search engine-results

So, try to make the title as accurate and meaningful as possible!

A simple HTML document:

    <!DOCTYPE html>
    <html>
    <head>
        <title>A Meaningful Page Title</title>
    </head>
    <body>

        The content of the document......

    </body>
    </html>

The HTML <style> Element

The <style> element is used to define style information for a single HTML page:

    <style>
        body {background-color: powderblue;}
        h1 {color: red;}
        p {color: blue;}
    </style>

The HTML <link> Element

The <link> element defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets:

    <link rel="stylesheet" href="mystyle.css">

The HTML <meta> Element

The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.
The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services.

Examples:

• Define the character set used:

    <meta charset="UTF-8">

• Define keywords for search engines:

    <meta name="keywords" content="HTML, CSS, JavaScript">

• Define a description of your web page:

    <meta name="description" content="Free Web tutorials">

• Define the author of a page:

    <meta name="author" content="Geek Coders">

• Refresh document every 30 seconds:

    <meta http-equiv="refresh" content="30">

• Setting the viewport to make your website look good on all devices:

    <meta "viewport" content="width=device-width, initial-scale=1.0">

Setting The Viewport

The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
You should include the following <meta> element in all your web pages:

    <meta "viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

The HTML <script> Element

The <script> element is used to define client-side JavaScripts.
The following JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":

    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello JavaScript!";
        }
    <script>

To learn all about JavaScript, look at JavaScript Tutorial

The HTML <base> Element

The <base> element specifies the base URL and/or target for all relative URLs in a page. The <base> tag must have either a href or a target attribute present, or both.
There can only be one single <base> element in a document!

    <head>
        <base href="https://daemons-code-library.freesite.online/" target="_blank">
    </head>

    <body>
        <img src="images/stickman.gif" width="24" height="39" alt="Stickman">
        <a href="tags/tag_base.asp">HTML base Tag</a>
    </body>

Layout Elements and Techniques

Websites often display content in multiple columns (like a magazine or a newspaper).

HTML Layout Elements

HTML has several semantic elements that define the different parts of a web page:

<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element

You can read more about semantic elements in the HTML Semantics section.

HTML Layout Techniques

There are four different techniques to create multicolumn layouts. Each technique has its pros and cons:

CSS framework
CSS float property
CSS flexbox
CSS grid

CSS Frameworks

If you want to create your layout fast, you can use a CSS framework, like Bootstrap.

CSS Float Layout

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work.
Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.

Learn more about float in the CSS Float and Clear section.

CSS Flexbox Layout

Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Learn more about flexbox in the CSS Flexbox section.

CSS Grid Layout

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Learn more about CSS grids in the CSS grids section.

Responsive Web Design

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:

    <meta "viewport" content="width=device-width, initial-scale=1.0">

This will set the viewport of your page, which will give the browser instructions on how to control the page's dimensions and scaling.

Responsive Images

Responsive images are images that scale nicely to fit any browser size.

The width Property

If the CSS width property is set to 100%, the image will be responsive and scale up and down:

    <img src="img_girl.jpg" style="width:100%;">

The image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

    <img src="img_girl.jpg" style="max-width:100%;">

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

    <picture>
        <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
        <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
        <source srcset="flowers.jpg">
        <img src="img_smallflower.jpg" alt="Flowers">
    </picture>

Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width".
That way the text size will follow the size of the browser window:

    <h1 style="font-size:10vw">Hello World</h1>

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.

Example: resize the browser window to see that the three div elements below will display horizontally on large screens and stack vertically on small screens:

    <style>
        .left, .right {
            float: left;
            width: 20%; /* The width is 20%, by default */
        }

        .main {
            float: left;
            width: 60%; /* The width is 60%, by default */
        }

        /* Use a media query to add a breakpoint at 800px: */
        @media screen and (max-width: 800px) {
  .         left, .main, .right {
            width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
            }
        }
    </style>

To learn more about Media Queries and Responsive Web Design, see the CSS Responsive Web Design Tutorial.

Responsive Web Design - Frameworks

Bootstrap

A popular CSS framework is Bootstrap:

    <!DOCTYPE html>
        <html lang="en">
        <head>
            <title>Bootstrap 5 Example</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        </head>
        <body>
            <div class="container-fluid p-5 bg-primary text-white text-center">
                <h1>My First Bootstrap Page</h1>
                <p>Resize this responsive page to see the effect!</p>
            </div>

            <div class="container mt-5">
            <div class="row">
                <div class="col-sm-4">
                <h3>Column 1</h3>
                <p>Lorem ipsum...</p>
                </div>
                <div class="col-sm-4">
                <h3>Column 2</h3>
                <p>Lorem ipsum...</p>
                </div>
                <div class="col-sm-4">
                <h3>Column 3</h3>
                <p>Lorem ipsum...</p>
                </div>
            </div>
            </div>
        </body>
        </html>

To learn more about Bootstrap, go to the Bootstrap tutorial.

Computer Code Elements

HTML contains several elements for defining user input and computer code.

HTML <kbd> For Keyboard Input

The HTML <kbd> element is used to define keyboard input. The content inside is displayed in the browser's default monospace font.

    <p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

HTML <samp> For Program Output

The HTML <samp> element is used to define sample output from a computer program. The content inside is displayed in the browser's default monospace font.

    <p>Message from my computer:</p>
    <p><samp>File not found.<br>Press F1 to continue</samp></p>

HTML <code> For Computer Code

The HTML <code> element is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.

    <code>
        x = 5;
        y = 6;
        z = x + y;
    </code>

Notice that the <code> element does NOT preserve extra whitespace and line-breaks. To preserve extra whitespace and line-breaks, you can put the <code> element inside a <pre> element:

    <pre>
        <code>
            x = 5;
            y = 6;
            z = x + y;
        </code>
    </pre>

HTML <var> For Variables

he HTML <var> element is used to define a variable in programming or in a mathematical expression. The content inside is typically displayed in italic.

    <p>The area of a triangle is: 1/2 x <var>b</var> x <var>h</var>, 
    where <var>b</var> is the base, and <var>h</var> is the vertical height.

Semantic Elements

Semantic elements = elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
• non-semantic elements: <div> and <span> - Tells nothing about its content. • semantic elements: <img>, <table>, and <article> - Clearly defines its content.

Semantic Elements in HTML

Many web-sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.
n HTML there are several semantic elements that can be used to define different parts of a web page:

Tag	Description
<article>;	Defines independent, self-contained content.
<aside>;	Defines content aside from the page content.
<details>;	Defines additional details that the user can view or hide.
<figcaption>;	Defines a caption for a <figure>; element.
<figure>;	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>;	Defines a footer for a document or section.
<header>;	Specifies a header for a document or section.
<main>;	Specifies the main content of a document.
<mark>;	Defines marked/highlighted text.
<nav>;	Defines navigation links.
<section>;	Defines a section in a document.
<summary>;	Defines a visible heading for a <details>; element.
<time>;	Defines a date/time

HTML <section> Element

The <section> element defines a section in a document -> "A section is a thematic grouping of content, typically with a heading."
Examples of where a <section> element can be used:

Chapters
Introduction
News Items
Contact Information

A web page could normally be split into sections for introduction, content, and contact information.

    <section>
        <h1>WWF</h1>
        <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
    </section>

    </section>
        <h1>WWF's Panda symbol</h1>
        <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
    </section>

HTML <article> Element

The <article> element specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the website.
Examples of where the <article> element can be used:

Forum Posts
Blog Posts
User Comments
Product Cards
Newspaper Articles

Article with independent, self-contained content:

    <article>
        <h2>Google Chrome</h>
        <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
    </article>

    <article>
        <h2>Mozilla Firefox<<h2>
        <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
    </article>

    <article>
        <h2>Microsoft EdgeMicrosoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
    </article>

Nesting <article> in <section> or Vice Versa?

Can we use the definitions to decide how to nest those elements?
No, we cannot!
So, you will find HTML pages with <section> elements containing <article> elements, and <article> elements containing <section> elements.

HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.
A <header> element typically contains:

one or more heading elements (<h1> - <h6>)
logo or icon
authorship information

Note: You can have several <header> elements in one HTML document. However, <header> cannot be placed within a <footer>, <address> or another <header> element

Example: A header for a <article>:

    <article>
        <header>
            <h1>What Does WWF Do?</h1>
            <p>WWF's mission:</p>
        </header>
        <p>WWF's mission is to stop the degradation of our planet's natural environment,
        and build a future in which humans live in harmony with nature.</p>
    </article>

HTML <footer> Element

The <footer> element defines a footer for a document or section.
A <footer> element typically contains:

authorship information
copyright information
contact information
sitemap
back to top links
related documents

You can have several <footer> elements in one document.

    <footer>
        <p>Author: Hege Refsnes</p>
        <p><a href="mailto:hege@example.com">hege@example.com</a></p>
    </footer>

HTML <nav> Element

The <nav> element defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

    <nav>
        <a href="/html/">HTML</a>
        <a href="/css/">CSS</a>
        <a href="/js/">JavaScript</a>
        <a href="/jquery/">jQuery</a>
    </nav>

HTML <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a sidebar). The <aside> content should be indirectly related to the surrounding content.

    <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

    <aside>
        <h4>Epcot Center</h4>
        <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </aside>

Use CSS to style the <aside> element:

    <html>
    <head>
    <style>
        aside {
        width: 30%;
        padding-left: 15px;
        margin-left: 15px;
        float: right;
        font-style: italic;
        background-color: lightgray;
        }
    </style>
    </head>
    <body>

        <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

        <aside>
            <h4>Epcot Center</h4>
            <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
        </aside>

        <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
        <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

    </body>
    </html>

HTML <figure> and <figcaption> Elements

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. The <figcaption> tag defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element. The <img> element defines the actual image/illustration.

    <figure>
        <img src="pic_trulli.jpg" alt="Trulli">
        <figcaption> Fig1. - Trulli, Puglia, Italy.</figcaption> 
    </figure>

Why Semantic Elements?

A semantic Web allows data to be shared and reused across applications, enterprises, and communities.

Character Entities

Reserved characters in HTML must be replaced with entities:

< (less than) = <
> (greater than) = >

HTML Character Entities

Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your HTML text, the browser might mix them with tags. Entity names or entity numbers can be used to display reserved HTML characters.
Entity names look like this:

    &entity_name;

Entity numbers look like this:

    &entity_number;

To display a less than sign (<) we must write: < or <

Entity names are easier to remember than entity numbers.

Non-breaking Space

A commonly used HTML entity is the non-breaking space:  
A non-breaking space is a space that will not break into a new line. Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.

Examples:

5 10
10 km/h
10 PM

Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the   character entity.

The non-breaking hyphen (‑) is used to define a hyphen character (‑) that does not break into a new line.

Some Useful HTML Character Entities

Result	Description	Name	Number
	non-breaking space	&nbsp;	&#160;
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	double quotation mark	&quot;	&#34;
'	single quotation mark	&apos;	&#39;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;
™	trademark	&trade;	&#8482;

Note: Entity names are case-sensitive.

Combining Diacritical Marks

A diacritical mark is a "glyph" added to a letter. Some diacritical marks, like grave (`) and acute (´) are called accents. Diacritical marks can be used in combination with alphanumeric characters to produce a character that is not present in the character set (encoding) used in the page.

Here are some examples:

Mark	Character	Construct	Result
̀	a	a&#768;	à
́	a	a&#769;	á
̂	a	a&#770;	â
̃	a	a&#771;	ã
̀	O	O&#768;	Ò
́	O	O&#769;	Ó
̂	O	O&#770;	Ô
̃	O	O&#771;	Õ

There are more examples in the next chapter.

HTML Basics

Symbol Entities

Symbols or letters that are not present on your keyboard can be added to HTML using entities.

HTML Symbol Entities

HTML entities were described in the previous chapter. Many mathematical, technical, and currency symbols, are not present on a normal keyboard. To add such symbols to an HTML page, you can use the entity name or the entity number (a decimal or a hexadecimal reference) for the symbol:

    <p>I will display &euro;</p>
    <p>I will display &#8364;</p>
    <p>I will display &#x20AC;</p>

Will display as:

    I will display €
    I will display €
    I will display €

Some Mathematical Symbols Supported by HTML

Character	Number	Entity	Description
∀	&#8704;	&forall;	For all
∂	&#8706;	&part;	Partial differential
∃	&#8707;	&exist;	There exists
∅	&#8709;	&empty;	Empty sets
∇	&#8711;	&nabla;	Nabla
∈	&#8712;	&isin;	Element of
∉	&#8713;	&notin;	Not an element of
∋	&#8715;	&ni;	Contains as member
∏	&#8719;	&prod;	N-ary product
∑	&#8721;	&sum;	N-ary summation

Full Math Symbols Reference

Some Greek Letters Supported by HTML

Character	Number	Entity	Description
Α	&#913;	&Alpha;	GREEK ALPHA
Β	&#914;	&Beta;	GREEK BETA
Γ	&#915;	&Gamma;	GREEK GAMMA
Δ	&#916;	&Delta;	GREEK DELTA
Ε	&#917;	&Epsilon;	GREEK EPSILON
Ζ	&#918;	&Zeta;	GREEK ZETA

Full Greek Reference

Some Other Entities Supported by HTML

Character	Number	Entity	Description
©	&#169;	&copy;	COPYRIGHT
®	&#174;	&reg;	REGISTERED TRADEMARK
€	&#8364;	&euro;	EURO SIGN
™	&#8482;	&trade;	TRADEMARK
←	&#8592;	&larr;	LEFT ARROW
↑	&#8593;	&uarr;	UP ARROW
→	&#8594;	&rarr;	RIGHT ARROW
↓	&#8595;	&darr;	DOWN ARROW
♠	&#9824;	&spades;	SPADE
♣	&#9827;	&clubs;	CLUB
♥	&#9829;	&hearts;	HEART
♦	&#9830;	&diams;	DIAMOND

Full Currency Reference
Full Arrows Reference
Full Symbols Reference

Emojis

Emojis are characters from the UTF-8 character set:

What are Emojis?

Emojis look like images, or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set. UTF-8 covers almost all of the characters and symbols in the world.

Emoji Characters

Emojis are also characters from the UTF-8 alphabet:

😄 is 128516
😍 is 128525
💗 is 128151

Example:

    <!DOCTYPE html>
    <html>
        <meta charset="UTF-8">
    <body>

        <h1>My First Emoji</h1>
        <p>&#128512;</p>

    </body>
    </html>

Since Emojis are characters, they can be copied, displayed, and sized just like any other character in HTML

    <!DOCTYPE html>
    <html>
        <meta charset="UTF-8">
    <body>

        <h1>Sized Emojis</h1>
        <p style="font-size:48px">
        &#128512; &#128516; &#128525; &#128151;
        </p>

    </body>
    </html>

Emojis

Emoji	Value
🗻	&#128507;
🗼	&#128508;
🗽	&#128509;
🗾	&#128510;
🗿	&#128511;
😀	&#128512;
😁	&#128513;
😂	&#128514;
😃	&#128515;
😄	&#128516;
😅	&#128517;

Full HTML Emoji Reference

HTML Emojis Examples

HTML Emoji Transport Symbols
HTML Emoji Office Symbols
HTML Emoji People Symbols
HTML Emoji Animals Symbols

The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.
This is specified in the tag:

    <meta charset="UTF-8">

If not specified, UTF-8 is the default character set in HTML.

UTF-8 Characters

Many UTF-8 characters cannot be typed on a keyboard, but they can always be displayed using numbers (called entity numbers):

A is 65
B is 66
C is 67

Example:

    <!DOCTYPE html>
    <html>
        <meta charset="UTF-8">
    <body>
    
        <p>I will display A B C</p>
        <p>I will display &#65; &#66; &#67;</p>
    
    </body>
    </html>

Example explained:

The <meta charset="UTF-8"> element defines the character set.
The characters A, B, and C, are displayed by the numbers 65, 66, and 67.
To let the browser understand that you are displaying a character, you must start the entity number with &# and end it with ; (semicolon).

Encoding (Character Sets)

To display an HTML page correctly, a web browser must know which character set to use.

The HTML charset Attribute

The character set is specified in the <meta> tag:

    <meta charset="UTF-8">

The HTML5 specification encourages web developers to use the UTF-8 character set.
UTF-8 covers almost all of the characters and symbols in the world!

Full UTF-8 Reference

The ASCII Character Set

ASCII was the first character encoding standard for the web. It defined 128 different characters that could be used on the internet:

English letters (A-Z)
Numbers (0-9)
Special characters like ! $ + - ( ) @ < >.

The ANSI Character Set

ANSI (Windows-1252) was the original Windows character set:

Identical to ASCII for the first 127 characters
Special characters from 128 to 159
Identical to UTF-8 from 160 to 255

    <meta charset="Windows-1252">

The ISO-8859-1 Character Set

ISO-8859-1 was the default character set for HTML 4. This character set supported 256 different character codes. HTML 4 also supported UTF-8.

Identical to ASCII for the first 127 characters
Does not use the characters from 128 to 159
Identical to ANSI and UTF-8 from 160 to 255

HTML4 Example:

    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

HTML5 Example:

    <meta charset="ISO-8859-1">

The UTF-8 Character Set

Identical to ASCII for the values from 0 to 127
Does not use the characters from 128 to 159
Identical to ANSI and 8859-1 from 160 to 255
Continues from the value 256 to 10 000 characters

    <meta charset="UTF-8">

Differences Between Character Sets

The following table displays the differences between the character sets described above:

Number	ASCII	ANSI	8859	UTF-8	Description
32					space
33	!	!	!	!	exclamation mark
34	"	"	"	"	quotation mark
35	#	#	#	#	number sign
36	$	$	$	$	dollar sign
37	%	%	%	%	percent sign
38	&	&	&	&	ampersand
39	'	'	'	'	apostrophe
40	(	(	(	(	left parenthesis
41	)	)	)	)	right parenthesis
42	*	*	*	*	asterisk
43	+	+	+	+	plus sign
44	,	,	,	,	comma
45	-	-	-	-	hyphen-minus
46	.	.	.	.	full stop
47	/	/	/	/	solidus
48	0	0	0	0	digit zero
49	1	1	1	1	digit one
50	2	2	2	2	digit two
51	3	3	3	3	digit three
52	4	4	4	4	digit four
53	5	5	5	5	digit five
54	6	6	6	6	digit six
55	7	7	7	7	digit seven
56	8	8	8	8	digit eight
57	9	9	9	9	digit nine
58	:	:	:	:	colon
59	;	;	;	;	semicolon
60	<	<	<	<	less than
61	=	=	=	=	equals sign
62	>	>	>	>	greater than
63	?	?	?	?	question mark
64	@	@	@	@	commercial at
65	A	A	A	A	Latin A
66	B	B	B	B	Latin B
67	C	C	C	C	Latin C
68	D	D	D	D	Latin D
69	E	E	E	E	Latin E
70	F	F	F	F	Latin F
71	G	G	G	G	Latin G
72	H	H	H	H	Latin H
73	I	I	I	I	Latin I
74	J	J	J	J	Latin J
75	K	K	K	K	Latin K
76	L	L	L	L	Latin L
77	M	M	M	M	Latin M
78	N	N	N	N	Latin N
79	O	O	O	O	Latin O
80	P	P	P	P	Latin P
81	Q	Q	Q	Q	Latin Q
82	R	R	R	R	Latin R
83	S	S	S	S	Latin S
84	T	T	T	T	Latin T
85	U	U	U	U	Latin U
86	V	V	V	V	Latin V
87	W	W	W	W	Latin W
88	X	X	X	X	Latin X
89	Y	Y	Y	Y	Latin Y
90	Z	Z	Z	Z	Latin Z
91	[	[	[	[	left square bracket
92	\	\	\	\	reverse solidus
93	]	]	]	]	right square bracket
94	^	^	^	^	circumflex accent
95	_	_	_	_	low line
96	`	`	`	`	grave accent
97	a	a	a	a	Latin small a
98	b	b	b	b	Latin small b
99	c	c	c	c	Latin small c
100	d	d	d	d	Latin small d
101	e	e	e	e	Latin small e
102	f	f	f	f	Latin small f
103	g	g	g	g	Latin small g
104	h	h	h	h	Latin small h
105	i	i	i	i	Latin small i
106	j	j	j	j	Latin small j
107	k	k	k	k	Latin small k
108	l	l	l	l	Latin small l
109	m	m	m	m	Latin small m
110	n	n	n	n	Latin small n
111	o	o	o	o	Latin small o
112	p	p	p	p	Latin small p
113	q	q	q	q	Latin small q
114	r	r	r	r	Latin small r
115	s	s	s	s	Latin small s
116	t	t	t	t	Latin small t
117	u	u	u	u	Latin small u
118	v	v	v	v	Latin small v
119	w	w	w	w	Latin small w
120	x	x	x	x	Latin small x
121	y	y	y	y	Latin small y
122	z	z	z	z	Latin small z
123	{	{	{	{	left curly bracket
124	\|	\|	\|	\|	vertical line
125	}	}	}	}	right curly bracket
126	~	~	~	~	tilde
127	DEL
128	€	€	€	€	euro sign
129					undefined
130	‚	‚	‚	‚	single low-9 quotation mark
131	ƒ	ƒ	ƒ	ƒ	Latin small letter f with hook
132	„	„	„	„	double low-9 quotation mark
133	…	…	…	…	horizontal ellipsis
134	†	†	†	†	dagger
135	‡	‡	‡	‡	double dagger
136	ˆ	ˆ	ˆ	ˆ	modifier letter circumflex accent
137	‰	‰	‰	‰	per mille sign
138	Š	Š	Š	Š	Latin capital letter S with caron
139	‹	‹	‹	‹	single left-pointing angle quotation mark
140	Œ	Œ	Œ	Œ	Latin capital ligature OE
141					undefined
142	Ž	Ž	Ž	Ž	Latin capital letter Z with caron
143					undefined
144					undefined
145	‘	‘	‘	‘	left single quotation mark
146	’	’	’	’	right single quotation mark
147	“	“	“	“	left double quotation mark
148	”	”	”	”	right double quotation mark
149	•	•	•	•	bullet
150	–	–	–	–	en dash
151	—	—	—	—	em dash
152	˜	˜	˜	˜	small tilde
153	™	™	™	™	trade mark sign
154	š	š	š	š	Latin small letter s with caron
155	›	›	›	›	single right-pointing angle quotation mark
156	œ	œ	œ	œ	Latin small ligature oe
157					undefined
158	ž	ž	ž	ž	Latin small letter z with caron
159	Ÿ	Ÿ	Ÿ	Ÿ	Latin capital letter Y with diaeresis
160					non-breaking space
161	¡	¡	¡	¡	inverted exclamation mark
162	¢	¢	¢	¢	cent sign
163	£	£	£	£	pound sign
164	¤	¤	¤	¤	currency sign
165	¥	¥	¥	¥	yen sign
166	¦	¦	¦	¦	broken bar
167	§	§	§	§	section sign
168	¨	¨	¨	¨	diaeresis
169	©	©	©	©	copyright sign
170	ª	ª	ª	ª	feminine ordinal indicator
171	«	«	«	«	left-pointing double angle quotation mark
172	¬	¬	¬	¬	not sign
173					soft hyphen
174	®	®	®	®	registered sign
175	¯	¯	¯	¯	macron
176	°	°	°	°	degree sign
177	±	±	±	±	plus-minus sign
178	²	²	²	²	superscript two
179	³	³	³	³	superscript three
180	´	´	´	´	acute accent
181	µ	µ	µ	µ	micro sign
182	¶	¶	¶	¶	pilcrow sign
183	·	·	·	·	middle dot
184	¸	¸	¸	¸	cedilla
185	¹	¹	¹	¹	superscript one
186	º	º	º	º	masculine ordinal indicator
187	»	»	»	»	right-pointing double angle quotation mark
188	¼	¼	¼	¼	vulgar fraction one quarter
189	½	½	½	½	vulgar fraction one half
190	¾	¾	¾	¾	vulgar fraction three quarters
191	¿	¿	¿	¿	inverted question mark
192	À	À	À	À	Latin capital letter A with grave
193	Á	Á	Á	Á	Latin capital letter A with acute
194	Â	Â	Â	Â	Latin capital letter A with circumflex
195	Ã	Ã	Ã	Ã	Latin capital letter A with tilde
196	Ä	Ä	Ä	Ä	Latin capital letter A with diaeresis
197	Å	Å	Å	Å	Latin capital letter A with ring above
198	Æ	Æ	Æ	Æ	Latin capital letter AE
199	Ç	Ç	Ç	Ç	Latin capital letter C with cedilla
200	È	È	È	È	Latin capital letter E with grave
201	É	É	É	É	Latin capital letter E with acute
202	Ê	Ê	Ê	Ê	Latin capital letter E with circumflex
203	Ë	Ë	Ë	Ë	Latin capital letter E with diaeresis
204	Ì	Ì	Ì	Ì	Latin capital letter I with grave
205	Í	Í	Í	Í	Latin capital letter I with acute
206	Î	Î	Î	Î	Latin capital letter I with circumflex
207	Ï	Ï	Ï	Ï	Latin capital letter I with diaeresis
208	Ð	Ð	Ð	Ð	Latin capital letter ETH
209	Ñ	Ñ	Ñ	Ñ	Latin capital letter N with tilde
210	Ò	Ò	Ò	Ò	Latin capital letter O with grave
211	Ó	Ó	Ó	Ó	Latin capital letter O with acute
212	Ô	Ô	Ô	Ô	Latin capital letter O with circumflex
213	Õ	Õ	Õ	Õ	Latin capital letter O with tilde
214	Ö	Ö	Ö	Ö	Latin capital letter O with diaeresis
215	×	×	×	×	multiplication sign
216	Ø	Ø	Ø	Ø	Latin capital letter O with stroke
217	Ù	Ù	Ù	Ù	Latin capital letter U with grave
218	Ú	Ú	Ú	Ú	Latin capital letter U with acute
219	Û	Û	Û	Û	Latin capital letter U with circumflex
220	Ü	Ü	Ü	Ü	Latin capital letter U with diaeresis
221	Ý	Ý	Ý	Ý	Latin capital letter Y with acute
222	Þ	Þ	Þ	Þ	Latin capital letter THORN
223	ß	ß	ß	ß	Latin small letter sharp s
224	à	à	à	à	Latin small letter a with grave
225	á	á	á	á	Latin small letter a with acute
226	â	â	â	â	Latin small letter a with circumflex
227	ã	ã	ã	ã	Latin small letter a with tilde
228	ä	ä	ä	ä	Latin small letter a with diaeresis
229	å	å	å	å	Latin small letter a with ring above
230	æ	æ	æ	æ	Latin small letter ae
231	ç	ç	ç	ç	Latin small letter c with cedilla
232	è	è	è	è	Latin small letter e with grave
233	é	é	é	é	Latin small letter e with acute
234	ê	ê	ê	ê	Latin small letter e with circumflex
235	ë	ë	ë	ë	Latin small letter e with diaeresis
236	ì	ì	ì	ì	Latin small letter i with grave
237	í	í	í	í	Latin small letter i with acute
238	î	î	î	î	Latin small letter i with circumflex
239	ï	ï	ï	ï	Latin small letter i with diaeresis
240	ð	ð	ð	ð	Latin small letter eth
241	ñ	ñ	ñ	ñ	Latin small letter n with tilde
242	ò	ò	ò	ò	Latin small letter o with grave
243	ó	ó	ó	ó	Latin small letter o with acute
244	ô	ô	ô	ô	Latin small letter o with circumflex
245	õ	õ	õ	õ	Latin small letter o with tilde
246	ö	ö	ö	ö	Latin small letter o with diaeresis
247	÷	÷	÷	÷	division sign
248	ø	ø	ø	ø	Latin small letter o with stroke
249	ù	ù	ù	ù	Latin small letter u with grave
250	ú	ú	ú	ú	Latin small letter u with acute
251	û	û	û	û	Latin small letter u with circumflex
252	ü	ü	ü	ü	Latin small letter u with diaeresis
253	ý	ý	ý	ý	Latin small letter y with acute
254	þ	þ	þ	þ	Latin small letter thorn
255	ÿ	ÿ	ÿ	ÿ	Latin small letter y with diaeresis

Uniform Resource Locators

A URL is another word for a web address. A URL can be composed of words (e.g. daemons-code-library.freesite.online), or an Internet Protocol (IP) address (e.g. 192.68.20.50). Most people enter the name when surfing, because names are easier to remember than numbers.

URL - Uniform Resource Locator

Web browsers request pages from web servers by using a URL. A Uniform Resource Locator (URL) is used to address a document (or other data) on the web. A web address like https://daemons-code-library.freesite.online/HTML/index.php follows these syntax rules:

    scheme://prefix.domain:port/path/filename

Explanantion:

scheme - defines the type of Internet service (most common is http or https)
prefix - defines a domain prefix (default for http is www)
domain - defines the Internet domain name (like freesite.online)
port - defines the port number at the host (default for http is 80)
path - defines a path at the server (If omitted: the root directory of the site)
filename - defines the name of a document or resource

Common URL Schemes

The table below lists some common schemes:

Scheme	Short for	Used for
http	HyperText Transfer Protocol	Common web pages. Not encrypted
https	Secure HyperText Transfer Protocol	Secure web pages. Encrypted
ftp	File Transfer Protocol	Downloading or uploading files
file		A file on your computer

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted. URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet. URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits. URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

    Hello Günter

The server has processed your input and returned this answer.

    text=Hello+G%C3%BCnter

ASCII Encoding Examples

Your browser will encode input, according to the character-set used in your page. The default character-set in HTML5 is UTF-8.

Character	From Windows-1252	From UTF-8
€	%80	%E2%82%AC
£	%A3	%C2%A3
©	%A9	%C2%A9
®	%AE	%C2%AE
À	%C0	%C3%80
Á	%C1	%C3%81
Â	%C2	%C3%82
Ã	%C3	%C3%83
Ä	%C4	%C3%84
Å	%C5	%C3%85

URL Encoding Reference

Style Guide

Consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.
Here are some guidelines and tips for creating good HTML code.

Always Declare Document Type

Always declare the document type as the first line in your document.
The correct document type for HTML is:

    <!DOCTYPE html>

Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.
However, we recommend using lowercase element names, because:

Mixing uppercase and lowercase names looks bad.
Developers normally use lowercase names.
Lowercase looks cleaner.
Lowercase is easier to type.

Good:

    <body>
        <p>This is a paragraph.</p>
    </body>

Bad:

    <BODY>
        <P>This is a paragraph.</P>
    </BODY>

Close All HTML Elements

In HTML, you do not have to close all elements (for example the <p> element).
However, we strongly recommend closing all HTML elements, like this:

Good:

    <section>
        <p>This is a paragraph.</p>
        <p>This is a paragraph.</p>
    </section>

Bad:

    <section>
        <p>This is a paragraph.
        <p>This is a paragraph.
    </section>

HTML allows mixing uppercase and lowercase letters in attribute names.
However, we recommend using lowercase attribute names, because:

Mixing uppercase and lowercase names looks bad.
Developers normally use lowercase names.
Lowercase looks cleaner.
Lowercase is easier to type.

Good:

    <a href="https://daemons-code-library.freesite.online/html/">Visit our HTML tutorial</a>

Bad:

    <a HREF="https://daemons-code-library.freesite.online/html/">Visit our HTML tutorial</a>

Always Quote Attribute Values

HTML allows attribute values without quotes.
However, we recommend quoting attribute values, because:

Developers normally quote attribute values.
Quoted values are easier to read.
You MUST use quotes if the value contains spaces.

Good:

    <table class="striped">

Bad:

    <table class=striped>

Very Bad:

This will not work, because the value contains spaces:

    <table class=table striped>

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Good:

    <img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Bad:

    <img src="html5.gif">

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Good:

    <link rel="stylesheet" href="styles.css">

Bad:

    <llink rel = "stylesheet" href = "styles.css">

Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code. Try to avoid too long code lines.

Blank Lines and Indentation

Do not add blank lines, spaces, or indentations without a reason. For readability, add blank lines to separate large or logical code blocks.For readability, add two spaces of indentation. Do not use the tab key.

Good:

    <body>

      <h1>Famous Cities</h1>

      <h2>Tokyo</h2>
      <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. </p>

      <h2>London</h2>
      <p>London is the capital city of England. It is the most populous city in the United Kingdom. </p>

      <h2>Paris</h2>
      <p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe. </p>

    </body>

Bad:

    <body>
    <h1>Famous Cities</h1>
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. </p>
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom. </p>
    <h2>Paris</h2>
    <p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe. </p>
    </body>

Never Skip the <title> Element

The <title> element is required in HTML. The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
The <title> element:

defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results

So, try to make the title as accurate and meaningful as possible:

    <title>HTML Style Guide and Coding Conventions</title>

Omitting <html> and <body>?

An HTML page will validate without the <html> and <body> tags:

    <!DOCTYPE html>
    <head>
        <title>Page Title</title>
    </head>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

However, we strongly recommend to always add the <html> and <body> tags!
Omitting <body> can produce errors in older browsers.
Omitting <html> and <body> can also crash DOM and XML software.

Omitting <head>?

The HTML <head> tag can also be omitted. Browsers will add all elements before <body>, to a default <head> element.

    <!DOCTYPE html>
    <html>
        <title>Page Title</title>
    <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

    </body>
    </html>

However, we recommend using the <head> tag.

Close Empty HTML Elements?

In HTML, it is optional to close empty elements.

Allowed:

    <meta charset="utf-8">

Also Allowed:

    <meta charset="utf-8"/>

If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML

Add the lang Attribute

You should 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.

    <!DOCTYPE html>
        <html lang="en-us">
    <head>
        <title>Page Title</title>
    </head>

    <body>

        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>

    </body>
    </html>

Meta Data

To ensure proper interpretation and correct search engine indexing, both the language and the character encoding <meta charset="charset"> should be defined as early as possible in an HTML document:

    <!DOCTYPE html>
    <html lang="en-us">
    <head>
        <meta charset="charset">
        <title>Page Title</title>
    </head>

Setting The Viewport

The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen. You should include the following <meta> element in all your web pages:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

This gives the browser instructions on how to control the page's dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

HTML Comments

Short comments should be written on one line, like this:

    <!-- This is a comment -->

Comments that spans more than one line, should be written like this:

    <!--
      This is a long comment example. This is a long comment example.
      This is a long comment example. This is a long comment example.
    -->

Long comments are easier to observe if they are indented with two spaces.

Using Style Sheets

Use simple syntax for linking to style sheets (the type attribute is not necessary):

    
    <link rel="stylesheet" href="styles.css">

Short CSS rules can be written compressed, like this:

    p.intro {font-family:Verdana;font-size:16em;}

Long CSS rules should be written over multiple lines:

    body {
      background-color: lightgrey;
      font-family: "Arial Black", Helvetica, sans-serif;
      font-size: 16em;
      color: black;
    }

Place the opening bracket on the same line as the selector.
Use one space before the opening bracket.
Use two spaces of indentation.
Use semicolon after each property-value pair, including the last.
Only use quotes around values if the value contains spaces.
Place the closing bracket on a new line, without leading spaces.

Loading JavaScript in HTML

Use simple syntax for loading external scripts (the type attribute is not necessary):

    <script src="myscript.js">

Accessing HTML Elements with JavaScript

Using "untidy" HTML code can result in JavaScript errors.
These two JavaScript statements will produce different results:

Example 1:

    <!DOCTYPE html>
    <html>
    <body>
        <p id="Demo">This is paragraph 1.</p>
        <p id="demo">This is paragraph 2.</p>
    
    <script>
    // Only paragraph 1 will be overwritten
    document.getElementById("Demo").innerHTML = "HELLO.";
    </script>

    </body>
    </html>

Result:

    HELLO.
    This is paragraph 2.

Example 2:

    <!DOCTYPE html>
    <html>
    <body>
        <p id="Demo">This is paragraph 1.</p>
        <p id="demo">This is paragraph 2.</p>
    
    <script>
    // Only paragraph 2 will be overwritten
    document.getElementById("demo").innerHTML = "HELLO.";
    </script>

    </body>
    </html>

Result:

    This is paragraph 1.
    HELLO.

Use Lower Case File Names

Some web servers (Apache, Unix) are case-sensitive about file names: "london.jpg" cannot be accessed as "London.jpg". Other web servers (Microsoft, IIS) are not case-sensitive: "london.jpg" can be accessed as "London.jpg". If you use a mix of uppercase and lowercase, you have to be aware of this. If you move from a case-insensitive to a case-sensitive server, even small errors will break your web!
To avoid these problems, always use lowercase file names!

File Extensions

HTML files should have a .html extension (.htm is allowed).
CSS files should have a .css extension.
JavaScript files should have a .js extension.

Differences Between .htm and .html?

There is no difference between the .htm and .html file extensions! Both will be treated as HTML by any web browser and web server.

Default Filenames

When a URL does not specify a filename at the end (like "https://daemons-code-library.freesite.online/"), the server just adds a default filename, such as "index.html", "index.htm", "default.html", or "default.htm". If your server is configured only with "index.html" as the default filename, your file must be named "index.html", and not "default.html".
However, servers can be configured with more than one default filename; usually you can set up as many default filenames as you want.

HTML vs XHTML

XHTML is a stricter, more XML-based version of HTML.

What is XHTML?

XHTML stands for EXtensible HyperText Markup Language.
XHTML is a stricter, more XML-based version of HTML.
XHTML is HTML defined as an XML application.
XHTML is supported by all major browsers.

Why XHTML?

XML is a markup language where all documents must be marked up correctly (be "well-formed"). XHTML was developed to make HTML more extensible and flexible to work with other data formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to display the website even if it has some errors in the markup. So XHTML comes with a much stricter error handling

The Most Important Differences from HTML

<!DOCTYPE> is mandatory.
The xmlns attribute in <html> is mandatory.
<html>, <head>, <title>, and <body> are mandatory.
Elements must always be properly nested.
Elements must always be closed.
Elements must always be in lowercase.
Attribute names must always be in lowercase.
Attribute values must always be quoted.
Attribute minimization is forbidden.

XHTML - <!DOCTYPE ....> Is Mandatory

An XHTML document must have an XHTML <!DOCTYPE> declaration. The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.

Here is an XHTML document with a minimum of required tags:

    <!DOCTYPE html PUBLIC "-//dcl//DTD XHTML 1.1//EN" "http://www.code-library.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.code-library.org/1999/xhtml">
    <head>
    <title>Title of document</title>
    </head>
    <body>

        some content here...

    </body>
    </html>

XHTML Elements Must be Properly Nested

In XHTML, elements must always be properly nested within each other, like this:

Correct:

     <b><i>Some text</i></b>

Wrong:

    <b><i>Some text</b></i>

XHTML Elements Must Always be Closed

In XHTML, elements must always be closed, like this:

Correct:

    <p>This is a paragraph</p>
    <p>This is another paragraph</p>

Wrong:

    <p>This is a paragraph
    <p>This is another paragraph

XHTML Empty Elements Must Always be Closed

In XHTML, empty elements must always be closed, like this:

Correct:

    A break: <br />
    A horizontal rule: <hr />
    An image: <img src="happy.gif" alt="Happy face" />

Wrong:

    A break: <br>
    A horizontal rule: <hr>
    An image: <img src="happy.gif" alt="Happy face">

XHTML Elements Must be in Lowercase

In XHTML, element names must always be in lowercase, like this:

Correct:

    <body>
    <p>This is a paragraph</p>
    </body>

Wrong:

    <BODY>
    <P>This is a paragraph</P>
    </BODY>

XHTML Attribute Names Must be in Lowercase

In XHTML, attribute names must always be in lowercase, like this:

Correct:

    <a href="https://daemons-code-library.freesite.online/html">Visit our HTML tutorial</a>

Wrong:

    <a HREF="https://daemons-code-library.freesite.online/html">Visit our HTML tutorial</a>

XHTML Attribute Values Must be Quoted

In XHTML, attribute values must always be quoted, like this:

Correct:

    <a href="https://daemons-code-library.freesite.online/html">Visit our HTML tutorial</a>

Wrong:

    <a href=https://daemons-code-library.freesite.online/html>Visit our HTML tutorial</a>

XHTML Attribute Minimization is Forbidden

In XHTML, attribute minimization is forbidden:

Correct:

    <input type="checkbox" name="vehicle" value="car" checked="checked" />
    <input type="text" name="lastname" disabled="disabled" />

Wrong:

    <input type="checkbox" name="vehicle" value="car" checked />
    <input type="text" name="lastname" disabled />

HTML Forms

Forms

Form Attributes

Form Elements

Input Types

Input Attributes

Input Form Attributes

Jump to Top

HTML Graphics

Canvas

SVG Graphics

Jump to Top

HTML Media

Multimedia

Video

Audio

Plug-ins

Youtube

Jump to Top

HTML APIs

Web API

Geolocation

Drag and Drop

Web Storage

Web Workers

Server-Sent Events

Jump to Top

HTML Reference Guide

Tag List

The <address> Element

The <address> tag defines the contact information for the author/owner of a document or an article. The contact information can be an email address, URL, physical address, phone number, social media handle, etc. The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.

        <address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
        </address>

The <address> tag supports the Global Attributes and Event Attributes in HTML.

The <article> Element

The <article> tag specifies independent, self-contained content. An article should make sense on its own, and it should be possible to distribute it independently from the rest of the site.
Potential sources for the <article> element:

Forum post
Blog Post
News Story

    <article>
    <h2>Google Chrome</h2>
    <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
    </article>

Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element.

The <aside> Element

The <aside> tag defines some content aside from the content it is placed in. The aside content should be indirectly related to the surrounding content.

    <p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
    Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element.
    <aside>
    <h4>Epcot Center</h4>
    <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </aside>

Tip: The <aside> content is often placed as a sidebar in a document.

Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element.

The <blockquote> Element

The <blockquote> tag specifies a section that is quoted from another source. Browsers usually indent <aside> elements.

    <blockquote cite="http://www.worldwildlife.org/who/index.html">
    For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
    </blockquote>

Result	Description	Name	Number
	non-breaking space	&nbsp;	&#160;
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	double quotation mark	&quot;	&#34;
'	single quotation mark	&apos;	&#39;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;
™	trademark	&trade;	&#8482;

Mark	Character	Construct	Result
̀	a	a&#768;	à
́	a	a&#769;	á
̂	a	a&#770;	â
̃	a	a&#771;	ã
̀	O	O&#768;	Ò
́	O	O&#769;	Ó
̂	O	O&#770;	Ô
̃	O	O&#771;	Õ

Character	Number	Entity	Description
∀	&#8704;	&forall;	For all
∂	&#8706;	&part;	Partial differential
∃	&#8707;	&exist;	There exists
∅	&#8709;	&empty;	Empty sets
∇	&#8711;	&nabla;	Nabla
∈	&#8712;	&isin;	Element of
∉	&#8713;	&notin;	Not an element of
∋	&#8715;	&ni;	Contains as member
∏	&#8719;	&prod;	N-ary product
∑	&#8721;	&sum;	N-ary summation

Character	Number	Entity	Description
Α	&#913;	&Alpha;	GREEK ALPHA
Β	&#914;	&Beta;	GREEK BETA
Γ	&#915;	&Gamma;	GREEK GAMMA
Δ	&#916;	&Delta;	GREEK DELTA
Ε	&#917;	&Epsilon;	GREEK EPSILON
Ζ	&#918;	&Zeta;	GREEK ZETA

Character	Number	Entity	Description
©	&#169;	&copy;	COPYRIGHT
®	&#174;	&reg;	REGISTERED TRADEMARK
€	&#8364;	&euro;	EURO SIGN
™	&#8482;	&trade;	TRADEMARK
←	&#8592;	&larr;	LEFT ARROW
↑	&#8593;	&uarr;	UP ARROW
→	&#8594;	&rarr;	RIGHT ARROW
↓	&#8595;	&darr;	DOWN ARROW
♠	&#9824;	&spades;	SPADE
♣	&#9827;	&clubs;	CLUB
♥	&#9829;	&hearts;	HEART
♦	&#9830;	&diams;	DIAMOND

Result	Description	Name	Number
	non-breaking space	&nbsp;	&#160;
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	double quotation mark	&quot;	&#34;
'	single quotation mark	&apos;	&#39;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;
™	trademark	&trade;	&#8482;

Mark	Character	Construct	Result
̀	a	a&#768;	à
́	a	a&#769;	á
̂	a	a&#770;	â
̃	a	a&#771;	ã
̀	O	O&#768;	Ò
́	O	O&#769;	Ó
̂	O	O&#770;	Ô
̃	O	O&#771;	Õ

Character	Number	Entity	Description
∀	&#8704;	&forall;	For all
∂	&#8706;	&part;	Partial differential
∃	&#8707;	&exist;	There exists
∅	&#8709;	&empty;	Empty sets
∇	&#8711;	&nabla;	Nabla
∈	&#8712;	&isin;	Element of
∉	&#8713;	&notin;	Not an element of
∋	&#8715;	&ni;	Contains as member
∏	&#8719;	&prod;	N-ary product
∑	&#8721;	&sum;	N-ary summation

Character	Number	Entity	Description
Α	&#913;	&Alpha;	GREEK ALPHA
Β	&#914;	&Beta;	GREEK BETA
Γ	&#915;	&Gamma;	GREEK GAMMA
Δ	&#916;	&Delta;	GREEK DELTA
Ε	&#917;	&Epsilon;	GREEK EPSILON
Ζ	&#918;	&Zeta;	GREEK ZETA

Character	Number	Entity	Description
©	&#169;	&copy;	COPYRIGHT
®	&#174;	&reg;	REGISTERED TRADEMARK
€	&#8364;	&euro;	EURO SIGN
™	&#8482;	&trade;	TRADEMARK
←	&#8592;	&larr;	LEFT ARROW
↑	&#8593;	&uarr;	UP ARROW
→	&#8594;	&rarr;	RIGHT ARROW
↓	&#8595;	&darr;	DOWN ARROW
♠	&#9824;	&spades;	SPADE
♣	&#9827;	&clubs;	CLUB
♥	&#9829;	&hearts;	HEART
♦	&#9830;	&diams;	DIAMOND

Result	Description	Name	Number
	non-breaking space	&nbsp;	&#160;
<	less than	&lt;	&#60;
>	greater than	&gt;	&#62;
&	ampersand	&amp;	&#38;
"	double quotation mark	&quot;	&#34;
'	single quotation mark	&apos;	&#39;
¢	cent	&cent;	&#162;
£	pound	&pound;	&#163;
¥	yen	&yen;	&#165;
€	euro	&euro;	&#8364;
©	copyright	&copy;	&#169;
®	registered trademark	&reg;	&#174;
™	trademark	&trade;	&#8482;

Mark	Character	Construct	Result
̀	a	a&#768;	à
́	a	a&#769;	á
̂	a	a&#770;	â
̃	a	a&#771;	ã
̀	O	O&#768;	Ò
́	O	O&#769;	Ó
̂	O	O&#770;	Ô
̃	O	O&#771;	Õ

Character	Number	Entity	Description
∀	&#8704;	&forall;	For all
∂	&#8706;	&part;	Partial differential
∃	&#8707;	&exist;	There exists
∅	&#8709;	&empty;	Empty sets
∇	&#8711;	&nabla;	Nabla
∈	&#8712;	&isin;	Element of
∉	&#8713;	&notin;	Not an element of
∋	&#8715;	&ni;	Contains as member
∏	&#8719;	&prod;	N-ary product
∑	&#8721;	&sum;	N-ary summation

Character	Number	Entity	Description
Α	&#913;	&Alpha;	GREEK ALPHA
Β	&#914;	&Beta;	GREEK BETA
Γ	&#915;	&Gamma;	GREEK GAMMA
Δ	&#916;	&Delta;	GREEK DELTA
Ε	&#917;	&Epsilon;	GREEK EPSILON
Ζ	&#918;	&Zeta;	GREEK ZETA

Character	Number	Entity	Description
©	&#169;	&copy;	COPYRIGHT
®	&#174;	&reg;	REGISTERED TRADEMARK
€	&#8364;	&euro;	EURO SIGN
™	&#8482;	&trade;	TRADEMARK
←	&#8592;	&larr;	LEFT ARROW
↑	&#8593;	&uarr;	UP ARROW
→	&#8594;	&rarr;	RIGHT ARROW
↓	&#8595;	&darr;	DOWN ARROW
♠	&#9824;	&spades;	SPADE
♣	&#9827;	&clubs;	CLUB
♥	&#9829;	&hearts;	HEART
♦	&#9830;	&diams;	DIAMOND