HTML Elements

An HTML element is a building block of an HTML document. It consists of a start tag, some content, and an optional end tag. Each element in HTML defines a piece of content or functionality on a web page, like text, images, links, forms, etc. Elements are represented by tags in the HTML code.

  • The Basic Structure of an HTML Element: is given below.

HTML Elements

<tagname>Content goes here</tagname>
  • Start Tag: <tagname> — This marks the beginning of the element.
  • Content: The information or content within the element.
  • End Tag: </tagname> — This marks the end of the element (for most elements).
  • Example: The most common example of an HTML element is shown below.
<p>This is a paragraph element.</p>

Here:

  • <p> is the start tag (paragraph element),
  • “This is a paragraph element.” is the content, and
  • </p> is the end tag.

Some HTML elements are self-closing, meaning they don’t require an end tag, such as <img>, <br>, <hr>, etc.

Heading Element: 

HTML, headings are used to define the structure and hierarchy of content on a web page. They help organize information and make it more readable for both users and search engines. The <h1> to <h6> tags represent six levels of headings, with <h1> being the most important and <h6> the least.

Syntax:

<h1>This is a top-level heading</h1>
<h2>This is a second-level heading</h2>
<h3>This is a third-level heading</h3>
<h4>This is a fourth-level heading</h4>
<h5>This is a fifth-level heading</h5>
<h6>This is a sixth-level heading</h6>

Explanation:

  • <h1>: This is the most important heading, usually reserved for the title of the page or main section. It typically appears once per page.
  • <h2> to <h6>: These are used for subheadings, with each level representing a smaller, less important section heading. They help organize content hierarchically.
  • Heading example in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Headings Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<h2>About Us</h2>
<p>This is some information about our company.</p>
<h3>Our History</h3>
<p>We have been in business for over 20 years...</p>
<h3>Our Mission</h3>
<p>We strive to make the world a better place...</p>
</body>
</html>

 

Paragraph Elements

In HTML, the <p> element is used to define a paragraph. It’s one of the most common elements used to structure text content on a webpage. The <p> tag automatically adds space before and after the content, which helps in separating paragraphs visually for better readability.

  • Syntax:
<p>This is a paragraph of text.</p>

Explanation:

  • <p>: The opening tag of the paragraph.
  • This is a paragraph of text.: The content of the paragraph.
  • </p>: The closing tag of the paragraph.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Paragraph Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is the first paragraph on my page. It introduces the content in a simple and clear way.</p>
<p>This is another paragraph. Each paragraph element can hold text, images, or even other HTML elements.</p>
</body>
</html>

Features of the <p> Element:

  • Text Formatting: Text within a <p> tag is displayed as a block of text, with automatic line breaks when the text reaches the edge of the container (e.g., the webpage’s width).
  • Separation: A space is automatically added above and below each paragraph, helping to distinguish one paragraph from another.
  • Nesting: You can’t nest block-level elements like <div> or another <p> inside a <p>. If you do, it will break the HTML structure. For example, the following is incorrect:

Styling  paragraph<p>:

You can apply styles to paragraphs using CSS (Cascading Style Sheets) to change their appearance, such as text alignment, font size, color, line spacing, etc.

