Week 4 - HTML Flashcards
Content covered in Week 4 (95 cards)
What is the main purpose of headings in an HTML document?
To define sections and provide structure, establish a content hierarchy, improve accessibility and user experience, and help search engines index content.
How many heading levels are there in HTML and what are they?
There are 6 heading levels: <h1> through <h6>. <h1> is the most important (main title), and <h6> is the least important.
What is the correct way to use heading levels in a document?
Follow a logical hierarchy: start with <h1>, then <h2>, <h3>, etc., without skipping levels (e.g., don’t jump from <h1> to <h4>).
Should headings be used to style text visually?
No. Headings should only reflect the structure and meaning of content, not be used just to style or resize text. Use CSS for styling.
What are the default font sizes for each HTML heading in most browsers?
<h1>: 32px
<h2>: 24px
<h3>: 18px
<h4>: 16px
<h5>: 14px
<h6>: 12px
</h6></h5></h4></h3></h2></h1>
Can the size of HTML headings be changed?
Yes, using CSS. But default sizes are consistent and reflect the importance of each heading level.
What kind of content can go between headings?
Text, images, links, and other HTML elements relevant to that section. This helps structure and categorize information clearly.
Why is heading hierarchy important for accessibility?
It allows screen readers and assistive technologies to understand the structure of the page, making it easier for users with disabilities to navigate.
How do headings affect SEO (Search Engine Optimization)?
Search engines use headings to understand the structure and main topics of a page, which can influence indexing and rankings.
Does a larger heading size mean more importance?
No. Importance is determined by heading level (<h1> to <h6>), not by visual size. Use headings semantically.
What does the <p> tag do in HTML?
It defines a paragraph, creating spacing before and after text. It’s a block-level element that takes up the full container width.
Name three inline tags used to style text and explain what they do.
<strong>: Makes text bold (used for importance).</strong>
<em>: Italicizes text (used for emphasis).</em>
<u>: Underlines text.</u>
What tags are used for superscript and subscript text? Give examples.
: Superscript (e.g., 1st)
: Subscript (e.g., H2O)
How can you show deleted and highlighted text?
<del>: Strikethrough (e.g., <del>$100</del>)</del>
<mark>: Highlight (e.g., <mark>Important</mark>)</mark>
What is the difference between <q> and <blockquote>?</q>
<q>: Short inline quotes (adds quotation marks automatically).</q>
<blockquote>: Long block quotes, usually indented.
</blockquote>
How do <cite>, cite attribute, and <footer> support quotes?</cite>
<cite>: Titles or sources of creative works.</cite>
cite attribute: Adds a URL source to quotes.
<footer>: Gives credit or attribution for a quote or section.
</footer>
What do <br></br> and <hr> do?
<br></br>: Inserts a line break.
<hr></hr>
: Adds a horizontal line for section separation.
When should you use <code> and <pre>?</code>
<code>: For inline code (monospaced font).</code>
<pre>: For preformatted text that preserves spaces and line breaks.
</pre>
What are the three types of lists in HTML?
<ul>: Unordered list (bullets).
<ol>: Ordered list (numbers).
<dl>: Definition list with <dt> (term) and <dd> (definition).
</dd></dt></dl></ol></ul>
What are nested lists, and why are they used?
Lists inside other lists; used to show hierarchy (e.g., substeps in a recipe).
What are the basic elements of an HTML table?
<table>: The table container.
<tr>: Table row.
<td>: Table data/cell.
<th>: Table header (bold, centered by default).
</th></td></tr></table>
How do colspan and rowspan work in tables?
colspan: Merges cells across columns.
rowspan: Merges cells across rows.
What are semantic elements in tables and why use them?
<thead>, <tbody>, <tfoot>: Group parts of a table for clarity and accessibility.
Improves structure and screen reader navigation.
</tfoot></tbody></thead>
Why are table attributes like border and align considered outdated?
They’re mostly deprecated in HTML5. Use CSS instead for styling.