Scribd
Upload
8 views17 pages

Radhika

HTML (HyperText Markup Language) is the standard language for creating and structuring web content, using elements, tags, and attributes to organize multimedia. It is essential for web development, allowing users to build websites, customize content, and understand web structure, with HTML5 introducing enhanced features like semantic tags and multimedia support. While HTML has limitations in interactivity and SEO, it serves as the foundational markup language for web pages, complemented by CSS and JavaScript.

Uploaded by

Jay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views17 pages

Radhika

HTML (HyperText Markup Language) is the standard language for creating and structuring web content, using elements, tags, and attributes to organize multimedia. It is essential for web development, allowing users to build websites, customize content, and understand web structure, with HTML5 introducing enhanced features like semantic tags and multimedia support. While HTML has limitations in interactivity and SEO, it serves as the foundational markup language for web pages, complemented by CSS and JavaScript.

Uploaded by

Jay Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

HTML Introduction

HTML stands for HyperText Markup Language. It is the


standard language used to create and structure content on
the web. It defines the structure of a webpage by using a
series of elements, tags, and attributes to organize text,
images, links, and other multimedia elements.
 HTML is a markup language, not a programming
language, meaning it annotates text to define how it is
structured and displayed by web browsers.
 It forms the building blocks of all websites and is
complemented by CSS for style and JavaScript for
interactivity.
 It is a static language, meaning that it does not
inherently provide interactive features but can be
combined with CSS for styling and JavaScript for
interactivity.

Why Learn HTML?


Here are 5 common reasons to learn HTML:
1. Build Websites: HTML is the basic building block for
creating any website. Learning HTML can help you pursue
a career in web development.
2. Customize Content: Allows you to edit or tweak web
pages, emails, or templates to fit your needs.
3. Understand how the web works: This helps you grasp
how the internet works and how web pages are
structured.
4. 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.
5. Learn Easily: HTML is beginner-friendly, making it a
great first step into the world of coding and technology.

1
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.
 SEO Limitations: While HTML provides structure, it’s not
enough by itself for search engine optimization (SEO).
Proper metadata and content structuring, as well as
external SEO practices, are necessary.
 Limited Styles: While HTML can handle basic styles via
the style attribute, it is typically complemented by CSS
for complex styling and layout.
HTML5: Enhancements and New
Features
HTML5 introduced several powerful features that improve
the structure and functionality of web pages, including:
 Semantics: New tags like <article>, <footer>,
<header>, and <section> to improve the meaning of the
content.
 Multimedia: <audio> and <video> tags for embedding
audio and video without plugins.
 APIs: New APIs like Geolocation, Web Storage, and
Canvas allow for more dynamic content and interactive
websites.
HTML History
Currently, we are using HTML5, which is the latest and
most advanced version of HTML.
2
 HTML was initially created by Tim Berners-Lee in 1991
as a way to share and structure documents on the web.
 The first-ever version was HTML 1.0, a basic and limited
version. However, the first standardized version, HTML
2.0, was published in 1995, laying the foundation for web
development as we know it today.

Sample Program
<!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>
Output:

3
In this example:
 <!DOCTYPE html>: Declares the document type and
version (HTML5).
 <html>: The root element that wraps all HTML content.
 <head>: Contains meta-information about the webpage,
like the title.
 <title>: Specifies the title of the webpage (appears in
the browser tab).
 <body>: Contains the visible content of the webpage.
 <h1>: Represents the main heading on the page
(“Welcome to My Webpage”).
 <p>: Defines a paragraph of text (“This is my first
paragraph of text!”).

Key Features of HTML


 Markup Language: HTML uses tags to markup content.
Each tag defines different elements, such as headings,
paragraphs, tables, links, etc.
 Semantics: HTML provides semantic tags that describe
the meaning of the content. For example, <article>,
<footer>, <header>, and <nav> describe different types
of content on a webpage.
 Responsive Web Design: HTML supports various
features for building responsive websites, including media
queries and the ability to embed multimedia content.
 Interactive Content: HTML can embed interactive
content using JavaScript, which allows for dynamic
changes in the content.

4
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.

 <!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:
o <title>: Defines the title displayed on the browser tab.
o <meta>: Provides information like the character set or
viewport settings.
o <link>: Links external stylesheets or resources.
o <style>: Embeds internal CSS styles.
o <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.
5
 <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.

HTML Elements and HTML Tag


HTML Elements and HTML Tags are related but distinct.
An HTML element is the complete structure, including the
opening tag, content (if any), and the closing tag (if
applicable).
On the other hand, A tag is the actual keyword or name
enclosed in angle brackets ( < >) that tells the browser what
kind of content to expect.

