Identifying Elements Flashcards
(16 cards)
What role does HTML play in website structure, and why is this called the ‘skeleton’?
HTML sets up the skeleton of the website by defining the different elements that will be present on the page. It’s called a skeleton because it provides the structural framework that other technologies (CSS, JavaScript) build upon.
Why do we need ways to identify and refer to HTML elements?
To style and manipulate different elements on the page, there must be a way to identify and refer to them specifically. Without identification methods, you couldn’t target specific elements for styling or interaction.
What is the primary purpose of the class attribute and how does it work?
The class attribute is used to refer to multiple elements collectively. When elements are manipulated based on class, ALL elements with the same class are affected simultaneously.
What is the primary purpose of the id attribute and what makes it unique?
The id attribute is used to refer to a single, specific element. It’s unique because it’s impossible for two elements to have the same id - each id must be unique within the document.
Write an HTML element using the class attribute and explain what happens when you style this class.
<p>This paragraph has styling applied.</p>
- When you style the ‘highlight’ class, ALL elements with class=’highlight’ will receive the same styling changes.
Write an HTML element using the id attribute and explain its uniqueness constraint.
<p>This paragraph is uniquely identified.</p>
- The id ‘special’ can only be used once in the entire HTML document. No other element can have id=’special’.
What happens if you apply CSS styling to a class vs an id in terms of which elements are affected?
Class styling affects ALL elements with that class name. ID styling affects only the ONE element with that specific id. This is why classes are for groups and ids are for individuals.
You have 5 paragraphs that should all have red text, and 1 paragraph that should have a blue border. How would you structure the HTML?
Use class for the 5 paragraphs: <p class='red-text'> and id for the unique one: <p id='blue-border'>. Class handles the group styling, id handles the individual styling.
What’s wrong with this HTML code: <p id='header'>Main Title</p> <div id='header'>Subtitle</div>?
Both elements have the same id ‘header’, which violates the uniqueness rule. Each id must be unique - you cannot have duplicate ids in the same document.
Compare these two approaches: <p class='special'> vs <p id='special'>. When would you use each?
Use <p class='special'> when you might have multiple paragraphs that need the same ‘special’ styling. Use <p id='special'> when this is the only paragraph that needs unique ‘special’ treatment.
You’re building a webpage with a navigation menu that has 5 links, all styled the same. How do you identify them?
Use the class attribute: <a>Home</a> <a>About</a> etc. Since they all need the same styling, class is the correct choice.
A webpage has a header, main content area, and footer - each requiring unique styling. How do you identify these sections?
Use id attributes since each is unique: <header id='main-header'>, <main id='content-area'>, <footer id='page-footer'>. Each serves a unique purpose and needs individual identification.
What would happen if you try to use JavaScript to select an element by an id that appears twice in your document?
JavaScript would typically select only the first element with that id, potentially causing bugs and unexpected behavior. This is why the uniqueness rule exists - to ensure predictable element selection.
You have 10 product cards that look identical and 1 featured product card that looks different. What’s the correct identification strategy?
Use class for the 10 identical cards: <div class='product-card'> and id for the featured one: <div id='featured-product'>. This follows the principle: class for groups, id for individuals.
Explain why you can’t achieve the same functionality using only classes or only ids.
Classes alone can’t uniquely identify individual elements when you need to target just one. IDs alone would be inefficient and violate uniqueness if you need to style multiple similar elements. You need both for flexible, efficient element identification.
Write HTML for a blog post with a title, 3 paragraphs of content, and a special callout box, using appropriate identification methods.
<h1>Blog Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<div>Special callout</div>
