HTML (Hyper Text Markup Language)
HTML is not a programming language.
It is used to design webpages and gives structure to the content.
Basic Structure of HTML
- <!DOCTYPE> specifies the HTML version.
- <html> is the root of the page.
- <head> contains metadata and the title.
- <body> contains all visible content.
Important Notes
- Tags like <head> and <body> are children of <html>.
- Most tags have start and end tags.
- Empty tags (like <br>) have no content.
- HTML is not case-sensitive.
- Files are saved with a .html extension.
- HTML element = Start tag + content + End tag.
- Closing tags start with /.
- Comments: <!-- Your comment here -->
Tags in HTML
Tags are the building blocks of HTML. They may contain content or other tags.
Attributes add extra information to tags.
Types of Tags
- Heading Tag
Defines headings from
h1toh6.
- Paragraph Tag
Defines a block of text.
- Anchor Tag
Used to create links using
href.
- img Tag
Used to display images.
- Bold, Italic, Underline Tags
Used to format text using
b,i, andu.
- br Tag
Inserts a line break.
- Big & Small Tags
Change the size of text.
- hr Tag
Inserts a horizontal line to separate content.
- Subscript & Superscript Tags
Used for scientific notation like H2O or X2.
- pre Tag
Preserves whitespace and formatting in code blocks.
Link Attributes
-href=" "
-src=" "
-target="_blank(opens the link in another page)"/
"_self(opens in the same page)"/"_parent"/"_top"
Div Tag
-This is often used as a container for other elements.
-div is a block level element i.e, Always takes full width.
Span Tag
-An inline container.
-span takes as much width as necessary.
Lists
Lists are used to display content which represents a list.
- Unordered List
-Used to list unordered items.
<ul>
<li>list item</li>
</ul>
-consists of disc,circle,square,none.
- Ordered List
-Used to list ordered items.
<ol>
<li>list item</li>
</ol>
-consists of Decimal, Lower-alpha, Upper-alpha, Lower-roman, Upper-roman.
Tables
-It is used to define tables in Html.
-It is used to format & display tabular data.
-tr tag: table row
-td tag: table data
-th tag: table data headers
-<caption>used to write captions in table</caption>
-thead tag: used to wrap table head i.e,caption and tr with th.
-tbody: used to wrap the table body.
-Colspan Attribute: used for cells spacing.
Forms in HTML
Forms are used to collect user input. They are essential for interactive web pages.
Key tags include: <form>, <input>, <label>, <textarea>, <select>, and <button>.
-type="text" Plain text field
-type="email" Validates email format
-type="radio" Used for single choice selection
id and name id links with <label>, name used on form submission
-placeholder Hint text inside the input field
HTML Entities
Entities are used to display reserved characters in HTML.
-< = <
-> = >
- = non-breaking space
-© = ©
-& = &
Audio and Video Embedding
HTML supports embedding audio and video content using the <audio> and <video> tags.
-Audio Example:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
-Video Example:
<video controls width="300">
<source src="video.mp4" type="video/mp4">
</video>
More Input Types
Additional <input> types in HTML:
-type="checkbox" — multiple selections
-type="date" — date picker
-type="number" — numeric input
-type="file" — file uploader
-type="submit" — submit form button
Basic Accessibility Tips
Accessibility ensures your website is usable by all, including people using assistive technologies.
-Always use alt="" in images for screen readers.
-Use <label for="id"> to link labels to form fields.
-Prefer semantic tags for better structure.
-Avoid using only color to convey meaning.
iframe in HTML
The iframe (short for inline frame) is an HTML element that allows you to embed another HTML page within the current page. It creates a window (frame) where a different webpage can be displayed — like a mini browser inside your webpage.