Welcome To HTML Hyper text markup Language

Hey Guys , welcome to HTML course

guys before begin the course let me introduce you the introduction of HTML ! so let's get started

introduction to HTML

HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human readable. Language uses tags to define what manipulation has to be done on the text. HTML is a markup language used by the browser to manipulate text, images and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1999.

Characteristics of HTML:

Easy to understand : It is the easiest language you can say, very easy to grasp this language and easy to develop.

Flexibility :
This language is so much flexible that you can create whatever you want, a flexible way to design web pages along with the text

Linkable :
You can make linkable text like users can connect from one page to another page or website through these characteristics.

HTML Structure: The structure of HTML document are given below :

<!DOCTYPE html>
<html>
<head>
<title>
<!-- title bar -->
</title>
<!-- header for the website -->
</head>
<body>
<!-- body section of the website -->
</body>
</html>

Try It Yourself

Elements and Tags: HTML uses predefined tags and elements which tell the browser how to properly display the content. Remember to include closing tags. If omitted, the browser applies the effect of the opening tag until the end of page.

HTML page structure: The basic structure of an HTML page is laid out below. It contain the essential building-block elements (i.e. doctype declaration, html, head, title, and body elements) upon which all webpages are created.

<DOCTYPE! html>: This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive.

<html>: This is called the HTML root element. All other elements are contained within it.

<head>: The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front-end of a webpage. HTML elements used inside the element include:

<style>
<title>
<script>
<meta>
<link>

<body>: the body tag is used to enclose all of the visible content of a webpage. In other words, the body content is what the browser will show on the front-end.

An HTML document can be created using any text editor . Save the text file using .html or .htm. Once saved as an HTML document, the file can be opened as a webpage in the browser.
Here’s an example of an HTML webpage:

<!DOCTYPE html>
<html>
<head>
<title>
my first code
</title>

</head>
<body>
<p>my first p<p>
<h1>my first h1<h1>
</body>
</html>

Try It Yourself

COMMENTS

The comment tag (<!– Comment –>) is used to insert comments in the HTML code. It is a good practice of coding so that coder and the reader can get help to understand the code. It is helpful to understand the complex code. The comment tag is useful during the debugging of codes.

It is simple piece of code which is wiped off (ignore) by web browsers i.e, not displayed by browser.
It helps the coder and reader to understand the piece of code used for specially in complex source code.

Syntax:

<!-- HTML comments -->

Try It Yourself

Types of HTML Comments: There are three types of comments in HTML which are:

Single-line comment
Multi-lines comment
Using <comment> tag

Single-line comment:

<!DOCTYPE html>
<html>
<head>
<title>
Single line comment </title>
</head>
<body>
<!-- HTML comments -->
<p>Codolearn</p>
</body>
</html>

Try It Yourself

Multi-line comment: Multiple lines can be comment using (<!– –>) tag.

<!DOCTYPE html>
<html>
<head>
<title>
Single line comment </title>
</head>
<body>
<!-- HTML
Multi-line
comments -->
<p>
Codolearn</p>
</body>
</html>

Try It Yourself

HTML basics

Basic HTML Document:

Below mentioned are the basic HTML tags which divides the whole document into various parts like head, body etc.

Every HTML document begins with a HTML document tag. Although this is not mandatory but it is a good convention to start the document with this below mentioned tag:

<!DOCTYPE html>

Try It Yourself

<html> : Every HTML code must be enclosed between basic HTML tags. It begins with <html> and ends with </html> tag.

<head> : The head tag comes next which contains all the header information of the web page or document like the title of the page and other miscellaneous information. These informations are enclosed within head tag which opens with <head> and ends with </head>. The contents will of this tag will be explained in the later sections of course.

<title> : We can mention the title of a web page using the <title> tag. This is a header information and hence mentioned within the header tags. The tag begins with <title> and ends with </title>

<body>: Next step is the most important of all the tags we have learned so far. The body tag contains the actual body of the page which will be visible to all the users. This opens with <body> and ends with </body>. Every content enclosed within this tag will be shown on the web page be it writings or images or audios or videos or even links. We will see later in the section how using various tags we may insert mentioned contents into our web pages.

HTML heading

These tags help us to give headings to the content of a webpage. These tags are mainly written inside the body tag. HTML provides us with six heading tags from <h1> to <h6>. Every tag displays the heading in a different style and font size.

