Semantic HTML Flashcards
What are the Importances of Semantic HTML?
Structural hierarchy for heading elements: It is important to use the correct heading element to maintain the structural hierarchy of the content. The h1 element is the highest level of heading and the h6 element is the lowest level of heading.
Presentational HTML elements: Elements that define the appearance of content. Ex. the deprecated center, big and font elements.
Semantic HTML elements: Elements that hold meaning and structure. Ex. header, nav, figure.
What is the Semantic Header Element and what is it used for?
<header>
</header>
It’s used to define the header of a document or section.
What is the Main Element and what is it used for?
<main>
</main>
It’s used to contain the main content of the web page.
What is the Navigation Section Element and what is it used for?
<nav>
</nav>
It represents a section with navigation links.
What is the Figure Element and what is it used for?
<figure>
</figure>
It’s used to contain illustrations and diagrams.
What is the Emphasis Element and what is it used for?
<em></em>
It marks text that has stress emphasis.
What is the Idiomatic Text Element and what is it used for?
<i></i>
It’s used for highlighting alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
What does the Language Attribute do inside the open Idiomatic Text Element tag?
<i></i>
The lang=”” attribute inside the open <i> tag is used to specify the language of the content. The <i> element does not indicate if the text is important or not, it only shows that it’s somehow different from the surrounding text.</i></i>
What is the Strong Importance Element and what does it do?
<strong></strong>
It marks text that has strong importance.
What is the Bring Attention To Element and what does it do?
<b></b>
It’s used to bring attention to text that is not important for the meaning of the content. It’s commonly used to highlight keywords in summaries or product names in reviews.
What are the Description List, Description Term, and Description Details Elements and what are they used for?
<dl>
<dt></dt>
<dd></dd>
</dl>
<dl>: used to represent a list of term-description groupings.
<dt>: used to represent the term being defined.
<dd>: used to represent the description of the term.
</dd></dt></dl>
What is the Block Quotation Element and what is it used for?
<blockquote>
</blockquote>
It’s used to represent a section that is quoted from another source. This element has a cite attribute. The value of the cite attribute is the URL of the source.
What is a Citation Element and what is it used for?
<cite></cite>
It’s used to attribute the source of the referenced work visually. Marks up the title of the reference.
What is the Inline Quotation Element and what is it used for?
<q>
</q>
It’s used to represent a short inline quotation.
What is the Abbreviation Element and what is it used for?
<abbr></abbr>
It’s used to represent an abbreviation or acronym. To help users understand what the abbreviation or acronym is, you can show its full form, a human readable description, with the title attribute.
What is the Contact Address Element and what is it used for?
<address>
</address>
It’s used to represent the contact information.
What is the Date and Time Element and what is it used for? Explain the ISO 8601 Date Attribute.
<time datetime=”YYYY-MM-DDTHH:MM:SS></time>
It’s used to represent a date and/or time. The datetime attribute is used to translate dates and times into a machine-readable format.
The ISO 8601 Date Attribute is used to represent dates and times in a machine-readable format. The standard format is YYYY-MM-DDThh:mm:ss, with the capital T being a separator between the date and time.
What is the Superscript Element and what is it used for?
It’s used to represent superscript text. Common use cases for the sup element would include exponents, superior lettering and ordinal numbers.
What is the Subscript Element and what is it used for?
It’s used to represent subscript text. Common uses cases for the subscript element include chemical formulas, foot notes, and variable subscripts.
What is the Inline Code Element and what is it used for?
<code></code>
It’s used to represent a fragment of computer code.
What is the Preformated Text Element and what is it used for?
<pre>
</pre>
It represents preformatted text.
What is the Unarticulated Annotation Element and what is it used for?
<u></u>
It’s used to represent a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
What is the Ruby Annotation Element, Ruby Fallback Paranthesis Element, and Ruby Text Element and what are they used for?
<ruby>
明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp>
</ruby>
<ruby>: used for annotating text with pronunciation or meaning explanations. An example usage is for East Asian typography.
<rp>: used as a fallback for browsers lacking support for displaying ruby annotations.
<rt>: used to indicate text for the ruby annotation. Usually used for pronunciation, or translation details in East Asian typography.</rt></rp></ruby>
What is the Strikethrough Element and what is it used for?
<s></s>
It’s used to represent content that is no longer accurate or relevant.