Tag Description

<html> The root element of an HTML document

<head> Contains meta-information about the webpage

<body> Contains the visible content of the webpage

<h1> to Headings of various levels (h1 being the


<h6> largest)

<p> Defines a paragraph

<a> Defines a hyperlink

<img> Embed an image

<ul> Defines an unordered list

6
Tag Description

<ol> Defines an ordered list

<li> Defines a list item

<table> Defines a table

<form> Defines an HTML form

HTML Attributes
Attributes provide additional information about an element.
They are placed inside the opening tag and are written as
name=”value”. Common attributes include class, id, href,
and src.
Example:
<a href="https://www.example.com">Visit Example</a>
 href is an attribute of the <a> tag that defines the URL of
the link.

HTML Editors
An HTML Editor is a software application designed to help
users create and modify HTML code. It often includes
features like syntax highlighting, tag completion, and error
detection, which facilitate the coding process.
There are two main types of HTML editors:
1. Text-Based Editors – Allow direct coding with features
like syntax highlighting and code completion for full
control over the webpage structure. Example – Sublime
Text, Visual Studio Code, etc.
2. WYSIWYG (What You See Is What You Get) Editors –
Offer a graphical interface to design web pages visually,
automatically generating the corresponding HTML code.
Example – Adobe Dreamweaver, etc.

7
HTML Editors List
There are various free and paid HTML editors available in
the market, but in this article, we will be covering some
renowned free HTML editors that you can use as a beginner
or switch to if you are an experienced developer.
Table of Content
 1. Notepad
 2. Brackets
 3. Sublime Text Editor
 4. Atom
 5. Visual Studio Code
1.Notepad
Notepad is a simple text editor that is also used to write
HTML code. It is an inbuilt desktop application available in
Windows OS.
2.Brackets
Brackets is an open-source software primarily used for Web
development. It provides live HTML, CSS, and JavaScript
editing functionality. Similar to the Notepad editor, create a
new file and save it with a .html extension to run the HTML
file.
3. Sublime Text Editor
Sublime is a cross-platform code editor tool. It supports all
markup languages and is used as an editor for HTML. Similar
to the Notepad editor, create a new file and save it with
a .html extension to run an HTML file.
4. Atom
Atom is an open-source code editor tool for MAC, Linux, and
Windows. We can use Atom to write and edit HTML
code. Similar to the Notepad editor, create a new file and
save it with a .html extension to run an HTML file.
5. Visual Studio Code
It is one of the most popular code editors of today’s
generation. Many companies and software developers prefer
this online HTML code editor.

8
HTML Editors Comparsion
Ideal For Pros Cons

No advanced
Pre-installed, simple to features like syntax
Beginners
use highlighting or
debugging

Highly extensible,
Can be resource-
supports multiple
Professionals heavy for basic
languages, great
tasks
debugging tools

Flexible and Slower performance


Advanced
extensible, integrates compared to other
Learners
well with GitHub editors

Real-time preview, Discontinued


Frontend
supports web-centric updates, limited
Developers
workflows community support

Developers Lightweight yet


Paid license for full
looking for powerful, highly
features
speed customizable

Reasons to Use an HTML Editor


Editors for HTML offer several advantages to writing and
editing HTML codes. Some benefits of using HTML editors
are:
1. Syntax Highlighting: HTML editors use color-coding to
distinguish tags, attributes, and content, making code
more readable.
2. Autocompletion: These editors suggest tags and correct
common errors, improving coding speed.
3. Code Validation: Built-in validators check for syntax
issues and missing tags.
4. Debugging Tools: Some editors offer debugging
features to identify and fix errors.

9
5. Customization Options: Customize the interface and
settings to enhance your coding experience.

How to Choose the Right HTML Editor?


When selecting an HTML editor, consider the following
factors:
1. Skill level: Beginners might prefer WYSIWYG editors for
ease of use, whereas advanced users may opt for text-
based editors for better control.
2. Project needs: Larger projects might benefit from a
more robust editor with extensive features and
integrations.
3. Compatibility: Ensure the editor supports other
technologies you plan to use like CSS, JavaScript, or
various frameworks.
HTML Basics
HTML (HyperText Markup Language) is the standard markup
language for creating and structuring web pages.
 It defines the structure of a webpage using elements and
tags.
 HTML is responsible for displaying text, images, and other
content.
 It serves as the foundation for building websites and web