<!DOCTYPE html>
<html>
<head>
<title>
heading</title>
</head>
<body>
<h1>codolearn</h1>
<h2>codolearn</h2>
<h3>codolearn</h3>
<h4>codolearn</h4>
<h5>codolearn</h5>
<h6>codolearn</h6>
</body>
</html>

Try It Yourself

output:

codolearn

HTML paragraph

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>codolearn</h1><br>
<p>codolearn</p><br>
<p>codolearn</p><br>
</body>
</html>

Try It Yourself

To display large part of the text on browser , paragraph element <p> is used
in other words : These tags help us to write paragraph statements in a webpage. They start with the <p> tag and ends with <p>. Here the <br> tag is used to break line and acts as a carriage return. <br> is an empty tag.

output:

codolearn

HTML horizontal lines

The <hr> tag is used to break the page into various parts, creating horizontal margins with help of a horizontal line running from left to right hand side of the page. This is also an empty tag and doesn’t take any additional statements.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>codolearn</p><p>
<hr>
<p>codolearn</p>
</body>
</html>

Try It Yourself

output:

codolearn

HTML img tag

The image tag is used to insert an image into our web page. The source of the image to be inserted is put inside the <img src=”source_of_image“> tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="img-src">
</body>
</html>

Try It Yourself Page Layout Information:

Header:

tag is used to add header section in web pages.

Navigation bar: The navigation bar is same as menu list. It is used to display the content information using hyperlink.

Sidebar: It holds additional information or advertisements and is not always necessary to be added into the page.

Content Section: The content section is the main part where content is displayed.

Footer: The footer section contains the contact information and other query related to web pages. The footer section contains the contact information and other query related to web pages. The footer section always put on the bottom of the web pages. The

    <!DOCTYPE html>
    <html>
    <head>
    <title>Page Layout</title>
    <style>
    .head1 {
    font-size:40px;
    color:#009900;
    font-weight:bold;
    }
    .head2 {
    font-size:17px;
    margin-left:10px;
    margin-bottom:15px;
    }
    body {
    margin: 0 auto;
    background-position:center;
    background-size: contain;
    }

    .menu {
    position: sticky;
    top: 0;
    background-color: #009900;
    padding:10px 0px 10px 0px;
    color:white;
    margin: 0 auto;
    overflow: hidden;
    }
    .menu a {
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
    }
    .menu-log {
    right: auto;
    float: right;
    }
    footer {
    width: 100%;
    bottom: 0px;
    background-color: #000;
    color: #fff;
    position: absolute;
    padding-top:20px;
    padding-bottom:50px;
    text-align:center;
    font-size:30px;
    font-weight:bold;
    }
    .body_sec {
    margin-left:20px;
    }
    </style>
    </head>

    <body>

    <!-- Header Section -->
    <header>
    <div class="head1">Codolearn</div>
    <div class="head2">A computer science portal for geeks</div>
    </header>

    <!-- Menu Navigation Bar -->
    <div class="menu">
    <a href="#home">HOME</a>
    <a href="#news">NEWS</a>
    <a href="#notification">NOTIFICATIONS</a>
    <div class="menu-log">
    <a href="#login">LOGIN</a>
    </div>
    </div>

    <!-- Body section -->
    <div class = "body_sec">
    <section id="Content">
    <h3>Content section</h3>
    </section>
    </div>

    <!-- Footer Section -->
    <footer>Footer Section</footer>
    </body>
    </html>

Try It Yourself

HTML Elements

HTML element is the collection of start and end tag with the content inserted in between them.

syntax:

<tagname > Contents... </tagname>

Nested HTML Elements: A nested element, also called a child element, can be a parent element too if other elements are nested within it. HTML tags should be nested in correct order. They must be closed in the inverse order of how they are defined, that means the last tag opened must be closed first.

Necessary to add end tag: It is necessary to add end tag of element. Otherwise the displayed content may not be display correctly.

HTML font styling

HTML provides us with the ability for formatting text just like we do it in MS Word or any text editing software. In this article, we would go through few such options.

<b> and <strong>: The <b> is usually used to draw the attention of user / reader by making it bold similarly <strong> tag is used to make text bold

<!DOCTYPE html>
<html>
<head>
<title>
paragraph</title>
</head>
<body>
<p>codolearn<p>
<p><b>codolearn<b><p>
<p><strong>codolearn</strong><p>
</body>
</html>

Try It Yourself

codolearn

