What Is HTML
In simple terms, a Web page (or HTML document) is a plain text file that has been
encoded using Hypertext Markup Language (HTML) so that it appears nicely formatted
in a Web browser. Here’s what HTML means, word-by-word:
Hypertext :
Text that you click to jump from document to document. This is a reference to the ability of Web pages to link to one another.
Markup:
These tags that apply layout and formatting conventions to plain text. Literally, the plain text is “marked up” with the tags.
Language :
A reference to the fact that HTML is considered a programming language.
Understanding HTML Tags
The code within an HTML file consists of text surrounded by tags. These tags indicate where the formatting should be applied, how the layout should appear, what pictures should be placed in certain locations, and more.
How tags came into existence
In the olden days of the Internet speed ranged from 2400 bps to 28.8 Kbps. That’s really slow. Text files transfer much faster than binary files, so for any type of information-sharing system to be popular, it had to be text-based otherwise the website will load slowly.
People designing Web pages also wanted their pages to be attractive. They couldn’t just format pages in a word processor, though, because every word processor handled formatting differently, and it was impossible to know which one a visitor to a site might be using. Word processing files are also much larger than plain text files.
The Web’s creators developed an elegant solution. Instead of sending the formatted pages over the Internet, they created an application a Web browser that could interpret plain-text code (HTML tags) as formatting instructions. Now this text could be sent quickly and efficiently in plain-text format, and then be processed and displayed attractively and graphically on the local PC.
Choosing an HTML Version:
Different versions of HTML use different tags for some types of content, although they more similar than different overall. Here’s a quick comparison of the HTML versions you may encounter:
HTML4
A very stable, universally accepted code set, which is also fairly forgiving
of small coding errors. Using HTML4 codes is desirable when compatibility with all
browsers is important.
XHTML
A strict, standards-based implementation of HTML4 created with XML
extensible Markup Language. XHTML coding uses the same codes as HTML4, so it
is compatible with the same browsers as HTML4.
HTML5
A revised code set that builds upon HTML4 to add new capabilities.
HTML5 offers many dramatic improvements in the areas of application handling
and multimedia.. For example, HTML5 has and
tags for inserting multimedia content, whereas HTML4 inserts all types of multimedia
content via a generic tag.
How does HTML looks like.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html> :
All HTML documents must start with a <!DOCTYPE> declaration.The declaration is not a HTML tag by itself. It is a information that what type of document browser should expect.
<html>:
This tag represnts the root of the HTML document.The HTML tag contains all the other elements of our page.
We should always use lang attribute inside the HTML tag to denote the language of the web page.
<head>:
<head> tag contains the meta data (data about the data) of our webpage and is placed between the <body> and the <html> tag. Some elements that can go inside the <head> tag are
<title> (required in every HTML document),<style>,
<base>,<link>,<meta>,<script> and some more.
<body>:
<body> defines the body of the document. It contains all the contents of the page such as heading,paragraphs,images,links,tables,lists etc.
Note:There can only be one <body>element in an HTML document.
Some of the most used <HTML> tags :
<a> :
It is termed as anchor tag and it creates a hyperlink or link
<a href="https://www.google.com/">google</a>
<abbr>:
It defines an abbreviation for a phrase or longer word. When we hover it displays the abbreviation.
<!DOCTYPE html>
<html>
<body>
<h1>The abbr element</h1>
<p>The <abbr title="Non-governmental organization">NGO</abbr> is a non-profitable organization.</p>
</body>
</html>
The NGO is a non-profitable organization.
b<address> :
v
<!DOCTYPE html>
<html>
<head>
<title>Address Tag</title>
</head>
<body>
<h2>Example of Address tag</h2>
<address>The article is written by:<b>Abhay verma</b> <br>Contact Author at:
<a href="mailto:example@gmail.com">Example@gmail.com</a><br>
</a>
</address>
</body>
</html>
Contact Author at:
Example@gmail.com
<area> :
The <area> tag defines an area inside an image map (an image map is an image with clickable areas).
<area> elements are always nested inside a <map> tag.
<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<img src="https://images.unsplash.com/photo-1667506057340-6f9f6140884f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=300&q=60" usemap="#image-map">
<map name="image-map">
<area target="" alt="" title="" href="" coords="98,36,223,155" shape="rect">
</map>
</body>
</html>
<article> :
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.
<!DOCTYPE html>
<html>
<body>
<h1>The article element</h1>
<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>
</body>
Google Chrome
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!
<aside> :
HTML Tags List It defines content aside from main content. Mainly represented as sidebar.
<!DOCTYPE html>
<html>
<body>
<h1>The aside element</h1>
<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>
</body>
</html>
The aside element
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!
<audio> :
HTML Tags List It is used to embed sound content in HTML document.
<!DOCTYPE html>
<html>
<body>
<p>Audio</p>
<audio controls>
<source src="http://commondatastorage.googleapis.com/codeskulptor-assets/Epoq-Lepidoptera.ogg" type="audio/ogg">
</audio>
</body>
</html>
<b>:
This tag is used to bold the text without marking it important.
<!DOCTYPE html>
<html>
<body>
<h1>The b element</h1>
<p>This is normal text - <b>and this is bold text</b>.</p>
</body>
</html>
The b element
This is normal text - and this is bold text.
<base> :
The <base> tag specifies the base URL and/or target for all relative URLs in a document.
The <base> tag must have either an href or a target attribute present, or both.
<head>
<base href="https://www.google.co.in/" target="_blank">
</head>
<body>
<a href="login">HTML base Tag</a>
</body>
<bdo> :
It stands for bidirectional override. Mostly used to change the text direction. It is useful while typing urdu words.
<!DOCTYPE html>
<html>
<body>
<p><bdo dir="rtl">This paragraph will go right-to-left.</bdo></p>
</body>
</html>
tfel-ot-thgir og lliw hpargarap sihT
<blockquote>:
The <blockquote> tag specifies a section that is quoted from another source.
<blockquote cite="https://en.wikipedia.org/wiki/UNESCO">
The United Nations Educational, Scientific and Cultural Organization[a] is a specialised agency of the United Nations (UN) aimed at promoting world peace and security through international cooperation in education, arts, sciences and culture
</blockquote>
The United Nations Educational, Scientific and Cultural Organization[a] is a specialised agency of the United Nations (UN) aimed at promoting world peace and security through international cooperation in education, arts, sciences and culture
<br> :
This gives a line break;
<!DOCTYPE html>
<html>
<body>
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
</body>
</html>
To force
line breaks
in a text,
use the br
element.
<button> :
Button tag gives a clickable button. Inside a <button> element you can put text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a button created with the <input> element.
<!DOCTYPE html>
<html>
<body>
<button type="button" >Click Me!</button>
</body>
</html>
<caption> :
<caption> tag is used to give caption to the tables.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<caption>Time table</caption>
<tr>
<th>1</th>
<th>maths</th>
</tr>
<tr>
<td>1</td>
<td>science</td>
</tr>
<tr>
<td>3</td>
<td>english</td>
</tr>
</table>
</body>
</html>
| 1 | maths |
|---|---|
| 2 | science |
| 3 | english |
<cite> :
Cite is used to refer to a piece of art work such as poem, book, sculpture etc.
<!DOCTYPE html>
<html>
<body>
<p><cite>The monalisa</cite> was made by picaso</p>
</body>
</html>
The monalisa was made by picaso
###<datalist> :
This tag is ude to prove autocomplete feature. It has some predefined objects that can be selected by the users.
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php" method="get">
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</p>
</body>
</html>