Lecture 2 - Fundamentals

Question 1

Advantages of Semantic Markup

Answer 1

• Maintainability: Easier to update and change than documents with extensive presentation markup.
• Performance: Quicker to author and faster to download.
• Accessibility: Enhances usability for users with disabilities, such as those using voice-reading software.
• Search Engine Optimization (SEO): Improves visibility and ranking for search engine crawlers.

Question 2

Lists

Answer 2

Ordered Lists
- Collections of items that have a set order
- <ol> for the list, <li> for each item

Unordered Lists
- Collections of items in no particular order
- <ul> for the list, <li> for each item

Description Lists
- Collections of name and description/definition pairs
- <dl> for the list, <dt> for each term, <dd> for each description

List Type | Description | HTML Tags |

Question 3

Text Level Semantic Elements

Answer 3

<a>
Anchor used for hyperlinks

<abbr>
An abbreviation

<small>
For displaying fine print, such as nonvital text

<br>
Line break

<span>
The inline equivalent of the <div> element

<cite>
Citation (i.e., a reference to another work)

<code>
Used for displaying code, such as markup or programming

<em>
Emphasis

<mark>
For displaying highlighted text

<strong>
For content that is strongly important

<time>
For displaying time and date data

Question 4

HTML5 Semantic Structure Elements

Answer 4

• HTML5 introduces several semantic elements that allow you to replace some of your <div> sprawl with cleaner and more self-explanatory elements.
• These elements enhance the readability of the HTML structure and provide more meaningful information about the document’s content.
• • HTML5 semantic elements do not apply any special presentation, giving them great flexibility. They are purely for adding meaning to the document structure and do not come with any default styling.
• <article> and <section>: These elements can be used in many ways when designing your website. They help in structuring the content more meaningfully.
• <figure>: This element can be used not just for images but for any type of essential content that could be moved to a different location in the page or document, and the rest of the document would still make sense.