Basic of HTML 5 1
What is Programming Language ?
A programming language is like a set of instructions you give to a computer to perform tasks. It's
a way for people to communicate with computers and tell them what to do by writing code using
specific rules and symbols. Popular examples include Python, Java, and JavaScript.
What is a Compiler ?
A compiler is a software tool that translates the high-level source code written by a programmer
into machine code or another programming language. It takes the entire code and converts it
into a form that a computer's hardware can execute. Essentially, it bridges the gap between
human-readable code and the binary language that computers can process.
Note: Compiler reads code from top to bottom, line by line.
HTML Overview
HTML stands for Hypertext Markup Language, and it is the most widely used language to
write Web Pages.
Note: HTML extension is ‘ .html ’
A Brief History of HTML
1. 1989-1990: HTML's roots go back to the late 1980s when Tim Berners-Lee, a British
computer scientist, invented the World Wide Web while working at CERN (European
Organization for Nuclear Research). The first HTML was a simple document format used to link
documents together.
2. 1991: HTML underwent significant development. Tim Berners-Lee introduced HTML tags for
headings, lists, and links.
3. 1995: HTML 2.0 was published as the first standard. This version introduced new features
like forms and text alignment options.
Copyright to Tplpro Funware pvt. ltd.
Basic of HTML 5 2
4. 1997: HTML 4.0 was a major release, adding support for scripting languages like JavaScript
and introducing the Document Object Model (DOM).
5. 1999: HTML 4.01 was released as a minor revision, focusing on fixing errors and refining the
standard.
6. 2008: HTML 5 was introduced as a major update. It brought new elements like `<video>`,
`<audio>`, and `<canvas>`, providing richer multimedia capabilities. HTML5 also aimed to
improve support for multimedia and offline web applications.
Hello World in HTML
<html>
<head>
<title>First HTML</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
Output
HTML Tags used in above code
<html> It tells the browser that everything inside it is part of a web
document. HTML (Hypertext Markup Language) is the standard
language used to create web pages, and the <html> tag is the
Copyright to Tplpro Funware pvt. ltd.
Basic of HTML 5 3
starting point. Inside the <html> tag, you'll find other essential tags
like <head> and <body>, which contain information about the page
(title, styles, scripts) and the actual content of the page, respectively.
<head> The <head> tag in HTML is used to define the head section of a
web page.This section contains information about the HTML
document, such as the title, links to stylesheets, scripts.
<title> The <title> tag is used inside the <head> tag to mention the
document title.
<body> <body> tag in HTML is like the main content area of a web page.
Everything you want to display on your webpage, such as text,
images, links, and other elements, goes inside the <body> tag.
<p> This tag represents a paragraph by default, it has margin, and its
nature is block-level.
Note: The homepage filename must be 'index.html' because the live server accesses the
'index.html' file.
What is Element ?
It's a way to structure and organize content. An HTML element typically consists of a starting
tag, some content, and an ending tag. The content between the tags is what gets displayed on
the web page.
Eg:
<p>Hello World</p>
In this case:
<p> is the starting tag, indicating the beginning of the paragraph.
“Hello World”. is the actual content, the text of the paragraph.
</p> is the ending tag, marking the end of the paragraph.
What are Attributes ?
They are added to the opening tag of an element and are used to modify or customize the
behavior of that element. Attributes consist of a name and a value, separated by an equal sign.
Copyright to Tplpro Funware pvt. ltd.
Basic of HTML 5 4
Eg:
<a href="https://www.example.com"> Visit Example.com </a>
In this example:
<a> is the opening tag of the anchor element.
href is an attribute name, indicating the hyperlink reference.
"https://www.example.com" is the value assigned to the href attribute, specifying the URL to
which the link points.
“ Visit Example.com ” is the content of the anchor element.
</a> is the closing tag of the anchor element.
Benefit of Indentation
Indentation in programming, including HTML, is the practice of visually aligning code to convey
its structure.
1. Readability
2. Debugging
3. Collaboration
4. Maintainability
5. Coding Standards
What is a Comment ?
In HTML, a comment is a piece of text that is not displayed in the web browser when the page is
viewed. Comments are used to include notes or explanations within the HTML code for the
developers or anyone who reads the code.
In HTML, comments are created using the <!-- (opening comment tag) and -->
Syntax
<!-- This is comment -->
Eg:
<!-- This is a comment in HTML. It won't be displayed in the browser. -->
H1 to H6 tag
These tags represent headings, with <h1> being the highest level (most important) and <h6>
being the lowest level (least important).
Copyright to Tplpro Funware pvt. ltd.
Basic of HTML 5 5
Note: The default nature is block-level, and it includes some margin.
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
Output
<br> tag
The <br> tag in HTML stands for "line break." It is a self-closing tag, meaning it doesn't have
a closing tag.
Eg:
<p>This is some text.<br>This is on a new line.</p>
Output
Copyright to Tplpro Funware pvt. ltd.
Basic of HTML 5 6
<hr> tag
The <hr> tag in HTML stands for "horizontal rule." It is a self-closing tag used to create a
horizontal line or rule across the width of a page, typically to separate different sections of
content.
Output
Formatting in HTML
<b> tag
<b> tag in HTML is used to make text bold. If you want certain words or phrases to stand out
and be visually stronger, you can wrap them with the <b> tag.
Eg:
<p>This is <b>important</b>information.</p>
Output
<u> tag
<u> tag in HTML is used to underline text. If you want to make some words or phrases have a
line underneath them, you can use the <u>.
Eg:
<p>This is <u> underlined text </u> in a paragraph.</p>
Copyright to Tplpro Funware pvt. ltd.
Basic of HTML 5 7
Output:
<i> tag
<i> tag in HTML is used to make text italic. If you want to emphasize or add a different style to
certain words or phrases, you can use the <i> tag.
Eg:
<p>This is <i> italicized text</i> in a paragraph.</p>
Output:
<strong> tag
<strong>: Search engines and screen readers may interpret text within the <strong> tag as
having greater importance. This can be beneficial for search engine optimization (SEO) and
accessibility.
Eg:
<p>This is <strong>important</strong> in a paragraph.</p>
Output:
<em> tag
<em>: Search engines and screen readers may interpret text within the <em> tag as having a
higher level of importance or need special attention. This can be beneficial for search engine
optimization (SEO) and accessibility.
Eg:
<p>This product is <em>amazing</em> and highly recommended.</p>
Copyright to Tplpro Funware pvt. ltd.
Basic of HTML 5 8
Output:
<small> Tag
The <small> tag in HTML is used to make text appear smaller than the surrounding text. It is a
formatting element that is often used for disclaimers, copyright notices, or any text that is less
important.
Eg:
<p>This is the main text. <small>this is smaller text, </small>
perhaps a disclaimer or additional information.</p>
Output:
<mark> Tag
The <mark> tag in HTML is used to highlight parts of text for reference or user attention. It
typically results in the marked text being visually highlighted, often with a yellow background,
though the actual styling can vary between browsers.
Eg:
<p>This is a <mark>highlighted</mark> portion of text.</p>
Output:
Copyright to Tplpro Funware pvt. ltd.
