Scribd
Upload
4 views10 pages

HTML NOTES SUMMARY

Uploaded by

22b61a6632
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
4 views10 pages

HTML NOTES SUMMARY

Uploaded by

22b61a6632
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/ 10

HTML NOTES SUMMARY

Certainly! Here is a comprehensive overview of HTML notes


covering key topics and concepts:

1. Introduction to HTML
 HTML (HyperText Markup Language) is the standard
language used for creating and designing web pages.
 HTML is used to structure the content on the web, such
as text, images, links, and more.
 HTML elements are the building blocks of HTML pages.
Basic HTML Document Structure:
<!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>Main Heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

2. HTML Elements
HTML elements are the fundamental building blocks of a
webpage. They consist of:
 Opening tag: <tag>
 Content: Text or other HTML elements.
 Closing tag: </tag>
Common HTML Tags:
 <h1> to <h6>: Headings with <h1> being the most
important and <h6> being the least.
 <p>: Defines a paragraph of text.
 <a>: Defines a hyperlink.
 <img>: Embeds an image (self-closing).
 <ul>, <ol>, <li>: List elements (unordered, ordered, list
item).
 <div>: Defines a division or section in the document.
 <span>: Used for grouping inline elements.

3. HTML Attributes
Attributes provide additional information about an HTML
element. They are always placed in the opening tag.
Common HTML Attributes:
 href: Defines the URL for a link.
 src: Specifies the source of an image or media file.
 alt: Provides an alternative text for images (used for
accessibility).
 id: Uniquely identifies an element.
 class: Assigns a class name to an element for styling.
Example:
<a href="https://www.example.com" target="_blank">Visit
Example</a>
<img src="image.jpg" alt="Description of image">

4. Text Formatting
HTML provides several elements to format text and create
more readable or meaningful content.
Text Tags:
 <strong>: Indicates strong emphasis (bold).
 <em>: Adds emphasis (italic).
 <b>: Bold text (less semantic than <strong>).
 <i>: Italic text (less semantic than <em>).
 <br>: Line break.
 <hr>: Horizontal rule (divider).

5. Lists in HTML
Lists help organize content. HTML supports two types of lists:
Unordered List (<ul>)
Used for unordered items (bullets).
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List (<ol>)
Used for ordered items (numbers).
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
Description List (<dl>)
Used to display terms and descriptions.
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>

6. HTML Links
Links allow users to navigate between pages or resources.
Creating Links with <a> Tag:
<a href="https://www.example.com">Visit Example
Website</a>
 href: The URL to which the link points.
 target="_blank": Opens the link in a new tab.

7. HTML Images
The <img> tag is used to embed images into a webpage.
Attributes of the <img> Tag:
 src: Specifies the image source (URL or file path).
 alt: Provides alternative text for accessibility.
 width and height: Define the size of the image.
Example:
<img src="image.jpg" alt="Description of image" width="300"
height="200">

8. HTML Tables
Tables are used for displaying data in rows and columns.
Basic Table Structure:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 4</td>
</tr>
</table>
 <table>: Defines the table.
 <tr>: Table row.
 <th>: Table header.
 <td>: Table data (cell).

9. Forms in HTML
Forms allow users to submit data to the server.
Basic Form Structure:
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>
 action: Specifies the URL to send the form data.
 method: Specifies the HTTP method (GET or POST).
Common Form Elements:
 <input>: Input fields (text, radio, checkbox, etc.).
 <textarea>: Multi-line text input.
 <select> and <option>: Drop-down menus.

10. HTML Audio and Video


You can embed audio and video files using the <audio> and
<video> elements.
Audio Example:
<audio controls>
<source src="audio.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Video Example:
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

11. HTML Iframes


An <iframe> is used to embed another HTML document
within the current document.
Example:
<iframe src="https://www.example.com" width="600"
height="400"></iframe>

12. HTML Semantics


Semantic HTML elements clearly describe their meaning in a
human- and machine-readable way.
Examples of Semantic Tags:
 <header>: Represents the header section of a webpage
or section.
 <nav>: Defines navigation links.
 <article>: Represents a self-contained content section.
 <section>: Represents a section of content.
 <footer>: Defines the footer of a page or section.
Example:
<header>
<h1>Website Header</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>

13. HTML Comments


HTML comments are used to add notes or explanations to
your code. Comments are not displayed in the browser.
Comment Syntax:
<!-- This is a comment -->

14. HTML Meta Tags


Meta tags provide metadata about the HTML document,
such as character set, description, and author.
Common Meta Tags:
 <meta charset="UTF-8">: Specifies the character
encoding.
 <meta name="description" content="Page
description">: Provides a page description.
 <meta name="viewport" content="width=device-
width, initial-scale=1.0">: Controls the layout on mobile
devices.

This is a brief overview of HTML with some key topics and


examples. If you need detailed explanations on any specific
section or additional topics, feel free to ask!

You might also like