HTML commands
Indentation in HTML
Indentation in HTML means adding spaces or tabs to organize your code visually. Example: <html> <body> <h1>Title</h1> <p>Paragraph</p> </body> </html> • It doesn't affect how the page looks. • It makes the code easier to read and understand.
<body>
The <body> tag contains everything you see on the web page — like text, images, buttons, etc. Example: <body> <h1>Welcome!</h1> <p>This is my website.</p> </body> • It goes inside the <html> tag. • Only what's inside <body> is visible to users.
<button>
The <button> tag in HTML creates a clickable button. Example: <button type="submit">Submit</button> Key Points: • Can be used to submit a form, run JavaScript, or just interact with the page • You can also add a type attribute: • type="submit" - sends form data • type="reset" - clears form fields • type="button" - just a normal button (needs JavaScript to do something) In short: <button> = A clickable element for actions or form submission.
<em>
The <em> tag in HTML stands for emphasis. Example: <p>This is <em>very</em> important.</p> What it does: • Makes the text italic by default • Tells the browser and screen readers that the word is emphasized In short: <em> = Emphasized text, usually shown in italics.
<fieldset>
The <fieldset> tag in HTML is used to group related form elements together. Example: <fieldset> <legend>Personal Info</legend> <label for="name">Name:</label> <input type="text" id="name"> </fieldset> ⸻ Key Points: • It puts a box around the inputs • Makes forms easier to understand • Often used with <legend> to give the group a title ⸻ In short: <fieldset> = Groups related form fields in a box with an optional title.
<figure> & <figcaption>
The <figure> tag in HTML is used to group media content (like images, diagrams, or code blocks) with a caption. Example: <figure> <img src="cat.jpg" alt="A cute cat"> <figcaption>A cute cat sitting on a windowsill.</figcaption> </figure> Key Points: • Often used with <figcaption> (add a caption to describe ALL the content within the figure element. ) • It should only have one <figcaption> that describes all the content • Helps group an image and its text together • Useful for accessibility and better structure In short: <figure> = Media + caption grouped together.
<form>
The <form> tag in HTML is used to collect user input. Example: <form> <label for="name">Name:</label> <input type="text" id="name"> <button type="submit">Submit</button> </form> Key Points: • Wraps input elements like <input>, <textarea>, <select>, and buttons • Sends data when the user submits the form • Often used to collect things like names, emails, or survey answers In short: <form> = A container to collect and send user input.
<img src="...LINK..."> & alt="......"
The <img> tag is used to show an image on a web page. Example: <img src="....LINK...." alt="A cute cat"> • src = the image file path or URL • alt = text shown if the image doesn't load (and for screen readers) It's a void element, so it doesn't need a closing tag.
checkbox
The <input type="checkbox"> creates a checkbox, which lets users select one or more options. ⸻ Example: <label> <input type="checkbox" name="fruit" value="apple"> Apple </label> <label> <input type="checkbox" name="fruit" value="banana"> Banana </label> ⸻ Key Points: • You can check multiple boxes • Each checked box sends its value when the form is submitted ⸻ In short: <input type="checkbox"> = A box you can check or uncheck (choose one or many options).
Radio button
The <input type="radio"> creates a radio button (a small circle the user can click), which lets the user choose only one option from a group. Example: <form> <input type="radio" name="color" value="red"> Red <input type="radio" name="color" value="blue"> Blue </form> Key Points: • Radio buttons with the same name are grouped • Only one button in the group can be selected at a time In short: <input type="radio"> = Choose one option from a list.
<input>
The <input> tag in HTML is used to create fields for user input. Example: <input type="text" name="username"> Key Points: • It's a void element (no closing tag) • The type attribute defines the kind of input (e.g., text, password, email, checkbox, etc.) • Commonly used inside a <form> In short: <input> = A box where the user can type or select data.
<legend>
The <legend> tag gives a title or label to a group of form elements inside a <fieldset>. ⸻ Example: <fieldset> <legend>Contact Info</legend> <label for="email">Email:</label> <input type="email" id="email"> </fieldset> ⸻ Key Points: • Appears on top of the box created by <fieldset> • Helps the user understand what the group of inputs is about ⸻ In short: <legend> = A title for a group of inputs inside a <fieldset>.
<main>
The <main> tag defines the main content of a web page — the part that's unique and central. Example: <main> <h1>Welcome</h1> <p>This is the main section of the page.</p> </main> • It should only appear once per page. • It excludes headers, footers, or navigation.
<ol>
The <ol> tag in HTML stands for ordered list. Example: <ol> <li>Wake up</li> <li>Brush teeth</li> <li>Eat breakfast</li> </ol> Key Points: • Shows a list with numbers (1, 2, 3...) • Each item goes in an <li> (list item) In short: <ol> = A numbered list.
<p>
The <p> tag in HTML defines a paragraph of text. Example: <p>This is a paragraph.</p> • Browsers add space above and below paragraphs. • Use <p> to organize your text into readable blocks.
<section>
The <section> tag in HTML is used to define a section of content that has a related topic or purpose. Example: <section> <h2>About Me</h2> <p>I love programming and learning new things.</p> </section> Key Points: • Used to group related content. • Helps organize a web page. • Good for accessibility and search engines. In short: <section> = A block of related content (like a chapter or part of a page).
<strong>
The <strong> tag in HTML is used to show that text is important. Example: <p><strong>Warning:</strong> This action cannot be undone.</p> What it does: • Makes the text bold by default • Adds semantic meaning (tells the browser or screen reader it's important) In short: <strong> = Important text, usually shown in bold.
<ul> and <li>
The <ul> tag in HTML stands for unordered list. Example: <ul> <li>Apples</li> <li>Bananas</li> <li>Cherries</li> </ul> Key Points: • ul = a list with bullet points • Each item goes inside an <li> tag (list item) In short: <ul> = A bullet-point list.
action attribute
The action attribute in a <form> tells the browser where to send the form data when it's submitted. Example: <form action="/submit-form"> <input type="text" name="username"> <button type="submit">Send</button> </form> Key Points: • The value (e.g., "/submit-form") is the URL that will receive the data • It can be a file, server script, or API endpoint • If action is left empty, it sends data to the same page In short: action = Where the form data goes when submitted.
id attribute
The id attribute in HTML gives a unique name to an element. Example: <input type="text" id="email"> Key Points: • Each id must be unique (used only once on a page) • It helps with: • Linking a <label> to an input (through a for attribute that matches the id name) • Styling with CSS • Targeting elements with JavaScript ⸻ Connected example with <label>: <label for="email">Email:</label> <input type="text" id="email"> • label for="email" connects to input id="email" ⸻ In short: id = A unique identifier for an HTML element.
name attribute
The name attribute in <input> (and other form elements) labels the data when the form is submitted. Example: <form> <input type="text" name="username"> </form> Key Points: • The name becomes the key in the data sent to the server. • Example data sent: username=John In short: name = Label for the input data when the form is submitted.
placeholder
The placeholder attribute in an <input> shows gray text inside the box to guide the user. Example: <input type="text" placeholder="Enter your name"> Key Points: • Disappears when the user starts typing • Helps users know what to enter In short: placeholder = Hint text inside the input box. ✅ placeholder is used in: • <input> (like text boxes) • <textarea> (for longer messages)
required attribute
The required attribute makes an <input> mandatory before the form can be submitted. Example: <input type="email" required> Key Points: • The form won't submit if this field is empty • Shows a warning to the user In short: required = User must fill this in before submitting.
type attribute
The type attribute in <input> defines what kind of input the field accepts. Example: <input type="text"> <input type="password"> <input type="checkbox"> Common type values: • text - plain text • password - hides the text • email - expects an email • checkbox - a box to check • radio - one option from many • submit - a button to send the form In short: type = What kind of input the user gives.
value attribute
The value attribute in HTML sets the default or current value of a form element. Example: <input type="text" value="John"> • This input box will already show "John" when the page loads. ⸻ Use cases: • Pre-fill form fields • Store selected values (like in radio buttons or checkboxes) • Submit specific data with a form ⸻ In short: value = The data that an input already has or will send when submitted. ✅ value is used in: • <input> ✅ • <button> ✅ • <option> (inside dropdowns)✅
target="_blank"
target="_blank" is used in a link to open it in a new tab or window. Example: <a href="https://example.com" target="_blank">Visit Example</a> • Without target="_blank": the link opens in the same tab. • With it: the link opens in a new tab. It's useful when you don't want users to leave your current page.
for attribute (in <label>)
✅ What it does: It connects the <label> to the input. When someone clicks the label, it puts the cursor in the box. 💡 Example: <label for="name">Your Name:</label> <input id="name"> Now when someone clicks on "Your Name:", the text box becomes active. 👀 The "for" and "id" values must match.
<label>
✅ What it does: It's the text that tells the user what to type in. 🎯 Real-life comparison: Like a name tag above a form. Example: <label for="email">Email:</label> <input type="email" id="email"> Key Points: • The for attribute connects the label to the input with the matching id • Clicking the label focuses or activates the input In short: <label> = Describes what an input is for (improves usability and accessibility).
<!—....—>
<!-- ... --> is used to add comments in HTML. Example: <!-- This is a comment --> <p>Hello!</p> • Comments are not shown on the webpage. • They help you explain code for yourself or others.
<a href="...LINK..."></a>
<a href="...LINK..."></a> is the basic structure for a clickable link in HTML. Example: <a href="https://google.com">Go to Google</a> • href="..." holds the URL or destination • The clickable text goes between the tags So if you write: <a href="https://openai.com">OpenAI</a> It becomes a link that says "OpenAI" and takes you to that website.
<h1> to <h6>
<h1> to <h6> are heading tags in HTML. They define titles and subtitles, from largest to smallest. Example: <h1>Main Title</h1> <!-- Biggest --> <h2>Sub Title</h2> <h3>Section</h3> <h4>Subsection</h4> <h5>Smaller</h5> <h6>Smallest</h6> <!-- Smallest --> • Use <h1> for the most important heading. • Use <h6> for the least important.
<html>
<html> is the root tag in an HTML document — it wraps all the content on the page. Example: <html> <head> <title>My Page</title> </head> <body> <h1>Hello!</h1> </body> </html> • Everything goes inside <html> and </html>. • It tells the browser: "This is an HTML document."
Value
A value in HTML is the setting given to an attribute. Example: <input type="text"> • type is the attribute • "text" is the value of that attribute Values are usually written inside quotes. In short: A value = The specific instruction for an attribute.
Void element in HTML
A void element is an HTML tag that doesn't need a closing tag because it doesn't have content inside. Examples: <br> <!-- Line break --> <img src="image.jpg"> <!-- Image --> <input type="text"> <!-- Form input --> • You don't write </br> or </img>. • They are self-closing by design.
Attribute
An attribute in HTML gives extra information about an element. Example: <input type="text"> • type is the attribute • It tells the browser what kind of input this is Attributes go inside the opening tag, and they usually have a name and a value. In short: An attribute = Extra info added to an element (like type, href, placeholder).
Element
An element in HTML is a complete piece of code that defines content or structure on a web page. Example: <p>Hello!</p> • <p> is the start tag • Hello! is the content • </p> is the end tag Together, it forms an HTML element. In short: An element = Start tag + content + end tag (or just a single tag for void elements).