Making text Italic: The <i> tag is used to make the text Italic. It opens with <i> and ends with </i> tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>codolearn<p>
<p><i>codolearn<i><p>
</body>
</html>

Try It Yourself

output:

codolearn

making the text underline: This tag is underline the text enclosed in it's on and off tag that means opening and closing tag i.e <u> and </u>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>codolearn<p>
<p><u>codolearn<u><p>
</body>
</html>

Try It Yourself

output:

codolearn

<strike> Highlighting the text: This tag draw a line through the middle of text , enclosed in <strike> and </strike> elements. tag <s> and </s> will also display the same effects.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>codolearn<p>
<p><strike>codolearn<strike><p>
</body>
</html>

Try It Yourself

output

codolearn

~~codolearn~~

Making a text Subscript or Superscript: The <sup> element is used to superscript a text and <sub> element is used to subscript a text. They both have opening and a closing tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>codolearn<p>
<p><sup>codolearn<sup><p>
<p><sub>codolearn<sub><p>
</body>
</html>

Try It Yourself

output

codolearn

hi ^codolearn learners

hi _codolearn learners

Make the text smaller: The <small> element is used to make the text smaller. The text that needs to be displayed smaller should be written inside <small> and </small> tag.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>codolearn<p>
<p><small>codolearn<small><p>
</body>
</html>

Try It Yourself

output:

codolearn

HTML Links

What are link?

It is a connection from one web resource to another.A link has two ends,An anchor and direction. The link starts at the “source” anchor and points to the “destination” anchor, which may be any Web resource such as an image, a video clip, a sound bite, a program, an HTML document or an element within an HTML document. syntax:

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

explaination :
href : The href attribute is used to specify the destination address of the link used. Text
link : The text link is the visible part of the link.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>this is a link just below this <p>
<a href="https://codolearn.pythonanywhere.com">codolearn<a>
</body>
</html>

Try It Yourself

output:

this is a link just below this

link text

There are Different types of links appear in different colors such as:

An unvisited link appears underlined and blue in colour by default.
A visited link appears underlined and purple in colour by default.
An active link appears underlined and red in colour by default.

HTML Images

Adding images on a webpage :

The “img” tag is used to add images on a webpage. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag.

syntax

<img src="url" alt="some_text">

explaination

src: src stands for source. Every image has a src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored.
alt: If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is an user-defined text.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>image just below this text <p>
<img src="url" alt="image">
</body>
</html>

Try It Yourself

output:

HTML Tables

HTML tables allow web developers to arrange data into rows and columns. in simple words A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis.

Defining Tables in HTML

An HTML table is defined with the “table” tag. Each table row is defined with the “tr” tag. A table header is defined with the “th” tag. By default, table headings are bold and centered. A table data/cell is defined with the “td” tag.

<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>
Firstname</th>
<th>
Lastname</th>
<th>
Age</th>
</tr>
<tr>
<td>
Priya</td>
<td>
Sharma</td>
<td>
24</td>
</tr>
<tr>
<td>
Arun</td>
<td>
Singh</td>
<td>
32</td>
</tr>
<tr>
<td>
Sam</td>
<td>
Watson</td>
<td>
41</td>
</tr>
</table>
</body>
</html>

Try It Yourself

output:

Adding a border to a HTML Table: A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; } </style>
</head>
<body>
<table style="width:100%">
<tr>
<th>
Firstname</th>
<th>
Lastname</th>
<th>
Age</th>
</tr>
<tr>
<td>
Priya</td>
<td>
Sharma</td>
<td>
24</td>
</tr>
<tr>
<td>
Arun</td>
<td>
Singh</td>
<td>
32</td>
</tr>
<tr>
<td>
Sam</td>
<td>
Watson</td>
<td>
41</td>
</tr>
</table>
</body>
</html>

Try It Yourself

output:

HTML Lists

What are lists ?

A list is a record of pieces of information, such as people’s names, address, etc usually written or printed with a single thing on each line and ordered in a way that makes a particular thing easy to find.

there are 3 typpes of lists:

unordered list
ordered list
description list

Unordered List: an Unordered list is used when the items are not be displayed in any particular sequence.
example

<!DOCTYPE html>
<html>
<body>
<h2>
unordered list</h2>
<ul>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
</ul>
</body>
</html>

Try It Yourself

output:

unordered list

codolearn
codolearn
codolearn
codolearn

Square:

<!DOCTYPE html>
<html>
<body>
<ul style="list-style-type:square">
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
</ul>
</body>
</html>

