Scribd
Upload
7 views

HTML - Notes

Uploaded by

abdurezak.mohammed-ug
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

HTML - Notes

Uploaded by

abdurezak.mohammed-ug
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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.

You might also like