HTML Basics and Semantic Markup (Video Notes)

Flashcards cover HTML structure, closing/nesting rules, cross-browser considerations, semantic markup (main, section), lists, attributes, accessibility, comments, and basic VS Code tips.

What's the difference between empty and non-empty HTML elements?

Empty elements (e.g., <br/>) do not have a closing tag; non-empty elements (e.g., <p>Text</p>) have content and require both opening and closing tags.

What's the correct closing tag for a paragraph?

It's </p>.

Why is proper nesting of HTML tags important?

To maintain correct document structure; inner tags must close before outer ones, similar to nesting dolls.

What is cross-browser compatibility?

Ensuring web content looks and functions similarly across various browsers and devices.

Which HTML element holds the primary content of a page?

The main element.

Ordered vs. unordered lists: what's the difference?

Ordered lists (<ol>) are numbered; unordered lists (<ul>) are bulleted and imply no specific order.

What is the id attribute used for in HTML?

To give an element a unique identifier for CSS styling or direct linking (anchors).

What's the semantic role of the <section> element?

To group related, standalone content into a meaningful section.

How do you add comments in HTML and CSS?

HTML: <!-- comment -->; CSS: /* comment */.

How do you view a web page's source code?

Windows: Ctrl+U; macOS: Command+Option+U.

How does semantic markup benefit screen readers for accessibility?

It helps screen readers convey meaning by using elements like main, section, h1-h6, strong, and em correctly.

What is the purpose of the main HTML element?

To denote the document's primary content, most relevant to the page.

VS Code (macOS): shortcut for word wrap?

Option+Z.

Can HTML elements have attributes and values? Give an example.

Yes. Example: <div id="content" class="main">Content</div>.