Try It Yourself

output:

codolearn
codolearn
codolearn
codolearn

Ordered List:
An ordered list starts with the “ol” tag. Each list item starts with the “li” tag. The list items are marked with numbers by default.

<!DOCTYPE html>
<html>
<body>
<ol>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
</ol>
</body>
</html>

Try It Yourself

output:

codolearn
codolearn
codolearn
codolearn

Type=”1″ : The list items will be numbered with uppercase letters

<!DOCTYPE html>
<html>
<body>
<ol type="A">
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
</ol>
</body>
</html>

Try It Yourself

output:

codolearn
codolearn
codolearn
codolearn

Type=”a” : The list items will be numbered with lowercase letters.
```
<!DOCTYPE html>
<html>
<body>
<ol type="a">
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
</ol>
</body>
</html>
```
Try It Yourself

output:

Ordered List with Lowercase Letters
1. codolearn
2. codolearn
3. codolearn
4. codolearn

Type=”I” : The list items will be numbered with uppercase roman numbers.
```
<!DOCTYPE html>
<html>
<body>
<ol type="I">
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
</ol>
</body>
</html>
```
Try It Yourself

output:

Ordered List with Roman Numbers
1. codolearn
2. codolearn
3. codolearn
4. codolearn

Type=”i” : The list items will be numbered with lowercase roman numbers which is shown below.
```
<!DOCTYPE html>
<html>
<body>
<ol type="i">
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
<li>
codolearn</li>
</ol>
</body>
</html>
```
Try It Yourself

output:

Ordered List with Roman Numbers
1. codolearn
2. codolearn
3. codolearn
4. codolearn

HTML defination list
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, and the <dd> tag describes each term.
```
<!DOCTYPE html >
<html>
<body>

<dl>
<dt>
codolearn</dt>
<dd>
codolearn</dd>
<dt>
codolearn</dt>
<dd>
codolearn<dd>
</dl>
</body>
</html> 
```
Try It Yourself

output:

codolearn

---codolearn

codolearn

---codolearn

Nested List :

A nested list is a list which has a list inside a list.

<!DOCTYPE html>
<html>
<body>
<h2>
A Nested List</h2>
<ul>
<li>
Coffee</li>
<li>
Tea <ul>
<li>
Black tea</li>
<li>
Green tea</li>
</ul>
</li>
<li>
Milk</li>
</ul>
</body>
</html>

Try It Yourself

output:

codolearn
codolearn
- codolearn
- codolearn
codolearn
codolearn

Block and inline elements

Block level elements in HTML : A block-level element always starts on a new line and stretches out to the left and right as far as it can.

Block level elements:

div : the div element is used as a container for other HTML elements . it has no required attributes style call and id are the commonly used attribute .
span :

Inline element in HTML 5

Inline elements : An inline element is the opposite of the block-level element . it does not start on a new line and takes up only necessary width.

span element : the span element is used as a container for text . it has no required attributes . style class id are the commonly used attribute.

javascipt in an HTML document

javascript in body or head tag: Scripts can be placed inside both tag using <script tag and closing tag </script>.

<!DOCTYPE html>
<html>
<head>
<script>
function btn() { document.getElementById("btn").innerHTML = "codolearn"; } </script>
</head>
<body>
<p class="btn" style="color:green;">
codolearn.</p>
<button type="button" onclick="btn()">
click it</button>
</body>
</html>

Try It Yourself

output:

JavaScript in Head

codolearn

Iframes in HTML

The iframe tsg specifies an inline frame. an inline frame is used to embed another document within the current HTML document. in simple words The iframe in HTML stands for Inline Frame. The ” iframe ” tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. An inline frame is used to embed another document within the current HTML document.

<iframe src="url/source"></iframe>

Try It Yourself

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.wikipedia.org/">
</iframe>
</body>
</html>

Try It Yourself

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:

<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.wikipedia.org/" width="450" height="415">
</iframe>
</body>
</html>

Try It Yourself

output:

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="https://www.wikipedia.org/" style="border:none;"></iframe>

Try It Yourself

output:

Glossary

Use border:none; to remove the border around the iframe
In HTML the <iframe> tag specifies an inline frame
The src attribute defines the URL of the page to embed
The height and width attributes specifies the size of the iframe

File path in HTML

