Scribd
Upload
5 views

HTML Basics

The document defines and explains HTML elements and tags. It provides examples of common tags like <html>, <head>, <body>, headings, paragraphs, links, images, lists, tables, forms, and more. It also covers the difference between block, inline and inline-block display properties.

Uploaded by

mhashimzaffar1995
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

HTML Basics

The document defines and explains HTML elements and tags. It provides examples of common tags like <html>, <head>, <body>, headings, paragraphs, links, images, lists, tables, forms, and more. It also covers the difference between block, inline and inline-block display properties.

Uploaded by

mhashimzaffar1995
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Table of contents

1. <html>_____________________________________________________________2
2. <head>____________________________________________________________ 2
3. <title>_____________________________________________________________ 2
4. <body>____________________________________________________________ 2
5. <h1> to <h6>________________________________________________________3
6. <p>_______________________________________________________________ 3
7. <a>_______________________________________________________________ 3
8. <img>_____________________________________________________________ 3
9. <ul>______________________________________________________________ 3
10. <ol>______________________________________________________________4
11. <li>_______________________________________________________________4
12. <div>_____________________________________________________________ 4
13. <span>___________________________________________________________ 4
14. <table>___________________________________________________________ 4
15. <tr>______________________________________________________________ 5
16. <th>_____________________________________________________________ 5
18. <form>___________________________________________________________ 5
19. <input>___________________________________________________________ 6
20. <textarea>________________________________________________________ 6
21. <select>__________________________________________________________ 6
22. <option>__________________________________________________________6
23. <button>_________________________________________________________ 6
24. <label>___________________________________________________________ 7
25. <iframe>__________________________________________________________ 7
26. <meta>___________________________________________________________ 7
27. <style>___________________________________________________________ 7
28. <script>__________________________________________________________ 7
29. <link>____________________________________________________________ 8
1. <html>
Defines the root of an HTML document.

Example: The whole structure of a webpage is wrapped in <html> tags.


HTML

example:
<html>
<head>
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Website</h1>
</body>
</html>

2. <head>
Contains meta-information about the document, such as its title and links to stylesheets.

Example: Setting the title of the webpage.


html

example:
<head>
<title>My Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>

3. <title>
Defines the title of the document, shown in the browser's title bar or tab.

Example: Naming the webpage.


html
Copy code
<title>My Webpage</title>

4. <body>
Contains the content of the HTML document, such as text, images, and links.

Example: The main content of a webpage.


html
Copy code
<body>
<h1>Welcome to My Website</h1>
<p>This is my homepage.</p>
</body>

5. <h1> to <h6>
Define HTML headings, with <h1> being the highest (or most important) level and <h6>
the least.

Example: Using headings to structure content.


html
Copy code
<h1>Main Heading</h1>
<h2>Subheading</h2>

6. <p>
Defines a paragraph of text.

Example: Creating a paragraph.


html
Copy code
<p>This is a paragraph of text.</p>

7. <a>
Defines a hyperlink, which links to another document or resource.

Example: Creating a clickable link.


html
Copy code
<a href="https://www.example.com">Visit Example</a>

8. <img>
Embeds an image on the webpage.

Example: Displaying an image.


html
Copy code
<img src="image.jpg" alt="A description of the image">
9. <ul>
Defines an unordered (bulleted) list.

Example: A list of items.


html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

10. <ol>
Defines an ordered (numbered) list.

Example: A numbered list of steps.


html
Copy code
<ol>
<li>First step</li>
<li>Second step</li>
</ol>

11. <li>
Defines a list item.

Example: An item within a list.


html
Copy code
<ul>
<li>First item</li>
<li>Second item</li>
</ul>

12. <div>
Defines a division or a section in an HTML document, often used as a container for other
elements.

Example: Grouping content together.


html
Copy code
<div>
<h1>Header</h1>
<p>Some text.</p>
</div>

13. <span>re
Used to group inline elements in a document.

Example: Styling a part of the text.


html
Copy code
<p>This is <span style="color:red">important</span> text.</p>

14. <table>
Defines a table.

Example: Creating a table.


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>

15. <tr>
Defines a row in a table.

Example: A row with two cells.


html
Copy code
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
16. <th>
Defines a header cell in a table.

Example: A header cell in a table row.


html
Copy code
<th>Header</th>
17. <td>
Defines a standard cell in a table.

Example: A cell containing data.


html
Copy code
<td>Data</td>

18. <form>
Defines an HTML form for user input.

Example: A form for submitting data.

<form action="/submit"> <!-- The form element that will send user input data to the
server at the "/submit" URL when submitted -->
<label for="name">Name:</label> <!-- A label for the text input field, associating the
text "Name:" with the input field with id="name" -->
<input type="text" id="name" name="name"> <!-- A text input field where users can
enter their names. The id is "name" for referencing and the name is "name" for form data
submission -->
<input type="submit" value="Submit"> <!-- A submit button that, when clicked,
submits the form data to the server -->
</form> <!-- Closing the form element -->

19. <input>
Defines an input control.

Example: A text input field.


html
Copy code
<input type="text" id="name" name="name">

20. <textarea>
Defines a multi-line text input control.
Example: A large text input area.
html
Copy code
<textarea id="message" name="message"></textarea>

21. <select>
Defines a drop-down list.

Example: A selection menu.


html
Copy code
<select name="choices" id="choices">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>

22. <option>
Defines an option in a drop-down list.

Example: An option in a select menu.


html
Copy code
<option value="option1">Option 1</option>

23. <button>
Defines a clickable button.

Example: A button to submit a form.


html
Copy code
<button type="submit">Submit</button>

24. <label>
Defines a label for an input element.

Example: Labeling a text input.


html
Copy code
<label for="name">Name:</label>
25. <iframe>
Defines an inline frame that embeds another document within the current HTML
document.

Example: Embedding a Google Map.


html
Copy code
<iframe src="https://www.google.com/maps/embed?..."></iframe>

26. <meta>
Provides metadata about the HTML document, such as character set, author, and
viewport settings.

Example: Setting the character set.


html
Copy code
<meta charset="UTF-8">

27. <style>
Defines style information for the document.

Example: Adding internal CSS.


html
Copy code
<style>
body {
font-family: Arial, sans-serif;
}
</style>

28. <script>
Defines client-side JavaScript.

Example: Adding a script to alert a message.


html
Copy code
<script>
alert('Hello, world!');
</script>
29. <link>
Defines the relationship between the current document and an external resource,
typically used to link to stylesheets.

Example: Linking an external CSS file.


html
Copy code
<link rel="stylesheet" href="styles.css">

Important concept (difference between block, inline, inline-block) display properties:

1. Block display:
● Height and width can be defined to block display items.
● Always start with a new line.
● There will always be one block element in one line.

2. Inline display:
● Users cannot define the Height and width of inline display items.
● inline display items can come after others in the same line.

3. Inline-block display:
● Height and width can be defined to Inline-block display items.
● Inline-block display items can come after others in the same line.

You might also like