example.com
Image-Link (opened in new window):
Download PDF
Email link:
Send Email
Send Emails
Send Email with Subject
Send Email with Cc/Bcc
.html extensions, or when returned by a server as a web page has response header content-type: text/html; charset=utf-8
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is an example of a basic HTML page.</p>
</body>
</html>
<head> element is a container for metadata (info about page data)
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content="AndreIT"/>
<!-- Refresh document every 30 seconds: -->
<!-- <meta http-equiv="refresh" content="30"> -->
<!-- specifies the base URL and base target for all relative URLs in a page: -->
<base href="" target="_blank"/>
<title>HTML</title>
<link rel="stylesheet" href="../css/css.css"/>
<link rel="stylesheet" href="../js/highlight/styles/default.css">
<script src="../js/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
This is a paragraph.
This is another paragraph.
This is paragraph
with multiple
lines break
This is paragraph
of a preformatted text
which preserves both spaces and line breaks
<p title="paragraph 'tooltip'">This is a paragraph.</p>
<p title='paragraph "tooltip"' >This is another paragraph.</p>
<p>
This is paragraph<br/>
with multiple<br/>
lines break
</p>
<pre>
This is paragraph
of a preformatted text
which preserves both spaces and line breaks
</pre>
<b>bold</b>
<strong>strong ("important")</strong>
<i>italic</i>
<em>emphasized ("important")</em>
<small>small</small>
<mark>marked</mark>
<del>for deletion</del>
<ins>inserted</ins> (added into the line)
<sub>subscripted</sub>
<sup>superscripted</sup>
This paragraph has a short quotation
.
Here is a quote from WWF's website:
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.
This paragraph has a an abbreviation (or an acronym).
This paragraph has an address block
Written by John Doe.This is a cite (title of a work) in a paragraph
This text will be written from right to leftThis paragraph has a Bi-Directional Override : This text will be written from right to left >
<p>This paragraph has a <q>short quotation</q>.</p>
<p>Here is a quote from WWF's website:</p>
<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>
<p>This paragraph has a
<abbr title="abbr">an abbreviation (or an acronym)</abbr>.</p>
<p>
This paragraph has an address block
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</p>
<p><cite>This is a cite (title of a work)</cite> in a paragraph</p>
<bdo dir="rtl">This text will be written from right to left</bdo>
<p> This paragraph has a Bi-Directional Override :
<bdo dir="rtl">This text will be written from right to left</bdo> ></p>
This is a paragraph having around html-comments.
<!-- This is a comment -->
<p>This is a paragraph having around html-comments.</p>
<!-- Remember to add more information here -->
<!-- Do not display this at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
<ul>
<li style="background-color:DodgerBlue;" class="li_style">
background color: with background-color property
</li>
<li style="color:Tomato;" class="li_style">font color: with color property</li>
<li style="border:2px solid Violet;" class="li_style">
border color: with border property
</li>
<li style="background-color:rgb(255, 99, 71);" class="li_style">RGB value</li>
<li style="background-color:#ff6347;" class="li_style">HEX value</li>
<li style="background-color:hsl(9, 100%, 64%);" class="li_style">HSL value</li>
<li style="background-color:rgba(255, 99, 71, 0.5);" class="li_style">RGBA value</li>
<li style="background-color:hsla(9, 100%, 64%, 0.5);" class="li_style">HSLA value</li>
</ul>
style attribute in HTML elements<style> element in the <head> section
<head>
...
<!-- External: -->
<link rel="stylesheet" href="../css/css.css"/>
<!-- Internal: -->
<style>
// styles definition
</head>
...
This paragraph has a style described in internal CSS
/*
style for:
<p id="p_tag_id">This paragraph has a style described in internal CSS</p>
*/
#p_tag_id {
color: red;
font-family: courier;
font-size: 160%;
border: 1px solid powderblue;
padding: 30px;
margin: 30px;
}
<h1 id="custom_header">My Header</h1>
<span class="city">Tokyo</span> - is the capital of Japan<br>
<span class="city">Berlin</span> - is the capital of Germany<br>
#custom_header {
background-color: lightblue;
color: black;
padding: 5px;
text-align: center;
}
.city {
background-color: tomato;
color: white;
}
// access in JavaScript
var x = document.getElementsByClassName("city")
document.getElementById("myHeader")
target attribute specifies where to open the linked page/document:_blank - Opens the linked document in a new window or tab_self - Opens the linked document in the same window/tab as it was clicked (this is default)_parent - Opens the linked document in the parent frame_top - Opens the linked document in the full body of the windowframename - Opens the linked document in a named framedownload - linked resource should be downloaded rather than navigated to<a href="schema:path">txt</a>):http://example.commailto:<email>[,<email>]*[?<arguments>]tel:+3112345678sms:<phone_number>[,<phone_number>]*[?body=<message_body>]geopoint:latitude,longitude#:~:text=\[prefix-,]textStart[,textEnd\][,-suffix], example:
<a href="http://example.com" title="Go to example.com" target="_blank">example.com</a><br/>
Image-Link (opened in new window):<br/>
<a href="http://example.com" target="_blank">
<img src="../images/colorpicker.gif" alt="colorpicker image" width="40" height="34">
</a>
<a href="document.pdf" download="document.pdf">Download PDF</a>
Email link:<br/>
<a href="mailto:email@example.com">Send Email</a>
<a href="mailto:email@example.com, secondemail@example.com"> Send Emails</a>
<a href="mailto:email@example.com?subject=Mail from our Website"> Send Email with Subject</a>
<a href="mailto:email@example.com?cc=secondemail@example.com, anotheremail@example.com, &bcc=lastemail@example.com">
Send Email with Cc/Bcc</a>
loading attribute - control how the browser loads the image: eager, lazy, autoalt atttribute
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.
<p>
<img
src="../images/colorpicker.gif"
alt="colorpicker image"
style="float:right;width:80px;height:68px;"
/>
A paragraph with a floating image...
</p>
<p>
<img
src="../images/colorpicker.gif"
alt="colorpicker image"
style="float:left;width:80px;height:68px;"
/>
A paragraph with a floating image...
</p>
<img loading="lazy|eager" src="../images/workplace.jpg" alt="Workplace"/>
<img src="../images/workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="../images/mac.jpg"/>
<area shape="rect" coords="290,172,333,250" alt="Phone" href="../images/cellphone.jpg"/>
<area shape="circle" coords="337,300,44" alt="Coffee" href="../images/coffee.jpg"/>
</map>
Element
with background-image
and text over it
<p style="background-image:url('../images/colorpicker.gif');text-align:center;">
Element<br/>
with background-image<br/>
and text over it
</p>
<picture>
<source media="(min-width: 900px)" srcset="../images/img_pink_flowers.jpg"/>
<source media="(min-width: 500px)" srcset="../images/img_white_flower.jpg"/>
<img src="../images/img_orange_flowers.jpg" alt="Flowers" style="width:auto;"/>
</picture>
<picture>
<source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
<img src="photo.jpg" loading="lazy">
</picture>
| Firstname | Lastname | Age | Money | Debt |
|---|---|---|---|---|
| Jill | Smith | 50 | 25000 | 250 |
| Eve | Jackson | 94 | 46840 | 570 |
| Sum: | 144 | 533653 | S364 | |
<table id="t1">
<caption>Sum of age years</caption>
<colgroup width="150">
<colgroup span="2" width="50">
<col span="2">
</colgroup>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Money</th>
<th>Debt</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>25000</td>
<td>250</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>46840</td>
<td>570</td>
</tr>
<tr>
<td colspan="2">Sum:</td>
<td>144</td>
<td>533653</td>
<td>S364</td>
</tr>
</table>
table#t1 tr:nth-child(even) {
background-color: #eee;
}
table#t1 tr:nth-child(odd) {
background-color: #fff;
}
table#t1 th {
color: white;
background-color: black;
}
Unordered HTML List (square bullets)
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Unordered HTML List (no bullets)
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List (numbered = default)
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List (uppercase letters)
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List (uppercase roman numbers)
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested Lists
<ul>
<li>Unordered list item</li>
<li>Nested list is lower
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Control List Counting in ordered list</li>
<ol start="50">
<li>this items number 50</li>
<li>this items number 51</li>
<li>this items number 52</li>
</ol>
</ul>
List as menu
<ul id="list_menu">
<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>
ul#list_menu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul#list_menu li {
float: left;
}
ul#list_menu li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
ul#list_menu li a:hover {
background-color: #111111;
}
<div> element is a block-level element.
This is an inline <span> element
inside a paragraph
<div style="border:1px solid green;padding:5px;">
The <code><div></code> element is a block-level element.<br/>
A block-level element always starts on a new line and <br/>
takes up the full width available (stretches out to the left and right as far as it can).
</div>
<p>
This is <span style="border:1px solid red;padding:2px">an inline <code><span></code> element
inside</span> a paragraph.
</p>
<iframe
src="./js.html"
loading="lazy"
style="border:3px dotted red;height:20em;width:90%;"
></iframe><br/>
<iframe
src="./html-form.html"
loading="eager"
name="iframe_b"
style="border:3px dotted red;height:20em;width:90%;"
></iframe>
<p><a
href="./html-tags.html"
target="iframe_b"
>Link to this page for iframe</a></p>
<p><a
href="./html-media.html"
target="iframe_b"
>Link to other page for iframe</a></p>
<object> and <embed> elements define embedded objects within an HTML document, like Java applets, PDF readers, Flash Players<object width="400" height="50" data="bookmark.swf"></object><embed width="400" height="50" src="bookmark.swf">
<object width="100%" height="500px" data="snippet.html"></object><embed width="100%" height="500px" src="snippet.html">
<object data="audi.jpeg"></object><embed src="audi.jpeg"">
<embed> element does not have a closing tag, it can not contain alternative textscript tag inside header or document body after all elements definition
<div id="js_html"></div><br/>
<div id="js_css">This text styles were set with JavaScript</div><br/>
<img id="js_image"/ src=""><br/>This image was set with JavaScript<br/>
<script>
document.getElementById("js_html").innerHTML = "Hello from JavaScript!";
document.getElementById("js_css").style.fontSize = "25px";
document.getElementById("js_css").style.color = "red";
document.getElementById("js_css").style.backgroundColor = "yellow";
document.getElementById("js_image").src = "../images/colorpicker.gif";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
x = 5;
y = 6;
z = x + y;
Save the document by pressing Ctrl + S
If you input wrong value, the program will return Error message!
We have a formula here: Why = who3*when2/times
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
<p>If you input wrong value, the program will return <samp>Error message!</samp></p>
We have a formula here:
<var>Why</var> = <var>who</var><sup>3</sup>*<var>when</var><sup>2</sup>/<var>times</var>
&entity_name; or &#entity_number; (better support) for additional spaces (which are trimmed to one in any text), example: text with additional spaces
< < > > & & " " ' '
¢ ¢ £ £ ¥ ¥ € € © © ® ®
™ ™ ← ← ↑ ↑ → → ↓ ↓
♠ ♠ ♣ ♣ ♥ ♥ ♦ ♦
<tag>...content...</tag>
<br/>
<hr/>
<img src="happy.gif" alt="Happy face"/>
<br/>
<table width="100%">
<!DOCTYPE> to the first line of every page<html> element of every page<details> - additional details that the user can view or hide<summary> - visible heading for a <details> element<article> - Defines an article<aside> - content aside from the page content<figcaption> - caption for a <figure> element<figure> - self-contained content, like illustrations, diagrams, photos, code listings, etc.<footer> - footer for a document or section<header> - header for a document or section<main> - main content of a document<mark> - marked/highlighted text<nav> - navigation links<section> - section in a document<time [datetime="2008-02-14 20:00"] > - Defines a date/time
<progress value="25" max="100"></progress><br/>
<meter value="7" min="0" max="12">7 out of 12</meter><br/>
<meter value="0.73">73%</meter>