A file path specifies the location of a file inside a web folder structure. Its like an address of a file which helps the web browser to access the files. File paths are used to link external resources such as images, videos, style sheets, JavaScript, displaying other web pages etc. To insert a file in a web page its source must be known. For example, the syntax (<img src=” ” alt=” “>) is used to insert an image file, where the path of the file is mentioned in the source (src).

There are two types path :

Relative file path
Absoulute file path

Relative file path: it describes the path of the file relative to the location of the current web page file.

<!DOCTYPE html>
<html>
<head>
<title>
Relative file path</title>
</head>
<body>
<img src="img/html.png" width:"400px">
</body>
</html>

Try It Yourself

Absolute file path An absolute file path is the full url to a file:

<!DOCTYPE html>
<html>
<head>
<title>
Relative file path</title>
</head>
<body>
<img src="img/html.png" width:"400px">
</body>
</html>

Try It Yourself

Viewport meta tag for making website responsive

What is Viewport?
A Browser’s viewport is the area of web page in which the content is visible to the user. The viewport does not have the same size, it varies with the variation in screen size of the devices on which the website is visible. For a laptop, the viewport has a larger size as compared to a smartphone or tablet.

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

Try It Yourself

This is the common setting of viewport used in various mobile-optimized websites. The width property governs the size of the viewport. It is possible to set it to a specific value (“width=600”) in terms of CSS pixels. Here it is set to a special value(“width= device-width”) which is the width of the device in terms of CSS pixels at a scale of 100%. The initial-scale property governs the zoom level when the page is loaded for the first time.

<!DOCTYPE html>
<html>
<head>
<title>
Example</title>
<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0">
<style> .h1 { color: red; } </style>
</head>
<body>
<h1 class="h1">Codolearn</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

Try It Yourself

output:

Codolearn

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This ix the common setting of viewport used in various mobile-optimized websites . the width property governs the size of the viewport . it is possible to set it to a specific value (widht="600")in term of CSS pixels . here it is set to special value (width=device-width) which is the width of the device in terms of CSS pixels at a scale of 100%. the initial-scale property governs the zoom level when the page is loaded for the first time .

Important: The meta tags and links are always added to the <head> tag

URL : Uniform resource locator

HTML rules

Declaring the DOCTYPE (Document Type)

<DOCTYPE html>

Right all closing tag of all elements in HTML 5 elements

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Document</title>
</head>
<body>
<p>
codolearn</p>
<p>
codolearn</p>
</body>
</html>

Try It Yourself

Always Use lowercase attribute name because :

mixing uppercase and lowercase letters in attributes names looks bad.
Lowercase are easier to write.
it looks clearner than uppercase.

Spaces and equal signs
Always qoutes attribute class , id and other values
Always specify alt , width and height in img tag
Data in meta tag

<meta charset="charset">

viewport

width=device-width

initial-scale=1.0

Diffrence b/w .html and .htm extensions

Some Useful HTML Character Entities

Description	Symbol	name
less than	<< /td>	<
Greater than	>	>
double quotation mark	"	"
ampersand	&	&
Single quotation mark	'	'
pound	£	£
cent	¢	¢
euro	€	€
yen	¥	¥
copyright	©	©
registered trademark	®	®

Combing 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 appear both above and below a letter, inside a letter, and between two letters. 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.

Some Useful HTML Character Entities

mark / Character	name	result
` / a	à	à
́ / a	á	á
̂ / a	â	â
~ / a	ã	ã
` / k	k̀	k̀
̂ / k	k̂	k̂
̂ / k	k̂	k̂
̂ / k	k̂	k̂

Some useful Symbols

