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.