applications.
In this guide, we learn the basics of HTML, which includes
HTML tags ( <h1>, <p>, <img>, etc), attributes, elements,
and document structure,e which collectively form a working
web page.
Basic HTML Document
Every HTML document begins with a document type
declaration, setting the foundation for the webpage. This
section introduces basic HTML tags that structure the page,
such as <head>, <body>, and <title>. Although this is not
mandatory, it is a good convention to start the document
with the below-mentioned tag.
Below mentioned are the basic HTML tags that divide the
whole page into various parts like head, body, etc.

10
Basic HTML Tags for Document Structure

Tags Descriptions

Encloses the entire HTML document, serving as the


<html>
root element for all HTML content.

Contains header information about the webpage,


<head including title, meta tags, and linked stylesheets. It
> is part of the document’s structure but is not
displayed on the webpage.

Used within the <head> section to define the title of


the HTML document. It appears in the browser tab or
<title>
window and provides a brief description of the
webpage’s content.

Encloses the visible content of the webpage, such as


<body text, images, audio, videos, and links. All elements
> within this tag are displayed on the actual webpage
when viewed in a browser.

11
HTML Basic Structure

HTML Headings
The HTML heading tags are used to create headings for the
content of a webpage. These tags are typically placed inside
the body tag. HTML offers six heading tags, from <h1> to
<h6>, each displaying the heading in a different font size.
Syntax:
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
Sample Program

<html>
<body>
12
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>

 This code displays six headings (<h1> to <h6>) on the


webpage, with <h1> being the largest and most
prominent and <h6> being the smallest.
 The headings are used to define text hierarchy and
emphasize content based on importance.
HTML Paragraph and Break Elements
HTML <p> tags are used to write paragraph statements
on a webpage. They start with the <p> tag and end with
</p>. The HTML <br> tag is used to insert a single line
break and does not require a closing tag. In HTML, the
break tag is written as <br>.
Syntax:
// for Paragraph
<p> Content... </p>
// for Break
<br>
Sample program

<html>
<body>
<p>
HTML stands for HyperText Markup Language.<br>
It is used to design web pages using a markup
language.<br>HTML is a combination of Hypertext
and Markup language.<br>Hypertext defines the
link between web pages.<br>A markup language
is used to define the text document within the
tag which defines the structure of web pages.
</p>
</body>
</html>
13
In this Example:
 This HTML code uses a <p> tag to display a paragraph of
text, providing an overview of what HTML is and its
purpose.
 The <br> tags are used to insert line breaks, making the
text more readable by separating each sentence onto a
new line within the paragraph.

HTML Horizontal Line


The HTML <hr> tag is used to divide a page into sections by
creating a horizontal line that spans from the left to the
right side of the page. This is an empty tag and does not
require a closing tag or any additional attributes.
Syntax:
<hr>

<html>
<body>
<p>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
A Computer Science portal for geeks<br>
</p>
<hr>

</body>
</html>

HTML Comments
HTML comments are used to add notes or explanations in the HTML code
that are not displayed by the browser.
14
 They are useful for documenting the code, making it easier to understand
and maintain.
 To add a comment, use the syntax <!– your comment here –>.

<!-- This is a comment and will not be displayed on the webpage --


>
<p>This is visible text.</p>
Different Ways to Add Comments in HTML
There are two main ways to write comments in HTML: single-line
and multi-line comments. Both use the same basic syntax but differ
in how they are implemented
Comment Descriptions Syntax

Single- The single-line comment is given inside <!-- commen


line the ( <!-- comment --> ) tag. t -->

It follows the syntax of a single-line <!-- Multi


Multi-line comment by adding multiple lines in the Line
comment. Comment -->

Note: The shortcut for adding the comment through the keyboard is
by typing Ctrl + / in Windows, and Command + / for Mac users.

HTML Formatting Elements


Formatting elements were designed to display special types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML Attributes
Types of HTML Attributes
HTML attributes can be broadly categorized based on their function
and the type of elements they modify. For example –
15
Global Attributes
These attributes can be used with any HTML element (though their
effects might vary based on the element):
Attribute Description

class Groups elements and allows styling.

style Inline CSS styles.

Specifies the source of various resources, such as


src image URLs for the img element, video URLs for the
video element, and audio URLs for the audio element.

Determines whether the content within the element is


contenteditable
editable.

role Specifies the element’s accessibility role.

Determines the order of focus during keyboard


tabindex
navigation.

Assigns a unique identifier to an element, allowing


id
targeting with CSS or JavaScript.

Defines the hyperlink destination within the a element,


href
enabling navigation.

Provides alternative text for images, essential for


alt
accessibility and SEO.

Creates a tooltip that appears when a user hovers over


title
the element.

lang Specifies the language of the element’s content, aiding

16
Attribute Description

with translation and accessibility.

17

You might also like