Numb	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 sign
61	=	=	=	=	equals sign
62	>	>	>	>	greater-than sign
63	?	?	?	?	question mark
64	@	@	@	@	commercial at
65	A	A	A	A	Latin capital letter A
66	B	B	B	B	Latin capital letter B
67	C	C	C	C	Latin capital letter C
68	D	D	D	D	Latin capital letter D
69	E	E	E	E	Latin capital letter E
70	F	F	F	F	Latin capital letter F
71	G	G	G	G	Latin capital letter G
72	H	H	H	H	Latin capital letter H
73	I	I	I	I	Latin capital letter I
74	J	J	J	J	Latin capital letter J
75	K	K	K	K	Latin capital letter K
76	L	L	L	L	Latin capital letter L
77	M	M	M	M	Latin capital letter M
78	N	N	N	N	Latin capital letter N
79	O	O	O	O	Latin capital letter O
80	P	P	P	P	Latin capital letter P
81	Q	Q	Q	Q	Latin capital letter Q
82	R	R	R	R	Latin capital letter R
83	S	S	S	S	Latin capital letter S
84	T	T	T	T	Latin capital letter T
85	U	U	U	U	Latin capital letter U
86	V	V	V	V	Latin capital letter V
87	W	W	W	W	Latin capital letter W
88	X	X	X	X	Latin capital letter X
89	Y	Y	Y	Y	Latin capital letter Y
90	Z	Z	Z	Z	Latin capital letter 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 letter a
98	b	b	b	b	Latin small letter b
99	c	c	c	c	Latin small letter c
100	d	d	d	d	Latin small letter d
101	e	e	e	e	Latin small letter e
102	f	f	f	f	Latin small letter f
103	g	g	g	g	Latin small letter g
104	h	h	h	h	Latin small letter h
105	i	i	i	i	Latin small letter i
106	j	j	j	j	Latin small letter j
107	k	k	k	k	Latin small letter k
108	l	l	l	l	Latin small letter l
109	m	m	m	m	Latin small letter m
110	n	n	n	n	Latin small letter n
111	o	o	o	o	Latin small letter o
112	p	p	p	p	Latin small letter p
113	q	q	q	q	Latin small letter q
114	r	r	r	r	Latin small letter r
115	s	s	s	s	Latin small letter s
116	t	t	t	t	Latin small letter t
117	u	u	u	u	Latin small letter u
118	v	v	v	v	Latin small letter v
119	w	w	w	w	Latin small letter w
120	x	x	x	x	Latin small letter x
121	y	y	y	y	Latin small letter y
122	z	z	z	z	Latin small letter z
123	{	{	{	{	left curly bracket
124	\|	\|	\|	\|	vertical line
125	}	}	}	}	right curly bracket
126	~	~	~	~	tilde
127	DEL
128		€			euro sign
129					NOT USED
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					NOT USED
142		Ž			Latin capital letter Z with caron
143					NOT USED
144					NOT USED
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					NOT USED
158		ž			Latin small letter z with caron
159		Ÿ			Latin capital letter Y with diaeresis
160					no-break 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 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

HTML Quotation and Citation Elements

In this topic 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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore eos repellendus similique, exercitationem nostrum enim adipisci nesciunt ab minus nulla. Quis labore delectus rerum quaerat possimus doloribus dolore at praesentium.</p>
<blockquote cite="https://www.codolearn.com">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora alias soluta non! Veniam nobis, harum laborum voluptates sed optio culpa, earum doloribus omnis deserunt ea consequuntur reiciendis rerum ut officiis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam debitis dignissimos a quas commodi exercitationem dolore alias iure dicta odit quisquam, iste ab fugit atque, neque pariatur voluptatem optio ducimus. </blockquote>
</body>
</html>

Try It Yourself

<q> in HTML

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ullam sunt tenetur assumenda cupiditate adipisci rem, ipsum omnis et itaque, blanditiis nostrum dolorum dolores libero hic provident maiores molestiae. Sed. <q>
codolearn</q>
</p>
</body>
</html>

Try It Yourself

<cite> in html

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ullam sunt tenetur assumenda cupiditate adipisci rem, ipsum omnis et itaque, blanditiis nostrum dolorum dolores libero hic provident maiores molestiae. Sed. <cite>
codolearn</cite>
</p>
</body>
</html>

Try It Yourself

Tag	Description
<abbr>	Defines an abbreviation or acronym
<address>	Defines contact information for the author/owner of a document
<bdo>	Defines the text direction
<blockquote>	Defines a section that is quoted from another source
<cite>	Defines the title of a work
<q>	Defines a short inline quotation

Text field / text area The <input type="text"> defines a single-line input field for text input.

<form>
<label for="fname">
FirstName</label>
<input type="text" id="name" class="name">
<br>
<label for="lname">
LastName</label>
<input type="text" id="lastname" class="lastname">
<br>
<label for="comment">
comment</label>
<textarea name="comment" id="comment" cols="30" rows="10">
</textarea>
</form>

Try It Yourself

output:

Label element Notice the use of the <label> element in the example above. The <label> tag defines a label for many form elements. The <label> element is useful for screen-reader users, because the screen-reader will read out loud the label when the user focus on the input element. The <label> element also help users who have difficulty clicking on very small regions (such as radio buttons or checkboxes) - because when the user clicks the text within the <label> element, it toggles the radio button/checkbox. The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind them together.

