HTML Basics
HTML (HyperText Markup Language) is the standard language for creating webpages. It
structures web content and uses various tags to define elements like headings, paragraphs, links,
images, and more.
1. Basic Structure of an HTML Document
Every HTML document has a similar basic structure. Here's a simple example:
html
Copy code
<!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 of text.</p>
</body>
</html>
Explanation:
<!DOCTYPE html>: Declares the document type as HTML5.
<html>: The root element of an HTML page.
<head>: Contains meta information about the HTML document (like the title and
character set).
<body>: Contains the visible content of the page.
<h1>: A heading tag. You can use <h1> to <h6> for headings.
<p>: Defines a paragraph.
2. Common HTML Tags
Headings
HTML offers six levels of headings, from <h1> (most important) to <h6> (least important).
html
Copy code
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Sub-sub Heading</h3>
Paragraphs
html
Copy code
<p>This is a paragraph.</p>
Links
html
Copy code
<a href="https://www.example.com">This is a link</a>
The href attribute specifies the destination URL.
Images
html
Copy code
<img src="image.jpg" alt="Description of the image">
src: Source file for the image.
alt: Text displayed if the image is not found.
Lists
Ordered List (numbered):
html
Copy code
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List (bulleted):
html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Tables
html
Copy code
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<table>: Defines the table.
<tr>: Defines a row.
<th>: Defines a header cell.
<td>: Defines a data cell.
3. HTML Attributes
HTML tags can have attributes that provide additional information about elements. They are
always included in the opening tag.
Example:
html
Copy code
<a href="https://www.example.com" target="_blank">Visit Example</a>
href: Specifies the link destination.
target="_blank": Opens the link in a new tab.
4. Semantic HTML
Semantic HTML introduces tags that clearly describe their purpose in the webpage.
Examples:
<header>: Defines a header for a document or section.
<nav>: Defines a navigation menu.
<article>: Defines independent content.
<footer>: Defines a footer for a document or section.
Using semantic HTML helps with search engine optimization (SEO) and accessibility.
5. Forms
HTML forms are used to collect user input. They contain elements like text fields, radio buttons,
checkboxes, etc.
html
Copy code
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
action: Specifies the URL to send the form data to.
method: Defines the HTTP method to use (GET or POST).
6. Multimedia (Audio & Video)
You can embed multimedia like audio and video in HTML.
Audio:
html
Copy code
<audio controls>
<source src="audiofile.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Video:
html
Copy code
<video controls>
<source src="videofile.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
7. Comments
You can add comments in HTML that are ignored by the browser. They are helpful for
organizing and explaining the code.
html
Copy code
<!-- This is a comment -->
8. HTML Entities
HTML entities are used to display reserved characters or symbols that otherwise have special
meaning in HTML.
Examples:
< = <
> = >
& = &
9. Block vs Inline Elements
Block-level elements: Take up the full width available and start on a new line (e.g.,
<div>, <p>, <h1>, <section>).
Inline elements: Take up only as much width as necessary and do not start on a new line
(e.g., <span>, <a>, <img>).
10. Linking CSS and JavaScript
Linking CSS:
html
Copy code
<link rel="stylesheet" href="styles.css">
Linking JavaScript:
html
Copy code
<script src="script.js"></script>
These notes provide a solid foundation for understanding the basics of HTML. You can build
more complex and interactive web pages by combining these concepts with CSS and JavaScript!
