0% found this document useful (0 votes)
13 views

HTML Tag, Elements and Attribute

This is a PDF about HTML Tag, Elements and Attribute

Uploaded by

iagrimagrawal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views

HTML Tag, Elements and Attribute

This is a PDF about HTML Tag, Elements and Attribute

Uploaded by

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

Lesson:

HTML Tag, Elements

and Attribute

</>
Topics Covered
What is Element
Tag
Common Tag
Introduction to Attribute
Common Tag Attributes

Element and Tag

Element is the most basic component of an HTML document, which can represent text, paragraph, list, or any
other content in a web page.

Tags are used to define elements in an HTML document.


Tags are surrounded by angle brackets (< >) and are used to mark up content on a web page
HTML tags can be either opening tags or closing tags, and they define the beginning and end of an element.

Example : <div> Tag

Opening tag: This consists of the name of the element (in this example, div), wrapped in opening and closing
angle brackets. This opening tag marks where the element begins or starts to take effect.

Content: This is the content of the element. In this example, it is the div text.

Closing tag: This is the same as the opening tag, except that it includes a forward slash before the element
name. This marks where the element ends.

Element: HTML Tag along with content is called an Element.

Note: In HTML, some elements are self-closing tags or void elements because they don't require a separate
closing tag. These elements are used for elements that don't contain any content or don't have a closing
counterpart.

Examples <img/>, <input/>, <br/>, and <meta/> etc.

Full Stack Web Development


Common Tags
Heading <h1>...<h6>

Headings are used to define the titles or subtitles of a web page or a section of content.

For Example, look into the below wiki page, how headings and subheadings appear in a web page.

To put Heading in HTML doc, we use <h1>, <h2>, <h3> …<h6> tags. From h1 to h6, represents different
levels of content.
Example:-

Full Stack Web Development


Browser Output:-

Paragraph <p>

Paragraph tag is used to represent a piece of text that forms a distinct block of content. In HTML, each
paragraph is put inside the <p> tag.

Example:-

Full Stack Web Development


Browser Output:-

Note: White spaces in HTML code are ignored by Browser

Div <div>

Div creates a container or a division within a web page that can be used to group other HTML elements,
such as text, images, forms, and other HTML tags, into a logical section or a block.

The <div> tag has no semantic meaning or function, but it allows developers to apply styles, scripts, or
other attributes to a group of elements as a unit.

Example:-

Full Stack Web Development


Note: There are other structuring tags too in HTML, introduced in HTML5. <nav>, <header>, <main>, <footer> etc.

Here is a list of tags that we will study in later modules,

Introduction to Attributes
HTML attributes are used to provide additional information or properties to HTML elements.

Attributes are added to an element's opening tag using the syntax attribute_name="attribute_value"
Attributes are used to modify the behaviour, appearance, or other properties of an element.

Here class is attribute_name and main is attribute_value.

Note 1: Multiple attributes must have space between them

Full Stack Web Development


Note 2: An attribute value should be wrapped with opening and closing quote marks (“”).

Common Tag Attributes


There are some attributes common in all HTML Tags

id: Used to specify a unique identifier for an element

class : Used to specify one or more classes for an element, which can be used for styling with
Internal or External CSS

style : Used to apply inline CSS styles to an element

Other tag attributes we will cover when we introduce the tag one by one in later modules.

Full Stack Web Development

You might also like