Radio button

The <input type="radio"> defines a radio button. Radio buttons let a user select ONE of a limited number of choices.

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">
Male</label>
<br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">
Female</label>
<br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">
Other</label>
</form>

Try It Yourself

output:

checkbox

The <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="Checkbox" id="male" name="gender" value="male">
<label for="male">
Male</label>
<br>
<input type="Checkbox" id="female" name="gender" value="female">
<label for="female">
Female</label>
<br>
<input type="Checkbox" id="other" name="gender" value="other">
<label for="other">
Other</label>
</form>

Try It Yourself

output:

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler. The form-handler is typically a file on the server with a script for processing input data. The form-handler is specified in the form's action attribute.

<form action="#">
<label for="fname">
First name:</label>
<br>
<input type="text" id="fname" name="fname" value="name">
<br>
<label for="lname">
Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="lastname">
<br>
<br>
<input type="submit" value="Submit">
</form>

Try It Yourself

output:

Name attribute in input tag

Notice that each input field must have a name attribute to be submitted. If the name attribute is omitted, the value of the input field will not be sent at all.

Target attribute

The target attribute specifies where to display the response that is received after submitting the form. The target attribute can have one of the following values:

Value	Description
_blank	The response is displayed in a new window or tab
_self	The response is displayed in the current window
_parent	The response is displayed in the parent frame
_top	The response is displayed in the full body of the window
framename	The response is displayed in a named iframe

The default value is _self which means that the response will open in the current window.

<form action="#" target="_blank">

Try It Yourself>

Method attribute

The method attribute specifies the HTTP method to be used when submitting the form data. The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post"). The default HTTP method when submitting form data is GET.

<form action="#" method="get">

<form action="#" method="POST">

Attribute	Description
accept-charset	Specifies the character encodings used for form submission
action	Specifies where to send the form-data when a form is submitted
autocomplete	Specifies whether a form should have autocomplete on or off
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method	Specifies the HTTP method to use when sending form-data
name	Specifies the name of the form
novalidate	Specifies that the form should not be validated when submitted
rel	Specifies the relationship between a linked resource and the current document
target	Specifies where to display the response that is received after submitting the form

HTML Input Types

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Input Type="text"

<input type="text"> defines a single-line text input field:

<form>
<label for="fname">
First name:</label>
<br>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">
Last name:</label>
<br>
<input type="text" id="lname" name="lname">
</form>

Try It Yourself

output:

input type="password"

<input type="password"> defines a password field as you can see :

<form>
<label for="fname">
First name:</label>
<br>
<input type="text" id="fname" name="fname">
<br>
<label for="lname">
Last name:</label>
<br>
<input type="text" id="lname" name="lname">
<label for="password">
password:</label>
<br>
<input type="password" id="password" name="password" value="password">
</form>

Try It Yourself

output:

<input type="submit">

<input type="submit"> defines a button for submitting form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute:

<input type="reset">

<input type="reset"> defines a reset button that will reset all form values to their default values:

<form action="#">
<label for="fname">
First name:</label>
<br>
<input type="text" id="fname" name="fname" value="name">
<br>
<label for="lname">
Last name:</label>
<br>
<input type="text" id="lname" name="lname" value="lastname">
<br>
<br>
<input type="submit" value="Submit">
<input type="reset">
</form>

Try It Yourself

output:

<input type="button">

<input type="button"> defines a button

<input type="color">

The <input type="color"> is used for input fields that should contain a color. Depending on browser support, a color picker can show up in the input field.

<form>
<label for="favcolor">
Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

Try It Yourself

output:

<input type="date">

The <input type="date"> is used for input fields that should contain a date. Depending on browser support, a date picker can show up in the input field.

<form>
<label for="birthday">
Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

Try It Yourself

<input type="number">

The <input type="number"> defines a numeric input field. You can also set restrictions on what numbers are accepted. The following example displays a numeric input field, where you can enter a value from 1 to 5:

<label for="quantity">fav number</label>
<input type="number" id="quantity" name="quantity" min="1" max="500">
</form>

Try It Yourself

<input type="range">

The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes

some input attribute

Attribute	Description
checked	Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio")
disabled	Specifies that an input field should be disabled
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of character for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value against
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in characters) of an input field
step	Specifies the legal number intervals for an input field
value	Specifies the default value for an input field