Example of CSS styling:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Paragraph Example</title>
<style>
p {
font-size: 18px;
color: #333;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This paragraph has been styled with CSS. The text is larger, and the line spacing has been adjusted for better readability.</p>
</body>
</html>
Line Breaking:

In HTML, line breaks can be created using the <br> (break) tag. This tag is an empty or self-closing tag, meaning it doesn’t require an opening and closing pair. It inserts a line break wherever it’s placed in the text. Here’s an example:

<p>This is some text.</p>
<p>This is more text on a new line.</p>
<p>This is some text.<br>This is more text after a line break.</p>

Explanation:

  1. <p>tag: This tag creates a new paragraph, which typically separates text by some space.
  2. <br>tag: This tag forces a line break without adding extra space (like a new paragraph does).
  3. You can use the <br> tag for a line break but don’t want to start a new paragraph.

 

Horizontal Line

In HTML, you can create a horizontal line using the <hr> tag. This tag is self-closing, meaning it doesn’t require an opening and closing pair. It creates a horizontal line across the page or section where it’s placed.Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is some content before the horizontal line.</p>
<hr> <!-- Horizontal line -->
<p>This is some content after the horizontal line.</p>
</body>
</html>

Explanation:

  • The <hr> tag creates a horizontal line between the two paragraphs, visually separating them on the page.

Text Formatting

Text formatting in HTML allows you to style and modify the appearance of text on a webpage. Here are some common HTML tags for text formatting, along with an example:

  • In HTML the formatting tags are divided into two categories:
  • Physical tag: These tags are used to provide the visual appearance to the text.
  • logical tag: These tags are used to add some logical semantic value to the text.
Common HTML Text Formatting Tags:(Physical tag:)
  1. Bold Text:
    The <strong> or <b> tag represents important text, and by default, it makes the text bold.
  2. Italic Text:
    The <em> or <i> tag represents emphasized text, which is typically displayed in italics.
  3. Underlined Text:
    The <u> tag underlines text.
  4. Strikethrough Text:
    The <del> tag represents text that has been deleted or is no longer valid, usually shown with a strikethrough.
  5. Small Text:
    The <small> tag is used to display text in a smaller font size.
  6. Subscript Text:
    The <sub> tag displays text as subscript, which appears slightly below the normal text line.
  7. Superscript Text:
    The <sup> tag displays text as superscript, which appears slightly above the normal text line.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Formatting Example</title>
</head>
<body>
<h1>Text Formatting in HTML</h1>
<p><strong>This is bold text using <code>&lt;strong&gt;</code>.</strong></p>
<p><b>This is bold text using <code>&lt;b&gt;</code>.</b></p>
<p><em>This is italic text using <code>&lt;em&gt;</code>.</em></p>
<p><i>This is italic text using <code>&lt;i&gt;</code>.</i></p>
<p><u>This is underlined text using <code>&lt;u&gt;</code>.</u></p>

<p><del>This is strikethrough text using <code>&lt;del&gt;</code>.</del></p>
<p><small>This is smaller text using <code>&lt;small&gt;</code>.</small></p>
<p><sub>This is subscript text using <code>&lt;sub&gt;</code>.</sub></p>
<p><sup>This is superscript text using <code>&lt;sup&gt;</code>.</sup></p>
</body>
</html>

Logical tax:

In HTML, logical tags (also called semantic tags) convey meaning about the content they enclose, rather than just defining how they should look. They help browsers and search engines understand the structure and importance of the content.

Common Logical (Semantic) Tags in HTML:
TagDescription
<strong>Indicates strong importance (typically displayed as bold)
<em>Indicates emphasis (typically displayed as italic)
<abbr>Defines an abbreviation (e.g., “HTML”)
<address>Contains contact information for the author
<blockquote>Represents a block of quoted text
<cite>Defines the title of a work (e.g., book, movie)
<code>Displays computer code in monospace font
<del>Represents deleted text (strikethrough)
<ins>Represents inserted text (underlined)
<kbd>Indicates keyboard input (e.g., Ctrl+C)
<mark>Highlights marked/important text
<q>Defines short inline quotation
<samp>Represents sample output from a program
<time>Defines a date/time
<var>Represents a variable in programming/math

Example :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logical Tags Example</title>
</head>
<body>
<p><strong>Warning:</strong> This is important!</p>
<p><em>Italicized for emphasis.</em></p>
<p><abbr title="HyperText Markup Language">HTML</abbr> is fun!</p>
<address>Contact: example@email.com</address>
<blockquote>This is a long quotation.</blockquote>
<p><cite>The Great Gatsby</cite> by F. Scott Fitzgerald</p>
<p><code>console.log("Hello, World!");</code></p>
<p><del>Old Price: $100</del> <ins>New Price: $80</ins></p>
<p>Press <kbd>Ctrl + S</kbd> to save.</p>
<p>Search results: <mark>HTML logical tags</mark></p>
<p>He said, <q>This is a short quote.</q></p>
<p>Error: <samp>File not found</samp></p>
<p>Today is <time datetime="2023-10-05">October 5, 2023</time></p>
<p>Let <var>x</var> = 10;</p>
</body>
</html>

OUTPUT :

logical tag in html

HTML List:

HTML provides different types of lists to organize content in a structured way. The main types are:

  1. Ordered List (<ol>) – Numbered list
  2. Unordered List (<ul>) – Bullet-point list
  3. Nested list(List within list)
  4. Description List (<dl>) – Name-value pairs (like a dictionary)
1. Ordered List (<ol>)

An ordered list in HTML is used when the order of the items matters. The list items are displayed with numbers, letters, or other ordered markers.

Example of an Ordered List (Numbered List):

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Result / output:

  1. First item
  2. Second item
  3. Third item

2.Unordered List (Bulleted List)

An unordered list displays a list of items with bullets (dots) in front of each item. It is created using the <ul> tag and each item within the list is wrapped in the <li> tag.

Example:

<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>

Result:

  • Apples
  • Oranges
  • Bananas

3. Nested List (List Within a List)

A nested list is a list inside another list. You can create a nested unordered or ordered list by placing another <ul> or <ol> inside an <li> tag.

Example:

<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Spinach</li>
</ul>
</li>
</ul>

Result:

  • Fruits

    • Apples

    • Oranges

  • Vegetables

    • Carrots

    • Spinach

4. Description list

A description list in HTML is used to display a list of terms with corresponding descriptions. It is different from ordered and unordered lists because instead of numbers or bullets, it associates a term with a description.

How to create a description list in HTML:

To create a description list, you use the <dl> tag (definition list), with the following nested elements:

  • <dt>: Defines a term (description term).
  • <dd>: Provides the description for the term.

Example of a Description List:

<dl>
<dt>HTML</dt>
<dd>HTML stands for HyperText Markup Language. It is used to create web pages.</dd>

<dt>CSS</dt>
<dd>CSS stands for Cascading Style Sheets. It is used to style and layout web pages.</dd>

<dt>JavaScript</dt>
<dd>JavaScript is a programming language used to create interactive effects within web browsers.</dd>
</dl>

Result:

  • HTML
    HTML stands for HyperText Markup Language. It is used to create web pages.
  • CSS
    CSS stands for Cascading Style Sheets. It is used to style and layout web pages.
  • JavaScript
    JavaScript is a programming language used to create interactive effects within web browsers.

HTML Table:

In HTML, a table is used to display data in a structured way using rows and columns. You can create a table by using the <table> tag, and within it, you use various other tags to define the structure.

Basic Structure of a Table:

  • <table>: Defines the table.
  • <tr>: Defines a table row.
  • <th>: Defines a table header (the top row, typically bold and centered).
  • <td>: Defines a table cell (contains the data).

Example of a Simple Table:

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Sam</td>
<td>22</td>
<td>Tokyo</td>
</tr>
</table>

Result:

NameAgeCity
John25Kathamandu
Jane30Birgunj
Sam22Janakpur

In this example:

  • <table> is used to create the table.
  • <tr> defines the rows of the table.
  • <th> is used for the header row, where you define column names (in this case, “Name,” “Age,” and “City”).
  • <td> defines each data cell.
Post Views: 187
Scroll to Top