HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.
HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was
published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999. Though HTML 4.01
version is widely used but currently we are having HTML-5 version which is an extension to HTML 4.01, and this
version was published in 2012.
Why to Learn HTML?
Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs,
lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being
widely used to format web pages with the help of different tags available in HTML language.
HTML is a MUST for students and working professionals to become a great Software Engineer specially when they
are working in Web Development Domain. I will list down some of the key advantages of learning HTML:
Create Web site - You can create a website or customize an existing web template if you know HTML well.
Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS designing
is a must skill.
Understand web - If you want to optimize your website, to boost its speed and performance, it is good to know
HTML to yield best results.
Learn other languages - Once you understands the basic of HTML then other related technologies like javascript,
php, or angular are become easier to understand.
HTML Basics
Title Tags
The <title> tag 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> tag is required in HTML documents!
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
Here are some tips for creating good titles:
Go for a longer, descriptive title (avoid one- or two-word titles)
Search engines will display about 50-60 characters of the title, so try not to have titles longer than that
Do not use just a list of words as the title (this may reduce the page's position in search results)
So, try to make the title as accurate and meaningful as possible! Note: You can NOT have more than one <title> element in an HTML document.
Example:
<!DOCTYPE html>
<html>
<head> <title>This is the title of the document.</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body Tags
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note: There can only be one <body> element in an HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>This line is within body Tag</p>
</body>
</html>
Output
This line is within body Tag
Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings,
which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any
heading, browser adds one line before and one line after that heading.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body> <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>
</body>
</html>
Output
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an
opening <p> and a closing </p> tag as shown below in the example :-
Example:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body> <p>This is Paragraph 1 text</p>
<p>This is Paragraph 2 text</p>
<p>This is Paragraph 3 text</p>
</body>
</html>
Output
This is Paragraph 1 text
This is Paragraph 2 text
This is Paragraph 3 text
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element,
where you do not need opening and closing tags, as there is nothing to go in between them. The <br /> tag has a space between the
characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss
the forward slash character and just use <br> it is not valid in XHTML.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hey!<br />
Take time to do<br />
What makes your soul<br />
HAPPY :) </p>
</body>
</html>
Output
Hey! Take time to do What makes your soul HAPPY :)
The div element is a generic container that you can use to add more structure to your page content. For example, you might group several paragraphs
or headings that serve a similar purpose together inside a div element. Typically, div elements are used for things like:
Page headers and footers
Columns of content and sidebars
Highlighted boxes within the text flow
Areas of the page with a specific purpose, such as ad spots
Image galleries
By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs. This is the basis for creating CSS-based page layouts.
The span element is similar to div in that its used to add structure to your content. The difference is that div is a block-level element, while span is an inline element:
Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.
Inline elements, such as span, a, and img, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can not contain block-level elements.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My recent mobile colour is <span style="color:blue;font-weight:bold">blue</span> but I want a <span style="color:darkolivegreen;font-weight:bold">dark green</span> colour iPhone.</p>
</body>
</html>
Output
The span element
My recent mobile colour is blue but I want a dark green colour iPhone.
Button Tag
The <button> tag defines 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!
Tip:
Always specify the type attribute for a <button> element, to tell browsers what type of button it is.
You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.
The <code> tag is used to define a piece of computer code. The content inside is displayed in the browser's default monospace font.
Tip: This tag is not deprecated. However, it is possible to achieve richer effect by using CSS (see example below).
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The code element</h1>
<p>The HTML <code>button</code> tag defines a clickable button.</p>
<p>The CSS <code>background-color</code> property defines the background color of an element.</p>
</body>
</html>
Output
The code element
The HTML button tag defines a clickable button.
The CSS background-color property defines the background color of an element.
Main Tag
The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. Note:There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The main element</h1>
<main>
<h1>Most Popular Browsers</h1>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p>
<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>
<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 Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</main>
</body>
</html>
Output
Most Popular Browsers
Chrome, Firefox, and Edge are the most used browsers today.
Google Chrome
Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!
Mozilla Firefox
Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.
Microsoft Edge
Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.
List Tag
The <li> tag defines a list item.
The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
In <ul> and <menu>, the list items will usually be displayed with bullet points.
In <ol>, the list items will usually be displayed with numbers or letters. Tip: Use CSS to style lists.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>The ol and ul elements</h1>
<p>The ol element defines an ordered list:</p>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<p>The ul element defines an unordered list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output
Coffee
Tea
Milk
Coffee
Tea
Milk
Order List Tag
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
The <li> tag is used to define each list item.
Tip:
The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
Tip: Use CSS to style lists. Example:
<!DOCTYPE html>
<html>
<body>
<h1>The ul element</h1>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Output
Coffee
Tea
Milk
Style Tag
The <style> tag is used to define style information in (CSS) for a document.
Inside the <style> element you specify how HTML elements should render in a browser. Tips and Notes
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. If some properties have been defined for the same selector (element) in different style sheets, the value from the last read style sheet will be used (see example below)!
To link to an external style sheet, use the tag.
To learn more about style sheets, please read our CSS Tutorial.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Output
A heading
A paragraph.
Time Tag
The <time> tag defines a specific time (or datetime).
The datetime attribute of this element is used translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results. Example:
<!DOCTYPE html>
<html>
<body>
<h1>The time element</h1>
<p>Open from <time>10:00</time> to <time>21:00</time> every weekday.</p>
<p>Newton School Full-Stack Development Class start <time datetime="2022-01-17 21:00">Day 1</time>.</p>
<p><b>Note:</b> The time element does not render as anything special in any of the major browsers.</p>
</body>
</html>
Output
Open from to every weekday.
Newton School Full-Stack Development Class start .
HTML Media
HTML Image Tag
The tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.
The tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
Note: Also, always specify the width and height of an image. If width and height are not specified, the page might flicker while the image loads. Tip: To link an image to another document, simply nest the tag inside an tag (see example below).
<!DOCTYPE html>
<html>
<body>
<h1>The i element</h1>
<p><i>Lorem ipsum</i> is the most popular filler text in history.</p>
<p>The <i>RMS Titanic</i>, a luxury steamship, sank on April 15, 1912 after striking an iceberg.</p>
</body>
</html> Output
Lorem ipsum is the most popular filler text in history.
The RMS Titanic, a luxury steamship, sank on April 15, 1912 after striking an iceberg.
Underline Tag
The <u> tag represents some text that is unarticulated and styled differently from normal text, such as misspelled words or proper names in Chinese text. The content inside is typically displayed with an underline. You can change this with CSS (see example below). Tip: Avoid using the <u> element where it could be confused for a hyperlink! Example:
<!DOCTYPE html>
<html>
<body>
<h1>The u element</h1>
<p>This is some <u>mispeled</u> text.</p>
</body>
</html>
Output
This is some mispeled text.
Now, You're at the end of the page.. Thanks for your visit.. HAPPY LEARNING!
