HTML- Notes
by : Emmersive Learning
HTML (HyperText Markup Language), which is the standard language for creating webpages.
Here's a structured guide to help you learn HTML:
1. Introduction to HTML
HTML is used to create the structure of web pages. HTML elements are represented by tags.
2. Basic Structure of an HTML Document
Every HTML document has a basic structure that includes doctype declaration, html, head, and
body tags.
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>
<!-- Content goes here -->
</body>
</html>
—------------------
● <!DOCTYPE html>: Declares the document type and version of HTML.
● <html>: The root element of the HTML document.
● <head>: Contains meta-information about the document (like title, character set, styles,
etc.).
● <body>: Contains the content of the document.
3. HTML Elements and Tags
HTML elements are defined by tags. Tags usually come in pairs: an opening tag <tag> and a
closing tag </tag>.
4. Common HTML Tags
Headings: Define headings in the document.
html
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
Paragraphs: Define paragraphs in the document.
html
Copy code
<p>This is a paragraph.</p>
Links: Define hyperlinks.
html
Copy code
<a href="https://www.example.com">This is a link</a>
Images: Embed images.
html
Code :
<img src="image.jpg" alt="Description of the image">
●
● Lists: Define lists.
Unordered List:
Html
Code :
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
Ordered List:
html
Code:
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
Tables: Create tables.
html
Code:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
5. Attributes
Attributes provide additional information about HTML elements. They are always included in the
opening tag and come in name/value pairs.
Example:
html
Code :
<a href="https://www.example.com" target="_blank">Visit Example</a>
In this example, href and target are attributes of the <a> tag.
6. Forms
Forms are used to collect user input.
html
Code :
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Submit">
</form>
7. Semantic HTML
Semantic HTML introduces meaning to the web page rather than just presentation.
Examples of Semantic Elements:
html
Code :
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Website Footer</p>
</footer>
8. HTML5 New Elements
HTML5 introduced several new elements and attributes.
Examples of New Elements:
Code :
<section>
<h2>Section Title</h2>
<p>Section content goes here.</p>
</section>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
<aside>
<h2>Aside Title</h2>
<p>Aside content goes here.</p>
</aside>
<footer>
<p>Footer content goes here.</p>
</footer>
9. Best Practices
● Always use lowercase for HTML tags.
● Close all tags properly.
● Use semantic HTML for better accessibility and SEO.
● Validate your HTML code using the W3C validator.
10. Next Steps
● Practice writing HTML code by creating simple web pages.
● Explore CSS (Cascading Style Sheets) to style your HTML content.
● Learn JavaScript to add interactivity to your web pages.
