HTML Basics
Uploaded by
Dr.A.JeyalakshmiHTML Basics
Uploaded by
Dr.A.JeyalakshmiHTML-BASICS
Dr.A.JEYALAKSHMI
Associate Professor
Department of Information Technology
Sri Ramakrishna College of Arts & Science
Coimbatore
HTML- Introduction
• HTML: Hypertext Markup Language, is the
backbone of a website.
• It provides the structure and layout for web
pages.
• HTML tags are the building blocks that define
headings, paragraphs, images, links, and more.
• HTML tags are essential for creating well-
structured, easily navigable, and user-friendly
websites.
• It is a fundamental tool in modern web
development.
– As of 2025, over 95% of websites rely on HTML
alongside CSS and JavaScript.
• It is a markup language, not a programming
language. This means it annotates text to define
how it is structured and displayed by web
browsers.
• It is a static language, meaning it does not
inherently provide interactive features but can be
combined with CSS for styling and JavaScript for
interactivity.
• In a nutshell, HTML is all about organizing and
displaying information on a webpage.
– We can think of it as the bones or structure of a
webpage.
Basic HTML Code Example
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is my first paragraph of text!</p>
</body>
</html>
HTML Page Structure
• The basic structure of an HTML page is shown below.
• It contains the essential building-block elements (i.e.
doctype declaration, HTML, head, title, and body
elements) upon which all web pages are created.
HTML Basic Document and Structure
• <!DOCTYPE html> - This is the document type
declaration, not a tag.
– It declares that the document is an HTML5 document.
• <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. Typical elements inside the <head>
include:
– <title>: Defines the title displayed on the browser tab.
– <meta>: Provides information like the character set or
viewport settings.
– <link>: Links external stylesheets or resources.
– <style>: Embeds internal CSS styles.
– <script>: Embeds JavaScript for functionality.
• <title> - The title is what is displayed on the top of your
browser when you visit a website and contains the title
of the webpage that you are viewing.
• <h2> - The <h2> tag is a second-level heading tag.
• <p>- The <p> tag represents a paragraph of text.
• <body> - The body tag is used to enclose all 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 an HTML text
editor.
• Save the text file using the ".html" or .htm" extension.
• Once saved as an HTML document, the file can be
opened as a webpage in the browser.
Why Learn HTML?
• Build Websites: HTML is the basic building block for
creating any website.
• Customize Content: Allows you to edit web pages,
emails, or templates to fit your needs.
• Understand how the web works: This helps you grasp
how the internet works and how web pages are
structured.
• Employment Opportunities: According to the Bureau of
Labor Statistics, projects that employment for web
developers will grow 16% between 2022 and 2032,
which is much faster than the average across all
occupations.
• Learn Easily: HTML is beginner-friendly, making it a
great first step into the world of coding and technology.
Applications of HTML
• Web Development: HTML is the backbone of
every webpage.
– It structures the content and integrates multimedia,
hyperlinks, and more.
• Web Applications: HTML, in combination with
CSS and JavaScript, powers complex web
applications (e.g., Google Docs, Trello).
• Emails: HTML emails use table-based layouts and
embedded media to deliver rich, interactive
content.
• Mobile App Development: HTML5 is used with
frameworks like PhoneGap to build mobile apps
for iOS and Android.
Limitations of HTML
• No Logic or Functionality: HTML cannot
handle complex logic, interactivity, or dynamic
content on its own. It requires JavaScript for
such tasks.
• Limited Styles: While HTML can handle basic
styles via the style attribute, it is typically
complemented by CSS for complex styling and
layout.
