Scribd
Upload
16 views5 pages

FUNDEMENTAL NOTES ON HTML

This document provides foundational notes on HTML, explaining its purpose as the standard language for creating web pages and outlining the basic structure of an HTML document. It covers essential elements, common tags, attributes, semantic HTML, forms, and best practices for coding. Additionally, it includes resources for further learning and emphasizes the importance of accessibility and validation.

Uploaded by

muorongolejoshua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views5 pages

FUNDEMENTAL NOTES ON HTML

This document provides foundational notes on HTML, explaining its purpose as the standard language for creating web pages and outlining the basic structure of an HTML document. It covers essential elements, common tags, attributes, semantic HTML, forms, and best practices for coding. Additionally, it includes resources for further learning and emphasizes the importance of accessibility and validation.

Uploaded by

muorongolejoshua
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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:

- `&lt;` for `<`

- `&gt;` for `>`

- `&amp;` for `&`

- `&quot;` for `"`

- `&nbsp;` 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.

You might also like