7. How do you create hyperlinks? What are absolute vs relative URLs?

A hyperlink is created using the (anchor) tag and an href attribute that says where the link goes. The text inside the tag is what people click on to visit another page or resource.

Go to Example

This makes a clickable link that says “Go to Example” and takes you to that website.

Absolute URL: An absolute URL specifies the full path to the resource, including the protocol (http, https, etc.), domain, and file path. It works independently of the current page location.

About Us

• No matter where the current page is hosted, this link always points to the full domain.

Relative URL: A relative URL specifies the path to the resource relative to the current page’s location. It is used when linking to resources within the same website/project.

About Us

• If the current website is hosted at https://www.mysite.com, this link points to https://www.mysite.com/about.html.

8. What’s the tag for?

The tag puts pictures on your web page. It’s a self-closing tag, so it doesn’t need a closing part. You need two main attributes:

• src: Tells the browser where to find the image file.
• alt: Gives a description of the image for accessibility (like for people using screen readers) or if the image doesn’t load.

The alt text also helps Google understand your image, which is great for SEO.

9. What’s the difference between block-level and inline elements?

Block-level and inline elements act differently on a web page:

• Block-level elements: Take up the whole width of their space, start on a new line, and stack like boxes (e.g.,
  ,

  ,

  ). They’re great for big sections like paragraphs or headers.

• Inline elements: Only use the space their content needs, stay on the same line, and flow with text (e.g., , , ). They’re perfect for small bits like links or images within a sentence.

<div>This **block** starts a new line.div>
<div>Another **block**.div>
<span>This **inline** stays herespan> <span>and so does this.span>

HTML lets you create three types of lists:

1. Ordered List (
   ): Shows items with numbers or letters (like 1, 2, 3).
   2. Unordered List (
      ): Uses bullets for items.
      • Description List (

        ): Pairs terms (

        ) with their descriptions (

        ).

   For ordered and unordered lists, each item goes in an

2. (list item) tag.
   HTML

   <ol>
     <li>First **item**li>
     <li>Second **item**li>
   ol>
   <ul>
     <li>**Bullet** pointli>
     <li>Another **point**li>
   ul>
   <dl>
     <dt>**HTML**dt>
     <dd>**HyperText Markup Language**dd>
   dl>
   

   11. What is the

   tag and what do action and method do?

   The tag in HTML is used to create a form that collects user input and sends it to a server for processing. It acts as a container for input elements like text boxes, checkboxes, radio buttons, and buttons.

   action attribute: Defines where the form data should be sent once the user submits it.

   • Example: action="/submit.php" will send the form data to the submit.php file on the server.

   method attribute: Defines how the form data will be sent to the server.

   • GET: Appends the form data into the URL (visible in the address bar, suitable for non-sensitive data, like search queries).
   • POST: Sends data in the request body (not visible in the URL, better for sensitive or large data like passwords and file uploads).
   HTML

   <form action="/submit" method="post">
     <label for="name">**Name**:label>
     <input type="text" id="name" name="name">
     <input type="submit" value="**Send**">
   form>
   

   This form asks for a name and sends it to /submit.

   12. What does the
   tag do and when should you avoid it?

   The
   tag adds a line break, moving content to the next line without starting a new paragraph.

   • It’s self-closing and handy for things like addresses or poems where you want a quick line shift without extra space.
   • It should not be used for layout or spacing. Instead, use semantic HTML and CSS for better readability and maintainability.

   123 **Main St**
   **New York**, NY

   13. How do you make a link open in a new tab safely?

   To make a hyperlink open in a new tab, add target="_blank" to the tag. This keeps the current page open while the new page loads in a separate tab. Adding rel="noopener" is a good idea for security, so the new tab can’t mess with your original page.

   Open in a **New Tab**

   • Using target="_blank" alone exposes a security risk: the new page can access the window.opener property and potentially manipulate the original page (phishing or malicious redirects).
   • We add rel="noopener" to prevent the new page from accessing window.opener

   14. What does the

   15. What’s the tag?

   The tag lives in the and gives extra info about your web page, like what character set it uses, a description for search engines, or settings for mobile screens. It’s not visible to users but helps browsers and Google understand your page better.

   • Charset (): Defines the character encoding of the web page. UTF-8 is the most widely used because it supports almost all characters and symbols across different languages.
   • Viewport: It helps control how a page is displayed on mobile and tablet devices. Ensures the website is responsive by setting the width of the page equal to the device’s screen width.
   • Description: It provides a short summary of the web page’s content. This description often appears in search engine results (SEO).

   16. How do you make a table?

   A table is built with the

   tag. You use for rows, , , and

   to make it clear what the table is about.

   HTML

   <table>
  <caption>**Sales** Chartcaption>
  <tr>
    <th>**Item**th>
    <th>**Price**th>
  tr>
  <tr>
    <td>**Book**td>
    <td>$10td>
  tr>
