ICT: HTML Study Notes

Definition of HTML
- Stands for Hypertext Markup Language.
- Standard markup language for creating web pages.
Basic Structure of an HTML Document
- <!DOCTYPE html>: Declares the document as HTML5.
- <html>: Root element of the HTML page.
- <head>: Contains meta-information (title, links to stylesheets, etc.).
- <title>: Sets the title of the web page (displayed in the browser tab).
- <body>: Contains the content of the web page (text, images, links, etc.).
HTML Elements
- Elements are defined by tags, usually in pairs (opening and closing).
  - Example: <p> for paragraphs, <h1> to <h6> for headings.
- Self-closing tags: <br>, <img>, <hr>.
Common HTML Tags
- Headings: <h1> to <h6>
- Paragraphs: <p>
- Links: <a href="URL">Link Text</a>
- Images: <img src="URL" alt="description">
- Lists:
  - Unordered: <ul><li>Item</li></ul>
  - Ordered: <ol><li>Item</li></ol>
Attributes
- Provide additional information about elements.
  - Common attributes: id, class, style, src, href, alt.
  - Format: <element attribute="value">.
Nested Elements
- Elements can be contained within other elements.
  - Example: <div><p>Text in a paragraph</p></div>.
HTML Forms
- Used to collect user input.
- Basic structure:
  - <form action="URL" method="POST or GET">
  - Input types: <input type="text">, <input type="radio">, <input type="checkbox">, <textarea>, <select>.
Semantic HTML
- Using HTML tags that convey meaning about the content.
- Examples: <header>, <nav>, <article>, <footer>, <section>.
HTML5 Features
- New input types (date, color, range).
- Multimedia support: <audio> and <video> tags.
- Canvas element for graphics: <canvas>.
Best Practices
- Use semantic HTML for better accessibility and SEO.
- Keep HTML clean and well-structured.
- Validate HTML code to ensure compliance with standards.

Definition of HTML

Hypertext Markup Language (HTML) is the standard language for creating web pages.
HTML is the backbone of web content, structuring text, images, and links.

Basic Structure of an HTML Document

<!DOCTYPE html> indicates that the document is HTML5.
<html> is the root element encapsulating all other HTML elements.
<head> contains meta-information such as title and links to stylesheets.
<title> specifies the web page title, displayed in the browser tab.
<body> holds the visible content of the web page.

HTML Elements

HTML elements are denoted by tags, commonly existing in pairs (opening and closing).
Examples include:
- Paragraphs: <p>
- Headings: <h1> to <h6>
Self-closing tags don’t require a closing part, such as <br>, <img>, and <hr>.

Common HTML Tags

Headings: <h1> to <h6> categorize content hierarchy.
Paragraphs: <p> encases text blocks.
Links: Defined using <a href="URL">Link Text</a>.
Images: Insert images with <img src="image.jpg" alt="description">.
Lists:
- Unordered lists use <ul><li>Item</li></ul>.
- Ordered lists use <ol><li>Item</li></ol>.

Attributes

Attributes add specific information to elements.
Common attributes include:
- id (unique identifier)
- class (categorizes elements)
- style (applies CSS styles)
- src (source for images)
- href (destination for links)
- alt (alternative text for images).
Attribute format: <tagname attribute="value">.

Nested Elements

HTML elements can be nested within one another, enhancing the document structure.
Example: <p><strong>Text in a paragraph</strong></p> includes strong emphasis within a paragraph.

HTML Forms

Forms facilitate user input collection for various purposes.
Basic form structure includes:
- <form> tag to define the form.
- Input types such as <input type="text">, <input type="email">, <input type="password">, <input type="checkbox">, and <input type="submit">.

Semantic HTML

Semantic HTML utilizes tags that impart meaning about the content, enhancing readability and accessibility.
Important semantic elements include <header>, <footer>, <article>, <section>, and <nav>.

HTML5 Features

Introduces new input types (date, color, range) for enhanced usability.
Supports multimedia with <audio> and <video> tags for media integration.
The <canvas> element allows for dynamic graphics creation via scripting.

Best Practices

Implement semantic HTML to improve accessibility and search engine optimization (SEO).
Maintain clean, organized, and well-structured HTML code for better readability.
Validate HTML against standards to ensure compliance and error-free execution.