HTML Tags and Elements - eLibraryPortal

HTML (HyperText Markup Language) tags and elements form the backbone of a webpage’s structure and layout. HTML is used to structure content on the web, including text, images, links, and forms. Here’s a breakdown of HTML tags, elements, and some commonly used examples:

1. HTML Tags

Tags are keywords enclosed in angle brackets (< >). Tags often come in pairs, an opening tag (like <tag>) and a closing tag (like </tag>), although some tags are self-closing.
Examples:
- <p> ... </p>: Paragraph tag
- <h1> ... </h1>: Heading tag
- <img src="image.jpg" />: Image tag (self-closing)

2. HTML Elements

An HTML element consists of a start tag, content, and an end tag.
For example, in <p>Hello, World!</p>, <p> is the start tag, Hello, World! is the content, and </p> is the end tag.
Elements can also contain other elements, creating a nested structure.

Basic Structure of an HTML Document

Here’s the basic layout of an HTML document with commonly used tags:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>

  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <a href="https://rojgarbharat.info/">This is a link</a>

</body>
</html>

Common HTML Tags

Document Structure Tags
- <!DOCTYPE html>: Declares the document type as HTML5.
- <html>: Root element of an HTML page.
- <head>: Contains meta-information like the title and links to CSS.
- <title>: Sets the page title shown in the browser tab.
- <body>: Contains all the content to display on the webpage.
Text Formatting Tags
- <h1> to <h6>: Heading tags, <h1> is the largest, <h6> the smallest.
- <p>: Paragraph tag for blocks of text.
- <strong>: Bold text.
- <em>: Italic text.
- <br>: Line break (self-closing).
- <hr>: Horizontal line (self-closing).
Link and Image Tags
- <a href="URL">: Creates a hyperlink.
- <img src="URL" alt="description">: Embeds an image (self-closing).
List Tags
- <ul>: Unordered list.
- <ol>: Ordered list.
- <li>: List item (used inside <ul> or <ol>).
Table Tags
- <table>: Defines a table.
- <tr>: Table row.
- <td>: Table cell.
- <th>: Table header cell.
Form Tags
- <form>: Form container.
- <input>: Input field (self-closing).
- <label>: Label for input elements.
- <textarea>: Multi-line text input.
- <button>: Button for submitting forms.
Div and Span Tags
- <div>: Block-level container for grouping elements.
- <span>: Inline container for styling specific parts of text.

Nesting of Tags

HTML elements can be nested within each other, allowing complex layouts. For instance:

<div>
  <h2>My Blog Post</h2>
  <p>This is an interesting blog post.</p>
  <a href="https://rojgarbharat.info/">Read more</a>
</div>

HTML Attributes

Tags can have attributes that provide additional information:

Common attributes include id, class, src, href, alt, and style.
Example: <a href="https://rojgarbharat.info/" target="_blank">Visit Example</a>