Complete HTML Notes
Master HyperText Markup Language with Paragraph Notes, Pure Source Codes & Live Rendered Outputs for Every Single Tag.
1. Heading Tags
Heading tags are used to define main headings and subheadings on a web page. HTML provides six levels of headings starting from <h1> up to <h6>.
The <h1> tag represents the most important and largest heading on the page, whereas <h6> represents the least important and smallest heading.
All heading tags are container tags requiring opening and closing tags. Web browsers automatically insert top and bottom margins (blank space) around every heading element.
Welcome in My Page
This page is dedicated to Class 8th
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
2. Paragraph Tag
The <p> tag is used to create and structure standard paragraphs of text on a web page.
It is a block-level container tag that always begins on a fresh new line. Web browsers automatically add an empty line before and after every paragraph block.
Multiple consecutive spaces and line breaks inside the code are collapsed into a single space by the browser when rendered.
Hello my dear friends, how are you in Computer Room?
Now we are starting HTML Coding.
HTML stands for HyperText Markup Language. It is used to create the structure of a web page.
3. Line Break Tag
The <br> tag inserts a single line break right at the position where it is placed in the text.
Unlike the paragraph tag, it does not create extra top or bottom margins. It simply shifts the upcoming content to the beginning of the next line.
It is an Empty Tag (Void Tag), which means it does not contain content and never uses a closing tag like </br>. It is ideal for poems, short addresses, and verses.
My name is Rahul.
I am a student.
I am learning HTML.
4. Horizontal Rule Tag
The <hr> tag draws a horizontal dividing line across the width of the webpage.
It is used as a visual thematic break between different sections, topics, or paragraphs to keep content neat and organized.
Just like <br>, it is an Empty Tag that does not require any closing tag.
This is the first section.
This is the second section.
5. Bold Tag
The <b> tag renders the enclosed text in bold font, making it appear darker and thicker than normal text.
It is purely a visual formatting tag and does not add semantic or special linguistic importance to the text.
It is an inline container tag that must always be properly closed with </b>.
This is Bold Text
6. Italic Tag
The <i> tag displays text in italic (slanted) font style.
It is typically used for technical terms, foreign expressions, book or movie titles, and creative writing phrases.
It is an inline container element that is closed with </i>.
This is Italic Text
7. Underline Tag
The <u> tag places a continuous straight underline under the enclosed words or sentences.
It is commonly used to draw attention to key points, definitions, or grammatical errors in study notes.
Because hyperlinks are also underlined by default, use <u> carefully to avoid confusing readers.
This is Underlined Text
8. Strong Tag
The <strong> tag indicates that the enclosed text has high semantic importance, seriousness, or urgency.
While standard browsers display strong text in bold font just like <b>, <strong> gives meaningful information to search engines and screen readers.
Screen-reading software reads out text inside <strong> tags with increased vocal emphasis.
This is Important Text
9. Emphasis Tag
The <em> tag is used to give stressed grammatical emphasis to a specific word or phrase inside a sentence.
Visually, web browsers render emphasized text in italic style. However, it carries true semantic meaning compared to the simple styling tag <i>.
It is an inline container tag and must always end with a closing </em> tag.
This text is emphasized.
10. Mark / Highlight Tag
The <mark> tag highlights the enclosed text with a bright yellow background color by default.
It works just like a physical fluorescent highlighter pen used in school notebooks to mark key phrases, exam answers, or search keywords.
It is an inline tag and must be closed using </mark>.
This is Highlighted Text.
11. Small Text Tag
The <small> tag renders the enclosed text one size smaller than the surrounding default text size.
It is widely used for secondary information such as copyright notices, disclaimers, terms and conditions, and fine print footnotes.
It is an inline container element closed with </small>.
Normal Text This is Small Text
12. Deleted Text Tag
The <del> tag indicates text that has been removed or deleted from a web document.
Browsers display deleted text with a horizontal line struck right through the center (strikethrough effect).
It is very popular on e-commerce shopping websites to showcase original product prices before a discount.
Old Price: ₹500
13. Inserted Text Tag
The <ins> tag indicates newly added or inserted text in an updated document.
Web browsers render inserted text with an underline to show that it replaces older content.
It is commonly used together with <del> to clearly display price cuts and document revisions.
New Price: ₹400
14. Superscript Tag
The <sup> tag shifts the enclosed text half a character height above the normal text baseline with a reduced font size.
It is essential for writing mathematical exponents like $X^2 + Y^2$ as well as ordinal indicators in dates like $1^{st}, 2^{nd}, 8^{th}$.
It is an inline container tag that must be properly closed with </sup>.
Example: X2 + Y2
15. Subscript Tag
The <sub> tag lowers the enclosed text half a character height below the standard baseline in a smaller size.
It is most frequently used for scientific and chemical formulas like $H_2O, CO_2, H_2SO_4$ and math logarithms like $\log_{10}$.
It is an inline container tag that must be ended with </sub>.
Example: H2O
16. Ordered List
An Ordered List created with the <ol> tag is used when the sequence or order of items is important.
Each list item inside the parent list is wrapped within a <li> (List Item) tag.
By default, web browsers automatically number the items using standard Arabic numerals (1, 2, 3, etc.).
Which class do you read?
- Class - 7
- Class - 8
- Class - 9
- Class - 10
17. Unordered List
An Unordered List created with the <ul> tag produces a bulleted list where item order does not matter.
Just like ordered lists, every item inside the list is defined using the <li> tag.
By default, browsers display solid black circular bullets (disc shape) next to each item.
My Favourite Subjects
- Computer
- Mathematics
- Science
- English
18. Description List
A Description List (<dl>) organizes terms alongside their corresponding definitions or explanations.
The <dt> tag defines the term/title, while the <dd> tag provides the indented description data.
This structure is perfect for glossaries, dictionaries, and key term summaries in school notes.
Computer Terms
- HTML
- HyperText Markup Language
- CSS
- Cascading Style Sheets
- WWW
- World Wide Web
19. Anchor / Link Tag
The <a> (Anchor) tag creates clickable hyperlinks connecting to other webpages, files, or external websites.
Its mandatory attribute is href (Hypertext Reference), which holds the destination target URL address.
Adding the optional attribute target="_blank" instructs the browser to open the link in a fresh new tab.
Visit Google:
Click Here to Visit Google20. Image Tag
The <img> tag is an empty void tag used to embed images and graphics directly into a webpage.
Key attributes include src (image file source/path), alt (alternative text shown if loading fails), and width / height to specify pixel dimensions.
Since it is an empty tag, it does not have a closing tag.
My Image
21. Division Tag
The <div> (division) tag is a generic block-level container element used to group together larger sections of HTML.
It occupies the full width of its parent element and always starts on a fresh new line.
It is primarily used as a styling and layout container with CSS to structure modern webpage designs.
About My School
My school is a beautiful place where I learn new things every day.
22. Span Tag
The <span> tag is a generic inline container used to style or manipulate a specific small portion of text within a line.
Unlike <div>, it does not force a new line and takes up only as much width as its content requires.
It is commonly paired with CSS to colorize or highlight individual words in a paragraph.
My favourite colour is Blue.
23. Table Tag
Tables organize structured data into an intuitive grid made of rows and columns.
The <table> tag encloses the entire table. The <tr> tag creates horizontal rows, <th> creates bold centered header cells, and <td> creates standard data cells.
Use the border attribute on the table tag to define visible outline borders around cells.
Student Details
| Name | Class | Roll No. |
|---|---|---|
| Rahul | 8 | 01 |
| Aman | 8 | 02 |
| Priya | 8 | 03 |
24. Form Tag
The <form> tag creates an interactive web form to collect user inputs and send them to a server.
The versatile <input> tag creates different input fields based on its type attribute (text, email, password, number, submit).
The placeholder attribute shows helpful sample hint text inside the field before the user begins typing.
Student Registration Form
25. Button Tag
The <button> tag creates a clickable push button control on a web page.
It can contain text, icons, or images inside its opening and closing tags.
It is commonly linked to JavaScript event listeners (like onclick) to execute interactive scripts or display alert popup messages.
26. Textarea Tag
The <textarea> tag allows users to enter multiple lines of text, unlike standard single-line text inputs.
It is ideal for collecting postal addresses, user feedback, reviews, and long descriptive messages.
You can set its initial visible height and width using the rows and cols attributes.
Write Your Message
27. Select / Dropdown Tag
The <select> tag creates a compact drop-down list menu for users to choose from.
Each individual choice option within the drop-down menu is defined using the <option> tag.
Adding the selected attribute to an option sets it as the default visible choice on page load.
Select Your Class
28. Checkbox Control
Checkboxes created with <input type="checkbox"> allow users to select multiple options simultaneously from a given list.
A user may check zero, one, or several boxes independently without affecting other options.
Use the checked attribute to make an option selected by default when the form loads.
Select Your Hobbies
29. Radio Button
Radio buttons created with <input type="radio"> permit users to choose only one option from a mutually exclusive group.
Crucial Rule: All radio button options belonging to the same group must share the exact same name attribute to link them together properly.
Selecting one radio option automatically deselects any previously selected radio option in the same group.
Select Your Gender
30. HTML Comment
HTML comments are completely ignored by the web browser and are never rendered on the visible web page.
They are used by coders to write explanatory notes, documentation, and reminders inside the source code.
Comment syntax starts with <!-- and concludes with -->.
Visible text on the webpage. (The comment written above remains invisible on the page.)
31. Marquee Tag
The <marquee> tag creates horizontally or vertically scrolling text banners across the screen.
It is traditionally taught in school curriculums for demonstrating moving announcement tickers.
In modern web development, smooth CSS animations are preferred over the obsolete marquee tag for better performance.
32. Center Tag
The <center> tag aligns text and contained elements horizontally in the middle of the webpage.
It is a container tag that centers everything wrapped inside it.
In modern web standards, CSS rules like text-align: center; are used instead of the center tag.
Welcome Students
33. Preformatted Text Tag
The <pre> tag displays preformatted text, preserving both extra white spaces and exact line breaks typed in the code.
Browsers render text inside <pre> using a fixed-width monospace font like Courier or Consolas.
It is perfect for displaying formatted poems, source code snippets, and ASCII art diagrams.
Name : Rahul Class : 8 Subject: Computer
34. Address Tag
The <address> tag is used to specify contact details for the author, creator, or organization of a web page.
Browsers automatically display the enclosed text in italic font and place line breaks before and after the block.
It can include email addresses, physical addresses, telephone numbers, and author names.
Class: 8th
School: My School
35. Final Summary & Practice
Container Tags require both an opening and a closing tag (for example: <html>, <h1>, <p>, <ol>, <table>).
Empty Tags (or Void Tags) do not take content and do not require closing tags (for example: <br>, <hr>, <img>, <input>).
File Extension: Always save your HTML files with the .html or .htm extension to open and view them inside any web browser.
Congratulations! 🚀
You have completed all 35 basic HTML tags and structure concepts for Class 8 Computer Studies.
Keep practising HTML coding daily in Notepad and testing it in your browser! 💻✨
No comments:
Post a Comment