HTML (HyperText Markup Language) is the standard language used to create and structure web
pages. It uses predefined tags and elements to tell browsers how to display content.
1. HTML Elements, Tags, and Attributes
Elements vs Tags
- An HTML element = start tag + content + end tag. Example: <p>Hello</p>
- Tags are keywords wrapped in angle brackets < >. Every opening tag <tag> should have a
closing tag </tag>.
Types of Tags
- Paired tags: have both opening and closing. Example: <p>...</p>, <h1>...</h1>
- Self-closing (empty) tags: no closing tag needed. Example: <br/>, <hr/>, <img/>
Tag Categories by Utility
- Formatting Tags: affect text appearance. Example: <b>, <font>, <table>
- Structure Tags: build the page skeleton. Example: <html>, <head>, <body>, <title>
- Control Tags: manage interaction and scripts. Example: <form>, <input>, radio buttons,
checkboxes
Inline vs Block Elements
- Inline elements: do not start a new line, take only needed space. Example: <span>, <b>, <a>
- Block elements: start on a new line, take full width. Example: <p>, <h1>, <div>
HTML Comments
- Single-line: <!-- comment -->
- Multi-line: span multiple lines between <!-- and -->
- Comments are ignored by the browser and not displayed.
HTML Attributes
Attributes go inside the opening tag as name="value" pairs. They modify behavior or provide extra
info.
- Common global attributes: class, id, style, lang, dir, hidden, title, tabindex, translate,
spellcheck
- Syntax: <tagname attribute="value">content</tagname>
- Attribute names and values are case-sensitive; W3C recommends lowercase.
- Multiple attributes in one tag are separated by spaces.
Key Body Tag Attributes
- bgcolor: sets background color (color name, hex like #FFFF00, or rgb)
- text: sets body text color
- background: sets a background image
- leftmargin / topmargin: set left and top margins
- alink, link, vlink: set colors for active, unvisited, and visited links
2. HTML Formatting Tags
Paragraphs and Line Breaks
- <p>...</p> defines a paragraph. Always starts on a new line.
- <br/> creates a line break without starting a new paragraph.
1
- <hr/> creates a horizontal rule (thematic break).
- adds a non-breaking space inside a paragraph.
Headings
- Six levels: <h1> (largest/most important) to <h6> (smallest/least important).
- Displayed bold by default. Use headings only for actual headings, not for styling.
- Key attributes: align (left/center/right), style, id, class, title
Text Formatting Tags
- <b> bold, <strong> important (bold), <i> italic, <em> emphasized (italic)
- <u> underline, <mark> highlight, <small> smaller text
- <del> strikethrough (deleted), <ins> inserted text
- <sub> subscript (e.g., H2O), <sup> superscript (e.g., x3)
Font Tag
- <font size="" color="" face=""> sets font size, color, and typeface.
- Note: <font> is deprecated in HTML5. Use CSS instead for modern pages.
Nested Elements
- Elements can be placed inside other elements (nesting).
- Inner element = child; outer element = parent.
- Always close nested tags in reverse order: <b><i>text</i></b> is correct; <b><i>text</b></i> is
wrong.
Image Tag
- Syntax: <img src="filename" alt="description">
- src: specifies the image file path or URL
- alt: alternate text shown when image can't load
- width / height: set image dimensions in pixels or percentage
- align: positions image relative to text (left, right, top, middle, bottom)
- Supported formats: JPEG, PNG, GIF, SVG
Marquee Tag
- <marquee> creates scrolling text or images on a page.
- direction: left, right, up, down
- bgcolor: background color of the marquee
- loop: how many times content scrolls (default: infinite)
3. HTML Links
Links connect web pages and resources. Created with the anchor tag <a>.
Anchor Tag
- Syntax: <a href="URL">link text</a>
- href: the URL or file the link points to
- target: where to open the linked document
o _self: same window (default)
o _blank: new window/tab
o _parent: parent frame
o _top: full browser window
2
Types of Links
- Text links: wrap text in <a> tags
- Image links: wrap <img> tag inside <a> tag
- Email links: <a href="[Link]
- Relative links: link to pages in the same folder/site
- Absolute links: full URL including http://
4. HTML Lists
Ordered List (Numbered)
- Tag: <ol>...</ol> with items in <li>...</li>
- type attribute: 1 (default), A, a, I, i for different numbering styles
- start attribute: specifies the starting number
- reversed attribute: counts down instead of up
Unordered List (Bulleted)
- Tag: <ul>...</ul> with items in <li>...</li>
- type attribute: disc (default filled circle), circle (hollow), square, none
Definition List
- Tag: <dl>...</dl> — no bullets or numbers
- <dt> defines the term; <dd> gives the definition/description
Nested List
- A list inside another list. Can mix ordered and unordered lists.
5. HTML Tables
Tables organize data in rows and columns.
Core Table Tags
- <table> defines the table
- <tr> defines a table row
- <th> defines a header cell (bold and centered by default)
- <td> defines a data cell
- <caption> adds a title above the table
- <thead>, <tbody>, <tfoot> group header, body, and footer rows
Table Attributes
- border: adds borders around cells (e.g., border="1")
- cellpadding: space between cell content and its border
- cellspacing: space between cells
- width / height: set table dimensions
- align: left, center, or right alignment of the table
- bgcolor: background color of the table
Merging Cells
- colspan: merge cells across multiple columns (horizontal merge)
- rowspan: merge cells across multiple rows (vertical merge)
3
6. HTML Frames
Frames divide the browser window into sections, each loading a separate HTML page. Frames are
deprecated in HTML5 and should not be used in modern web development.
Key Frame Tags
- <frameset> replaces <body> and defines how the window is split
- <frame> defines each individual section
- <noframes> provides fallback for browsers that don't support frames
- cols attribute: splits window into columns (e.g., cols="50%,50%")
- rows attribute: splits window into rows
Frame Attributes
- src: URL of the page to display in the frame
- name: name used for targeting links
- frameborder: 1 = show border, 0 = hide border
- scrolling: yes, no, or auto
- noresize: prevents users from resizing the frame
Drawbacks of Frames
- Poor display on small/mobile devices
- Inconsistent layout across screens
- Back button may not work as expected
- SEO issues — search engines struggle to index framed content
- Accessibility issues for screen readers
Modern Alternative: iframe
- <iframe> (inline frame) is still supported and used today to embed external content within a
page.
- Syntax: <iframe src="URL" width="400" height="200"></iframe>
7. HTML Forms
Forms collect user input and send it to a server.
Form Tag and Key Attributes
- Syntax: <form action="url" method="get/post">...</form>
- action: URL where form data is sent
- method: GET (data visible in URL) or POST (data hidden, more secure)
- enctype: encoding type, important for file uploads
- target: where to display the response (_self, _blank, etc.)
- autocomplete: on/off for browser autofill
GET vs POST
- GET: data appended to URL, visible, cached, limited to ~2048 characters. Good for retrieving
data.
- POST: data in request body, not visible in URL, more secure, no size limit. Good for sensitive
or large data.
Common Form Input Types
4
- text: single-line text field
- password: masked text field (shows dots or asterisks)
- radio: select one option from a group (all must share the same name)
- checkbox: select one or more options independently
- file: browse and upload a file
- submit: sends form data to server
- reset: resets all fields to default values
- email, number, date, time, week, month: specialized input types with built-in validation
Key Input Attributes
- name: identifies the field when data is submitted
- value: default value of the field
- placeholder: hint text shown inside empty field
- required: field must be filled before submission
- maxlength / minlength: character limits
- checked: pre-selects a radio button or checkbox by default
- disabled: makes the field uneditable and unsubmittable
- readonly: user can see but not change the value
- min / max: range limits for number/date inputs
- pattern: regex pattern the input must match
Other Form Elements
- <label> links a text label to an input (use the for attribute matching the input's id)
- <select> + <option> creates a dropdown list
- <optgroup> groups options inside a dropdown with a label
- <textarea> multi-line text input (rows and cols attributes set size)
- <fieldset> groups related fields with a border
- <legend> gives a title to a fieldset
- <button> creates a clickable button (type: submit, reset, or button)
Form Validation
- HTML built-in: required, pattern, min, max, minlength, maxlength, type
- Full data validation (checking if data is correct) requires JavaScript.
- Server-side validation: done by the server after submission
- Client-side validation: done by the browser before submission
8. HTML Multimedia
Image
- Tag: <img src="[Link]" alt="description" width="300" height="200">
- Formats: .jpg, .jpeg, .png, .gif, .svg
Audio
- Tag: <audio src="file.mp3" controls></audio>
- controls attribute adds play/pause/volume buttons
- Formats: .mp3, .ogg, .wav
Video
5
- Tag: <video src="file.mp4" controls width="400" height="300"></video>
- Formats: .mp4, .webm, .ogg
Multiple Sources
- Use <source> inside <audio> or <video> for browser compatibility:
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
</video>
- Different browsers support different formats. Providing multiple ensures compatibility.
Fallback Content
- Text inside <audio> or <video> tags is shown if the browser doesn't support the element.
- Can also include a download link as fallback.
Embedding External Content
- <iframe> embeds another webpage or YouTube video:
- Example: <iframe src="[Link] width="560" height="315"></iframe>
- <object> and <embed> for other external resources like PDFs or Flash files.
Quick Reference: Important Tags Summary
Structure: <html>, <head>, <body>, <title>, <meta>
Text: <p>, <h1>-<h6>, <br>, <hr>, <b>, <i>, <u>, <em>, <strong>, <mark>, <del>, <sub>, <sup>
Links: <a href="">
Images: <img src="" alt="">
Lists: <ul>, <ol>, <li>, <dl>, <dt>, <dd>
Tables: <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot>, <caption>
Forms: <form>, <input>, <label>, <select>, <option>, <textarea>, <fieldset>, <legend>, <button>
Media: <img>, <audio>, <video>, <source>, <iframe>
Other: <marquee>, <font>, <div>, <span>
Common Exam Tips
- HTML tags are NOT case sensitive but lowercase is recommended.
- Attributes always go in the opening tag as name="value".
- The difference between id and class: id is unique (one element); class can be shared by
many.
- colspan merges columns horizontally; rowspan merges rows vertically.
- GET shows data in URL; POST hides it. POST is more secure.
- required is the simplest HTML form validation — no JavaScript needed.
- <frameset> replaces <body>; frames are obsolete in HTML5.
- Always provide alt text for images for accessibility.
- Multiple <source> tags ensure audio/video works across all browsers.
- Nested tags must close in reverse order of how they opened.