HTML Basics Flashcards
(16 cards)
What does HTML stand for and what is its primary purpose?
HTML stands for HyperText Markup Language. Its primary purpose is to meaningfully markup content so that browsers can make sense of it and understand the structure and meaning of the content.
What is the fundamental principle for choosing HTML elements, and what should you NOT base your choice on?
Choose HTML elements based on meaning and context of your content, NOT on their visual appearance or styling. HTML is for semantic markup - CSS handles the visual presentation.
What are the three components that make up a complete HTML element?
- Opening tag (e.g., <p>) 2. Content (the actual text or nested elements) 3. Closing tag (e.g., </p>). Together they form a complete element structure.
How does HTML code execution work, and why is this important to understand?
HTML code runs sequentially from top to bottom. This means the order of elements in your code determines the order they appear on the page and how they’re processed by the browser.
What are HTML attributes, where do they go, and how are they formatted?
Attributes are added to HTML opening tags to alter element behavior. They’re separated by spaces and each holds a value mentioned in quotes. Example: <img></img>
How does HTML handle whitespace, and what does this mean for your code formatting?
All whitespace is ignored in HTML. Multiple tabs, spaces, or line breaks get converted into single spaces when the page renders. This means you can format your code for readability without affecting the display.
What’s the difference between <h1> and <h6> elements, and what do heading elements represent?
Heading elements go from <h1> to <h6>, representing different levels of importance and hierarchy. <h1> is the most important/largest heading, <h6> is the least important/smallest. They create document structure, not just visual size.
Write a complete paragraph element with some sample text.
<p>This is the homepage of my awesome website.</p>
- Notice the opening <p> tag, content in the middle, and closing </p> tag.
What makes the <img></img> element different from other HTML elements in terms of structure?
The <img></img> element is a self-closing tag - it doesn’t have a separate closing tag. It’s closed by putting a forward slash before the closing bracket, like <img></img>.
List the four main attributes of the <img></img> element and explain what each does.
src: specifies the image file path/URL, alt: provides alternative text for accessibility, width: sets image width in pixels, height: sets image height in pixels. Example: <img></img>
What’s the difference between a <button> element and an <a> element in terms of functionality?</a></button>
<button> creates a clickable button for actions/interactions within the page. <a> (anchor) creates links that navigate to other pages or locations. Buttons perform actions, links navigate.</a></button>
Write an anchor element that opens a link in a new tab, and explain the two key attributes.
<a>Click here to go to Example.com</a> - href specifies the destination URL, target=’_blank’ opens link in new tab (default is same tab).
Where should the <style> element be placed in an HTML document and what is its purpose?</style>
The <style> element should be placed in the <head> section of the HTML document. Its purpose is to add CSS styling code directly within the HTML document for internal styling.</style>
You need to create a webpage section with a main heading, a paragraph, and an image. Write the HTML structure.
<h1>Welcome to My Website</h1>
<p>This is the homepage of my awesome website.</p>
<img></img>
What’s wrong with this HTML approach: using <h1> for small text because you like how it looks, and <p> for headings because you prefer that font?
This violates HTML’s semantic principle. Elements should be chosen for meaning, not appearance. <h1> represents the main heading regardless of size, <p> represents paragraph text. Use CSS to control visual appearance, not wrong HTML elements.
How do you make a link that opens in the same tab vs a new tab, and which is the default behavior?
Same tab (default): <a>Link text</a> - New tab: <a>Link text</a> - Default behavior is opening in the same tab unless target=’_blank’ is specified.
