Semantic HTML

Question 1

What is the difference between elements, tags, and attributes?

Answer 1

• An HTML element usually consists of some content (it could be plain text or additional HTML elements) wrapped by opening and closing tags. Some elements are self-closing and don’t have inner content. The HTML element is everything from the start tag to the end tag:

< p >My first paragraph.< /p >

• Tags are used to mark off the beginning and end of an element. Both opening and closing tags consist of angle brackets and the tag name (< … >), with closing tags distinguished by a forward slash ( …>).
• Attributes are for setting properties on an HTML element and consist of a name and a value enclosed in quotes.

Question 2

What is meant when we say that HTML is about structuring content (2 things)?

Answer 2

1. An HTML document specifies each and every one of its elements.
2. HTML specifies the hierarchical relationship between elements in a document.

Question 3

Briefly explain this tree structure.

Include key concepts such as nodes, root element, children elements, sibling elements.

Answer 3

• This tree consists of a series of nodes (each represented by a box) that lie in hierarchical relation to one another.
• We call the element the root elementbecause it is the parent (or grandparent, or great-grandparent, etc.) of all other elements in the document. The root element has children ( and ).
• Looking at the
• elements in the <nav>, we find our most nested elements. We have list items inside an unordered list inside a nav inside the body inside the root HTML element.<br></br> </nav>
• Nodes existing at the same level of the hierarchy (for instance, the <nav>, <header>, and <main> elements above) are called siblings.</main></header></nav>

Question 4

How do you comment code in HTML?

What is its usage?

Answer 4

<!-- this is a comment -->

Programmers use comments to leave valuable info for future maintainers without it being rendered to users.

The practice of “commenting out” code is a common way of temporarily disabling code, often times for the purpose of debugging.

Question 5

What is semantic HTML?

Name a few examples.

Answer 5

HTML is semantic when the elements we use to represent our content reinforce the meaning of that content.

When writing HTML, strive to use elements that communicate the meaning of the document’s structure.

Examples:

< header >

< nav >

< main >

< section >

< footer >

Specific example: “Having a header at the top that contains a logo, the name of the company and a menu.”

What is not semantic (opposite: not meaningful): Having main content in the header or information that should be in the footer in the header.

Question 6

Who/what does semantic HTML help?

Answer 6

The names of the HTML elements we choose help browsers, web-crawlers, screen readers, and project collaborators to better understrand our content.

Question 7

T/F: All elements have the capability of being semantic.

Answer 7

FALSE.

Most elements do. Elements like < div > and < span > do not because they are not specific at all.