Muitimedia HTML

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, animations, and more. Web pages often contain multimedia elements of different types and formats.

Common Video Formats

Format	File	Description
MPEG	.mpg .mpeg	MPEG. Developed by the Moving Pictures Expert Group. The first popular video format on the web. Not supported anymore in HTML.
AVI	.avi	AVI (Audio Video Interleave). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
WMV	.wmv	WMV (Windows Media Video). Developed by Microsoft. Commonly used in video cameras and TV hardware. Plays well on Windows computers, but not in web browsers.
RealVideo	.rm .ram	RealVideo. Developed by Real Media to allow video streaming with low bandwidths. Does not play in web browsers.
Flash	.swf .flv	Flash. Developed by Macromedia. Often requires an extra component (plug-in) to play in web browsers.
Ogg	.ogg	Theora Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
WebM	.webm	WebM. Developed by Mozilla, Opera, Adobe, and Google. Supported by HTML.
MPEG-4 or MP4	.mp4	MP4. Developed by the Moving Pictures Expert Group. Commonly used in video cameras and TV hardware. Supported by all browsers and recommended by YouTube.

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital music. If your website is about recorded music, MP3 is the choice.

Format	File	Description
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface). Main format for all electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital notes that can be played by electronics. Plays well on all computers and music hardware, but not in web browsers.
RealAudio	.rm .ram	RealAudio. Developed by Real Media to allow streaming of audio with low bandwidths. Does not play in web browsers.
WMA	.wma	WMA (Windows Media Audio). Developed by Microsoft. Plays well on Windows computers, but not in web browsers.
AAC	.aac	AAC (Advanced Audio Coding). Developed by Apple as the default format for iTunes. Plays well on Apple computers, but not in web browsers.
WAV	.wav	WAV. Developed by IBM and Microsoft. Plays well on Windows, Macintosh, and Linux operating systems. Supported by HTML.
Ogg	.ogg	Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.
MP3	.mp3	MP3 files are actually the sound part of MPEG files. MP3 is the most popular format for music players. Combines good compression (small files) with high quality. Supported by all browsers.
MP4	.mp4	MP4 is a video format, but can also be used for audio. Supported by all browsers.

HTML Video

The HTML <video> element is used to show a video on a web page.

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag. </video>

Try It Yourself

How it works in our HTML document

The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

HTML Audio

To play an audio file in HTML, use the <audio> element:

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element. </audio>

Try It Yourself

How it works in our HTML document

The controls attribute adds audio controls, like play, pause, and volume. The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

HTML audio format

Browser	MP3	WAV	OGG
Edge/IE	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

Audio type

File Format	Media Type
MP3	audio/mpeg
OGG	audio/ogg
WAV	audio/wav

Previous Next

Welcome To HTML Hyper text markup Language

Hey Guys , welcome to HTML course

guys before begin the course let me introduce you the introduction of HTML ! so let's get started

introduction to HTML

COMMENTS

HTML basics

HTML heading

codolearn

codolearn

codolearn

codolearn

codolearn

codolearn

HTML paragraph

codolearn

HTML horizontal lines

HTML img tag

HTML Elements

HTML font styling

codolearn

codolearn

codolearn

codolearn

codolearn

codolearn

codolearn

codolearn

hi codolearn learners

hi codolearn learners

HTML Links

this is a link just below this

HTML Images

HTML Tables

HTML Lists

unordered list

Ordered List with Lowercase Letters

Ordered List with Roman Numbers

Ordered List with Roman Numbers

Nested List :

Block and inline elements

Inline element in HTML 5

javascipt in an HTML document

JavaScript in Head

Iframes in HTML

Iframe - Set Height and Width

Iframe - Remove the Border

Glossary

File path in HTML

Viewport meta tag for making website responsive

Codolearn

HTML rules

viewport

Some Useful HTML Character Entities

Combing Diacritical marks

Some Useful HTML Character Entities

Some useful Symbols

HTML Quotation and Citation Elements

HTML <blockquote> for Quotations

<q> in HTML

<cite> in html

Radio button

checkbox

The Submit Button

Name attribute in input tag

Target attribute

Method attribute

HTML Input Types

Input Type="text"

input type="password"

<input type="submit">

<input type="reset">

<input type="button">

<input type="color">

<input type="date">

<input type="number">

<input type="range">

some input attribute

Muitimedia HTML

Common Video Formats

Common Audio Formats

hi ^codolearn learners

hi _codolearn learners