FUNDEMENTAL NOTES ON HTML
Here are some foundational notes on HTML to help you get started:
### 1. **What is HTML?**
- **HTML (Hypertext Markup Language)** is the standard language used to create and structure
web pages.
- It consists of a series of elements that are used to define different parts of a webpage, like
headings, paragraphs, images, links, lists, etc.
### 2. **Basic Structure of an HTML Document**
- Every HTML document follows a basic structure:
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph text here.</p>
</body>
</html>
```
- **`<!DOCTYPE html>`**: Declares the document type and version of HTML (HTML5 here).
- **`<html>`**: The root element, encompassing all content on the page.
- **`<head>`**: Contains meta-information like title, character set, and links to stylesheets.
- **`<title>`**: Sets the title shown on the browser tab.
- **`<body>`**: Holds all visible content, such as headings, paragraphs, images, etc.
### 3. **HTML Elements and Tags**
- **Tags**: HTML elements are represented by tags. Most tags have an opening (`<tag>`) and
closing tag (`</tag>`), with the content in between.
```html
<p>This is a paragraph.</p>
```
- **Self-Closing Tags**: Some tags don’t require a closing tag, such as `<img />` and `<br />`.
### 4. **Common HTML Tags**
- **Headings**: `<h1>` to `<h6>`, with `<h1>` being the most important and `<h6>` the least.
```html
<h1>Main Heading</h1>
<h2>Subheading</h2>
```
- **Paragraphs**: `<p>` for text blocks.
- **Links**: `<a href="URL">Link Text</a>` to create hyperlinks.
- **Images**: `<img src="URL" alt="Description">` to add images. `alt` provides a description for
accessibility.
- **Lists**:
- **Ordered List** (`<ol>`) for numbered items.
- **Unordered List** (`<ul>`) for bullet points.
- **List Items** (`<li>`) are used within `<ol>` or `<ul>`.
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
- **Divisions**: `<div>` to group elements and apply styles or layout.
- **Spans**: `<span>` to style inline text or small parts of a document.
### 5. **Attributes in HTML**
- Attributes provide additional information about elements and are placed inside the opening tag.
- Common attributes:
- **`id`**: Unique identifier for an element.
- **`class`**: Allows grouping of elements for styling with CSS.
- **`src`**: Source attribute, mainly used with images and media.
- **`href`**: Specifies the URL for a link.
- **`alt`**: Provides alternative text for images.
```html
<img src="image.jpg" alt="A description of the image" />
```
### 6. **Semantic HTML**
- Semantic HTML tags describe the purpose of the content, helping browsers and screen readers
understand it better.
- Examples of semantic elements:
- **`<header>`**: Contains introductory content or navigation links.
- **`<nav>`**: Defines a set of navigation links.
- **`<main>`**: Specifies the main content of the page.
- **`<section>`**: Groups related content.
- **`<article>`**: Represents independent content.
- **`<footer>`**: Contains footer content like contact information or links.
### 7. **Forms in HTML**
- Forms allow users to submit data to a server.
- **Form Elements**:
- `<form>`: The container for all form elements.
- `<input>`: Allows for various types of data input (text, password, email, checkbox).
- `<label>`: Associates labels with form controls, improving accessibility.
- `<textarea>`: For multi-line text input.
- `<button>`: Triggers form submission or other actions.
```html
<form action="submit_form.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<button type="submit">Submit</button>
</form>
```
### 8. **HTML Entities**
- HTML entities are used to represent reserved characters in HTML, such as:
- `<` for `<`
- `>` for `>`
- `&` for `&`
- `"` for `"`
- ` ` for a non-breaking space.
### 9. **Comments**
- Comments are used to leave notes within the code that won’t be rendered in the browser.
```html
<!-- This is a comment -->
```
### 10. **Best Practices for HTML**
- **Use Semantic Tags**: Makes your HTML more meaningful and improves accessibility.
- **Keep it Structured**: Nest elements properly and avoid deeply nested structures when
possible.
- **Use Alt Attributes for Images**: Essential for accessibility and SEO.
- **Validate Your HTML**: Use a validator to ensure your HTML is error-free and follows the HTML5
standard.
- **Accessibility Considerations**: Use attributes like `aria-label` and semantic tags to help assistive
technologies interpret your page.
### 11. **Resources for HTML Learning**
- **Mozilla Developer Network (MDN)**: Excellent reference and documentation.
- **W3Schools**: Offers basic tutorials and exercises.
- **HTML Validators**: Tools like [W3C Validator](https://validator.w3.org/) help ensure your code
meets standards.
These notes cover the fundamentals of HTML and set a strong foundation to start building web
pages.
