HTML Basics - Understanding HTML Tags

HTML BASICS : UNDERSATANDING TAGS
Definition:
HTML (Hypertext Markup Language) is the standard markup language used to create web pages.
It provides the structure and content of a web page, defining how the page should be displayed in a
web browser.
It forms the backbone of web pages and provides a framework for organizing and presenting
information.
Here are some basic concepts of HTML:
Tags: HTML documents consist of HTML tags, which are special elements enclosed in angle
brackets (< >).
Tags are used to define the structure and content of a web page.
Each HTML tag serves a specific purpose and can contain text, images, links, and other
multimedia elements.
Elements: An HTML element consists of an opening tag, content, and a closing tag. The opening tag
denotes the beginning of an element, and the closing tag indicates the end of the element. The content
is the information or data contained within the tags.
Here are some important points to understand about HTML tags:

Opening and Closing Tags: Most HTML tags come in pairs: an opening tag and a closing
tag. The opening tag is used to indicate the beginning of an element, and the closing tag
marks the end of the element. The content is placed between the opening and closing tags.
Example: <p>This is a paragraph.</p>
Self-Closing Tags: Some tags, like the <img> tag for images or the <br> tag for line breaks,
do not require a closing tag. These tags are called self-closing or void tags.
Example:<img src="image.jpg" alt="An example image">

Nesting Tags: HTML tags can be nested inside one another. However, it is essential to
ensure proper nesting and not overlap tags incorrectly.
Example:
<div>
<p>This is a paragraph inside a div.</p>
</div>
Attributes: Tags can have attributes, which provide additional information about the
element. Attributes are added to the opening tag and are specified using key-value pairs.
Example:
<a href="https://www.example.com">This is a link</a>
In this example, href is an attribute that specifies the URL to which the link should navigate
when clicked.
Commonly Used Tags: Some commonly used HTML tags include:
<h1> to <h6> for headings.

<p> for paragraphs.
<a> for links.
<img> for images.
<ul> and <ol> for unordered and ordered lists, respectively.
<li> for list items.
<div> and <span> for grouping and styling elements.

<table> for creating tables.
The most basic structure of an HTML document looks like this:
<!DOCTYPE html>: This declaration defines the document type and version as HTML5.
<html>: The root element of an HTML document. All other elements are nested within it.
<head>: This element contains meta-information about the HTML document and links to external
resources like CSS and JavaScript files. It does not directly display content on the web page.
<body>: This element contains the visible content of the web page, such as text, images, links, and
other media.
Text Content: HTML allows you to add text content using various tags:
Paragraph (<p>): Used to define paragraphs of text.
<p>This is a paragraph of text.</p>

Headings (<h1> to <h6>): Used to define different levels of headings.
<h1>Main Heading</h1> <h2>Subheading</h2> <h3>Sub-subheading</h3>
Bold and Italic (<strong> and <em>): Used to add emphasis and importance to text.
<p>This is <strong>important</strong> text.</p> <p>This is <em>emphasized</em> text.</p>
Underline (<u>) and Strikethrough (<s>): Used for text decoration.
<p><u>This text is underlined.</u></p> <p><s>This text is strikethrough.</s></p>

Superscript (<sup>) and Subscript (<sub>): Used for mathematical notation.
<p>x<sup>2</sup></p> <p>H<sub>2</sub>O</p>
Line Break (<br>): Used to insert a line break within a paragraph.
<p>This is the first line.<br>This is the second line.</p>
Hyperlinks: HTML allows you to create hyperlinks to other web pages or resources using the anchor
(<a>) tag.
<a href="https://www.example.com">Click here</a> to visit Example.com.

Images: You can embed images in an HTML page using the image (<img>) tag.
<img src="image.jpg" alt="Image description">
The src attribute specifies the image URL.
The alt attribute provides alternative text for accessibility and is displayed if the image cannot be
loaded.
Lists: HTML supports both unordered and ordered lists.
Unordered List (<ul>) with List Items (<li>):

<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
Ordered List (<ol>) with List Items (<li>):

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>
Divisions and Spans: <div> and <span> are container elements used for grouping and applying
styles.
<div>: Used as a block-level container.
<div> <h2>Section 1</h2> <p>This is the content of section 1.</p> </div>

<span>: Used as an inline container.
<p>This is a <span style="color: blue;">blue</span> word.</p>
HTML Comments: Comments are used to add notes within the HTML code, which are not visible
on the web page.


HTML is a versatile language with many more tags and attributes to create complex and interactive
web pages. Understanding the basics of HTML lays the foundation for web development and
designing effective web pages. As you progress, you'll learn additional HTML elements and
attributes to enhance your web pages' functionality and aesthetics.
HTML TAGS:

HTML Basics - Understanding HTML Tags

Uploaded by

HTML Basics - Understanding HTML Tags

Uploaded by

HTML BASICS : UNDERSATANDING TAGS

Here are some important points to understand about HTML tags:

Example:<img src="image.jpg" alt="An example image">

<h1> to <h6> for headings.

<div> and <span> for grouping and styling elements.

<p>This is a paragraph of text.</p>

<p><u>This text is underlined.</u></p> <p><s>This text is strikethrough.</s></p>

<a href="https://www.example.com">Click here</a> to visit Example.com.

Unordered List (<ul>) with List Items (<li>):

Ordered List (<ol>) with List Items (<li>):

<div> <h2>Section 1</h2> <p>This is the content of section 1.</p> </div>

You might also like