table>

   17. How do you make an email link?

   An email link uses the tag with a mailto: in the href attribute. When clicked, it opens the user’s email app with a new message to the email address you specify.

   Send an **Email**

   18. What’s the tag?

   The tag emphasizes text, usually making it italic. Unlike , which is just for style, has meaning—it tells screen readers to stress the text, helping with accessibility and adding a bit of tone to your content.

   I **love** to **code**!

   19. How do you make a checkbox?

   A checkbox uses to let users select multiple options. Use a unique id for each checkbox and connect it to a for accessibility. Use the same name to group them and checked to pre-select.

   • Each checkbox: unique id, meaningful value.
   • Label: or wrap the input.
   • Group:
     +

     describes the set.
   • Same name for the group (e.g., name="hobbies").

   Get the **Newsletter**

   20. What is the tag and how does for/id improve accessibility?

   The tag provides a text description for a form input. Using for (on ) and id (on the input) links them so clicking the label focuses the input, and screen readers announce them together—greatly improving accessibility.

   • Without a label: Users must click the small input box, and screen readers may not identify the field clearly.
   • With a label: Clicking the text focuses the input, and screen readers read the label with the field.

   How for and id work together:

   They create a direct connection between a label and its input, improving usability and accessibility.

   • Each form control (like ) has a unique id.
   • The uses the for attribute with the same value as that id.
   • This creates a direct link between the text and the input.

   **Name**:

   21. How do you make a dropdown list?

   A dropdown list uses the tag, with options inside tags. The name attribute sends the chosen value, and value sets what goes to the server. Pair it with a for accessibility.

   HTML

   <label for="fruits">Pick a **fruit**:label>
<select id="fruits" name="fruits">
  <option value="apple">**Apple**option>
  <option value="banana">**Banana**option>
select>

   22. What is the

   tag and when should you use cite?

   The

   tag is for long quotes from somewhere else, often shown with indentation. You can add a cite attribute to note the source URL, though it’s not visible. It’s semantic, so search engines know it’s a quote, which helps with SEO.

   • Cite Attribute: Specifies the source URL of the quote.
   • Accessibility: Screen readers can detect the source, helping visually impaired users.
   • SEO & Documentation: Search engines and documentation tools can recognize and credit the quote properly.

     A really **inspiring quote**.

   23. How HTML is different from CSS?

   HTML provides the structure and content of a webpage, while CSS controls its design and visual layout.

   HTML	CSS
Defines the structure and content of a webpage	Styles and formats the appearance of the webpage
Uses tags to add elements like text, images, and links	Uses selectors and properties to control colors, fonts, spacing, etc.
Forms the backbone of any webpage	Enhances visual appeal and layout
Determines what appears on the page	Determines how it appears

   Intermediate HTML Questions

   These questions go beyond the basics, focusing on HTML5 features, semantics, forms, and attributes that improve accessibility, SEO, and user experience.

   24. What are semantic HTML elements?

   Semantic HTML elements clearly describe their purpose (e.g.,

   ,

   for headers, and	for data cells. Tables organize data in a grid, like for schedules or charts. For accessibility, add