0% found this document useful (0 votes)
7 views3 pages

Essential HTML Class Notes Guide

This document provides a comprehensive overview of HTML structure and elements, including the declaration, root, head section, and body. It details various tags for headings, paragraphs, links, images, lists, tables, and forms, as well as the use of comments. Each section highlights the purpose and usage of specific HTML components for web development.

Uploaded by

harshita.jadaun
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)
7 views3 pages

Essential HTML Class Notes Guide

This document provides a comprehensive overview of HTML structure and elements, including the declaration, root, head section, and body. It details various tags for headings, paragraphs, links, images, lists, tables, and forms, as well as the use of comments. Each section highlights the purpose and usage of specific HTML components for web development.

Uploaded by

harshita.jadaun
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

HTML Class Notes

1. <!DOCTYPE html>

- Declares the document type and version of HTML.

- Required at the top to ensure correct rendering in browsers.

2. <html lang="en">

- Root of the HTML document.

- "lang" attribute defines the language (en = English).

3. <head> Section

- Contains metadata not visible to users.

3.1 <meta charset="UTF-8">

- Character encoding for full symbol support.

3.2 <meta name="viewport" content="width=device-width, initial-scale=1.0">

- Ensures responsiveness on all devices.

3.3 <title>HELLO</title>

- Sets the title of the browser tab.

4. <body>

- All visible content is placed here.

5. Headings & Paragraphs

- <h1> to <h6>: Headings (from most to least important).


- <p>: Paragraphs for text content.

6. Anchor Tags

- <a href="...">: Creates hyperlinks to external or internal sources.

7. Line and Horizontal Breaks

- <br>: Inserts a line break.

- <hr>: Inserts a horizontal line.

8. Images

- <img src="..." alt="...">: Embeds images.

- Base64: Inline image data.

- External: Image from a URL.

9. Subscript and Superscript

- <sub>: Subscript (e.g., H2O)

- <sup>: Superscript (e.g., A2)

10. Lists

- <ul>: Unordered (bulleted) list.

- <ol>: Ordered (numbered) list.

- <li>: List item. Supports nested lists.

11. Tables

- <table>: Defines a table.

- <caption>: Title of the table.

- <tr>: Table row.


- <th>: Table header.

- <td>: Table data cell.

12. Forms

- <form action="...">: Sends data to the server.

- <input type="text" placeholder="...">: Text field with placeholder.

13. Comments

- <!-- comment -->: Used to annotate or disable code.

Common questions

Powered by AI

In HTML, <table> serves as the container for tabular data. Within it, <tr> elements define rows, with each row containing one or more <th> or <td> elements. <th> elements specify header cells, typically presented in bold or centered, conveying the category for data within their columns, while <td> elements contain the actual data cells. Together, these elements organize data into a structured and visually coherent table format, enhancing readability and data organization .

The "<head>" section in an HTML document serves to provide metadata about the webpage that is not displayed directly to users but is crucial for proper webpage rendering and search engine indexing. The key elements include "<meta charset=\"UTF-8\">," which ensures the correct display of characters by setting the character encoding; "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">," ensuring the page is responsive and displays correctly on different device sizes; and "<title>," which sets the title of the browser tab, aiding in user navigation and search engine optimization .

The "<br>" element in HTML is used to insert a line break within text, essentially starting a new line without initiating a new block of content, making it useful for poems or addresses where line breaks are meaningful. On the other hand, the "<hr>" element inserts a thematic horizontal line, often used to visually separate content chunks or to denote a shift in thought or topic. Unlike "<br>," which only affects line positioning, "<hr>" provides a visual division line across the page .

The "lang" attribute in the "<html>" tag specifies the language of the web content, which is critical for accessibility and SEO. It ensures that screen readers and assistive technologies can interpret the content in the intended language, providing better user experience for individuals relying on these tools. Additionally, it aids search engines in correctly indexing content, affecting search rankings and ensuring the page reaches the appropriate audience in the search results .

The "charset" attribute in <meta charset="UTF-8"> specifies the character encoding for a webpage, allowing it to correctly display special characters, symbols, and multilingual text. UTF-8 supports a vast array of characters from various languages. If omitted, browsers might revert to a default encoding that could mishandle character rendering, resulting in broken text, symbols, or incorrect display of international content, affecting user comprehension and accessibility .

The "<DOCTYPE html>" declaration is essential as it informs the browser about the version of HTML used in the document, ensuring that the page is rendered according to the correct standards, which minimizes cross-browser discrepancies. This declaration triggers 'standards mode,' helping browsers render content consistently and accurately. Without it, browsers might enter 'quirks mode,' potentially causing erratic rendering and layout issues .

In HTML, <ul>, <ol>, and <li> tags organize content into lists. The <ul> tag creates unordered (bulleted) lists useful for items where sequence does not matter, while <ol> generates ordered (numbered) lists for content requiring a specific order. <li> contains each list item within either list type. The choice between ordered and unordered lists impacts user comprehension, as it conveys whether the sequence is critical or the list is purely for grouping related items .

The <form action="..."> element in HTML provides the functionality to gather user input and send it to a server for processing. It serves as a container for input fields (e.g., text fields, checkboxes) and determines the destination for the submitted data via the "action" attribute. By enabling data collection and server interaction, forms significantly enhance website interactivity, allowing for functionalities like user registrations, login systems, and data submissions .

The <title> tag in the <head> section is pivotal for both SEO and user experience. It defines the webpage title that appears on browser tabs, bookmarks, and search engine results, directly influencing click-through rates. A relevant and compelling title enhances visibility and accessibility, helping search engines index and rank the page appropriately, while also aiding users in quickly identifying page content .

Using "<img src="..." alt="..."> contributes significantly to web accessibility. The "alt" attribute provides alternative text for images, crucial for users with visual impairments who rely on screen readers. The "alt" text conveys the image content or function, ensuring those unable to see the image still understand its context or purpose, thereby enhancing the website's inclusivity and usability .

You might also like