Basic HTML notes
Basic HTML Notes
1. What is HTML?
- HTML (HyperText Markup Language) is the standard language used to create web pages.
- It uses a system of tags to structure content.
2. Basic Structure of an HTML Document
Every HTML document has a basic structure that includes the following elements:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
- `<!DOCTYPE html>`: Declares the document type and version of HTML.
- `<html>`: The root element of an HTML page.
- `<head>`: Contains meta-information about the document (like title, character set).
- `<body>`: Contains the content of the document (text, images, links, etc.).
3. Common HTML Elements
- Headings: Used to define headings. Ranges from `<h1>` (largest) to `<h6>` (smallest).
```html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
```
- Paragraph: Used to define a paragraph of text.
```html
<p>This is a paragraph.</p>
```
- Links: Used to create hyperlinks.
```html
<a href="https://www.example.com">Visit Example</a>
```
- Images: Used to embed images.
```html
<img src="image.jpg" alt="Description of image">
```
- Lists:
- Unordered List: A bulleted list.
```html
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
```
- Ordered List: A numbered list.
```html
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
```
- Divisions: Used to group content together.
```html
<div>
<h2>Section Title</h2>
<p>Some content here.</p>
</div>
```
- Spans: Used for inline grouping of content.
```html
<span style="color: red;">This text is red.</span>
```
4. Attributes
- Attributes provide additional information about HTML elements.
- Common attributes include `href`, `src`, `alt`, `id`, `class`, etc.
- Example of an anchor tag with attributes:
```html
<a href="https://www.example.com" target="_blank">Open Example in New Tab</a>
```
5. Comments
- Comments are not displayed in the browser and are used to leave notes in the code.
```html
<!-- This is a comment -->
```
Summary
- HTML is the backbone of web pages, providing structure and meaning to content.
- Understanding the basic elements and structure is essential for creating web pages.