HTML 1 Flashcards
What does HTML stand for?
HyperText Markup Language
What is the main purpose of HTML?
Structuring web pages
What is the correct doctype declaration for HTML5?
<!DOCTYPE html>
Which tag is used to define the main content of an HTML page?
<body>
</body>
What is the function of the <head> tag?
Contains metadata and links to external resources
How do you define a hyperlink in HTML?
<a>Text</a>
Which tag is used to insert an image?
<img></img>
What does the alt attribute in <img></img> do?
Provides alternative text for accessibility
How do you create an ordered list?
<ol><li>Item</li></ol>
How do you create an unordered list?
<ul><li>Item</li></ul>
Which tag is used to create a table?
<table>
</table>
What is the function of the <th> tag in a table?
Defines a table header
What does the <td> tag represent in a table?
Defines a table cell
Which attribute is used to specify a unique identifier for an element?
id
How do you create a form in HTML?
<form>
</form>
What is the purpose of the <input></input> tag?
Collects user input
How do you create a text input field?
<input></input>
What is the difference between <section> and <article>?
<section> groups related content, <article> is independent content
</article></section>
Which tag is used for navigation menus?
<nav>
</nav>
What is the function of the <footer> tag?
Defines the footer section of a webpage
How do you add a video to an HTML page?
<video><source></source></video>
How do you add an audio file to an HTML page?
<audio><source></source></audio>
What is the <canvas> tag used for?</canvas>
Creating graphics using JavaScript
What does localStorage do?
Stores data persistently in the browser
What is sessionStorage used for?
Stores data temporarily while the session is active
What is an attribute in HTML?
Provides additional information about an element
What is the purpose of the target=”_blank” attribute in a link?
Opens the link in a new tab
How do you make an input field required?
Add the required attribute: <input></input>
Why is semantic HTML important?
Improves accessibility, SEO, and readability
What is the function of the <title> tag?</title>
Defines the title of the web page (shown in the browser tab)
What is the difference between <div> and <span>?</span>
<div> is a block-level element, <span> is an inline element
</span></div>
What does the <br></br> tag do?
Creates a line break
What is the function of the <hr> tag?
Inserts a horizontal line
How do you define a comment in HTML?
<!-- This is a comment -->
What is the <meta></meta> tag used for?
Defines metadata such as character set and viewport settings
What is the purpose of the charset=”UTF-8” attribute in <meta></meta>?
Ensures proper character encoding for multiple languages
How do you set the viewport for a responsive design?
<meta></meta>
What does the colspan attribute do in a table?
Merges multiple columns into one cell
What does the rowspan attribute do in a table?
Merges multiple rows into one cell
What is the <figure> tag used for?</figure>
Groups images with captions
What is the function of the <figcaption> tag?
Provides a caption for an image in <figure></figure>
How do you create a drop-down list in HTML?
<select><option>Option 1</option></select>
What is the difference between GET and POST in forms?
GET appends data to the URL, POST sends data securely
What is the function of the <label> tag?</label>
Associates text with a form input for accessibility
How do you make a checkbox in HTML?
<input></input>
How do you make a radio button in HTML?
<input></input>
What is the <button> tag used for?</button>
Creates a clickable button
What is the <fieldset> tag used for?
Groups related form elements together
What is the <legend> tag used for?
Provides a title for a <fieldset> group
How do you add a tooltip to an element?
Using the title attribute: <p title="This is a tooltip">Hover over me</p>
What is the function of the <mark> tag?</mark>
Highlights text
How do you create a clickable phone number link?
<a>Call me</a>
How do you create a clickable email link?
<a>Email me</a>
What is the <wbr></wbr> tag used for?
Specifies a possible line break in text
What does the <bdo> tag do?</bdo>
Controls text direction (e.g., right-to-left with dir=”rtl”)
What is the function of the <progress> tag?</progress>
Displays a progress bar
What does the <meter> tag do?</meter>
Displays a scalar measurement within a known range
What is the difference between <b> and <strong>?</strong></b>
<b> makes text bold, <strong> adds semantic importance</strong></b>
What is the difference between <i> and <em>?</em></i>
<i> italicizes text, <em> adds emphasis with semantic meaning</em></i>
How comfortable do you feel building an email/template using HTML/CSS from scratch?
I feel comfortable building an email or template using HTML/CSS from scratch. I have experience following best practices for email development, including inline styles and table-based layouts.
Follow-up question: How comfortable do you feel building a responsive email?
I am comfortable building responsive emails using media queries and fluid hybrid coding techniques. I am familiar with handling email client inconsistencies and ensuring proper rendering across devices.
What are the 2 best practices when coding HTML for email and what are 2 bad practices we should avoid?
Best practices: (1) Use table-based layouts for better email client compatibility. (2) Inline CSS to ensure styles render correctly across all email clients. Bad practices: (1) Avoid using external CSS files, as many email clients do not support them. (2) Avoid JavaScript or interactive elements, as most email clients block them.
What would be your recommendations if the client wants to use live/HTML text on top of an image?
I would recommend using a background color fallback and carefully positioning the text within a <div> or <table> over the image. It’s important to ensure that the email remains readable even if images are blocked.
Follow-up question: Would you recommend the use of a background image to a client? Why?
It depends on the use case. Some email clients, like Outlook, do not support background images properly. If a background image is necessary, I would recommend using a VML fallback for Outlook or considering an alternative design approach that works well without images.
Is there a way to avoid a text transforming into a link on Apple devices?
Yes, wrapping the text in <span> can help, or adding meta name=”format-detection” content=”telephone=no” in the <head> section to prevent automatic link formatting.</span>
Can you share for which email client(s) we can add “hack” code to make the email render as expected?
Outlook (using VML and conditional comments), Gmail (handling padding/margins inconsistencies), and Apple Mail (adjusting WebKit-based rendering).
Which email clients would you recommend testing on?
I would recommend testing on Outlook (various versions), Gmail (web and mobile), Apple Mail, Yahoo Mail, and Samsung Mail, as they are among the most commonly used email clients. Testing tools like Litmus or Email on Acid can help ensure proper rendering.
Scenario 1: Troubleshooting a campaign that is not working properly after delivery
First, I would review the original ticket and client requirements to understand what was expected. Then, I would check the email/template in Litmus or Email on Acid to identify rendering issues. If the issue is related to functionality (e.g., links not working, missing dynamic content), I would test the email in a staging environment to replicate the issue. I would also verify if the issue is client-side (e.g., incorrect ESP settings) or if there was a mistake in the HTML/CSS. If needed, I would escalate the issue internally while keeping the client informed about the investigation process.
Scenario 2: Client needs urgent fixes due to missing logic/errors in the delivered campaign
First, I would acknowledge the issue quickly and professionally, reassuring the client that I am reviewing it. I would check the original request to confirm if something was overlooked or if the client made last-minute changes. Then, I would assess the complexity of the fix—if it’s minor, I would prioritize it immediately. If it requires more time, I would set realistic expectations with the client about when it can be completed. I would also loop in the necessary team members to expedite the process. Throughout the process, I would provide clear, concise updates to the client to manage expectations and ensure transparency.
How do you troubleshoot a rendering issue?
I would first test the email in Litmus or Email on Acid to see how it renders across different email clients. Then, I would inspect the HTML/CSS for issues such as missing inline styles, incorrect media queries, or unsupported elements. If the issue is specific to a certain client (e.g., Outlook spacing problems), I would apply hacks or conditional comments. I would also check if images, fonts, and external links are loading correctly. If needed, I would escalate the issue to the development team for further investigation.
What do you check if the client says they didn’t receive any seeds from the deployment?
I would first verify if the seeds were included in the send list and if there were any suppression rules affecting them. Then, I would check the deployment logs to confirm if the email was sent successfully to the seed addresses. If the issue persists, I would investigate the ESP (Email Service Provider) to see if there were any blocks, delays, or bounces. If necessary, I would resend the seed emails and update the client with my findings.
What do you do if you find a currently-being-deployed campaign has an issue?
If possible, I would try to pause the deployment immediately to prevent further sends. Then, I would assess the nature of the issue—if it’s something that can be fixed quickly (like a broken link redirect), I would apply a workaround if the ESP allows it. If the issue is critical and pausing isn’t possible, I would escalate the situation internally and prepare a damage control plan, including notifying the client proactively and providing a solution.
What do you do if a campaign deployed with an error in an offer, the client yet doesn’t know but you find out?
I would first evaluate the impact of the error—how critical it is and how many recipients were affected. If it’s a minor issue, I would prepare a fix plan and be ready with a response in case the client notices. If it’s a major issue (e.g., incorrect discount, broken CTA), I would proactively inform the client, present possible solutions (like a follow-up correction email), and align with the internal team on next steps. Transparency and quick resolution would be my priority.
- How do you optimize emails for mobile devices?
I ensure that the email design is responsive by using media queries, fluid grids, and flexible images. I also test emails on different mobile devices to check if the layout adapts properly.
- What are some challenges when coding for email clients like Outlook?
Outlook uses the Word rendering engine, which can cause layout issues. To overcome this, I use VML (Vector Markup Language) for background images and ensure that tables are used for structure instead of relying on CSS for positioning.
- Can you explain the importance of alt text in email design?
Alt text is crucial for accessibility and user experience. It ensures that recipients who have images disabled can still understand the content of the email. It’s also important for SEO and improves email accessibility for screen readers.
- How do you handle testing emails across multiple platforms?
I use tools like Litmus or Email on Acid to test emails across a wide range of email clients and devices. I also manually test critical clients (like Gmail, Outlook, and Apple Mail) to ensure rendering issues are caught early.
- How would you troubleshoot a broken CTA button in an email?
I would first check if the button’s link is correctly formatted and whether it is being rendered properly in the HTML. If it’s a display issue, I would ensure that the button has proper styling, such as padding, background color, and link color.
- What role does pre-header text play in an email campaign?
Pre-header text acts as a secondary subject line, giving recipients a preview of the email content. It should be concise and complement the subject line, as it can influence open rates.
- How do you approach A/B testing for email campaigns?
I focus on testing elements like subject lines, CTAs, visuals, and send times. I ensure the variations are split evenly to get statistically significant results, and use tools like Google Analytics or ESP reports to analyze performance.
- What are some tips for improving email deliverability?
To improve deliverability, I ensure the email list is clean by regularly removing invalid addresses. I also implement SPF, DKIM, and DMARC records, avoid spammy words, and use a reputable ESP.
- What is a drip email campaign, and when would you use it?
A drip campaign is a series of automated emails sent to a user over time, typically triggered by a specific action. It’s effective for nurturing leads, onboarding users, or re-engaging inactive customers.
- Can you explain the concept of email segmentation?
Segmentation involves dividing an email list into smaller groups based on criteria like demographics, behavior, or purchase history. This allows for more personalized and relevant emails, improving engagement and conversions.
- How do you track the performance of an email campaign?
I track key metrics such as open rates, click-through rates (CTR), conversion rates, and bounce rates. I also monitor the unsubscribe rate and review the A/B testing results to refine future campaigns.
- What would you do if an email is flagged as spam?
I would first check the content of the email for common spam triggers. Then, I would verify that the sender’s domain has proper authentication (SPF, DKIM, DMARC). I would also ensure that the recipient list is clean and hasn’t been marked as problematic.
- What are the main differences between HTML and plain text emails?
HTML emails allow for rich formatting, images, and interactive elements, whereas plain text emails are simple, without any formatting or images. HTML emails tend to be more engaging but may have compatibility issues across different email clients.
- How would you handle a situation where a client requests last-minute changes after the email has been finalized?
I would assess the urgency of the change and determine if it can be implemented without affecting the timeline. I would communicate with the client to set new expectations and ensure the team can make the change without impacting the overall quality.
- Can you explain what a “salted” email list is and how it’s used?
A salted email list includes additional fake email addresses inserted to prevent spam traps from affecting the email reputation. This helps ensure the list is clean and only includes valid recipients.
- What are email automation workflows, and why are they useful?
Email automation workflows are sequences of emails triggered by specific actions or dates. They help nurture leads, re-engage users, or deliver timely content automatically, which improves efficiency and ensures consistent messaging.
- How do you ensure an email is compliant with privacy laws like GDPR?
I make sure to have an opt-in process where users consent to receive emails. I also ensure that recipients can easily unsubscribe, and that their data is stored securely. All emails should include a privacy notice and comply with the opt-out requests.
- What are some common issues that can cause an email to look different in various clients?
Common issues include inconsistent CSS support, broken image links, and rendering bugs in certain clients (like Outlook). Using tables, inline styles, and fallback strategies helps mitigate these issues.
- Can you explain the purpose of a “fallback font” in email design?
A fallback font is a secondary font listed in the email’s CSS to ensure the text remains readable even if the primary font is unavailable. This guarantees that the email content displays correctly across various email clients.
- How do you ensure that the email content aligns with the brand’s tone and voice?
I ensure consistency by adhering to the brand guidelines regarding language, colors, and style. I work closely with the content and design teams to create emails that match the brand’s identity and engage the audience effectively.
