Web Design Standards Flashcards

Question 1

What is a web standard, and who typically publishes the core web standards?

Accepted Answer

A web standard is a published specification that describes how a web technology should work so that browsers and tools behave consistently. The core standards for HTML, CSS, and many related technologies are developed mainly by the World Wide Web Consortium, often called W3C, through open working groups and public review.

Question 2

Why is separating structure, presentation, and behavior considered a core web standards principle?

Accepted Answer

Separation of concerns means HTML holds the content and structure, CSS controls appearance, and JavaScript adds interactive behavior. Keeping these layers apart makes pages easier to maintain, lets one stylesheet serve many pages, and allows content to remain usable even when styling or scripts fail to load.

Question 3

What does graceful degradation mean when designing a website for varied browsers?

Accepted Answer

Graceful degradation means building a site with full features for modern browsers while ensuring that older or limited browsers still receive a usable, if simpler, experience. The opposite approach, progressive enhancement, starts with a basic working version using plain HTML and then adds advanced styling and scripting for capable browsers.

Question 4

What is the role of the doctype declaration at the top of an HTML document?

Accepted Answer

The doctype declaration tells the browser which version of HTML the document uses, so it renders the page in standards mode rather than falling back to older quirks behavior. In modern HTML the declaration is simply the word doctype followed by html, written on the first line before the html element.

Question 5

What is the purpose of the lang attribute on the html element?

Accepted Answer

The lang attribute declares the primary human language of a page, such as en for English. Screen readers use it to choose correct pronunciation, search engines use it to understand content, and browsers may use it for hyphenation and spellchecking. Individual elements can override it for passages in other languages.

Question 6

What is the difference between a web standard and a de facto standard?

Accepted Answer

A formal web standard is a specification published through a recognized standards body after open review. A de facto standard is a practice that becomes widely adopted through common use, such as a particular file format or browser behavior, without an official ratification process. Designers favor formal standards when interoperability matters.

Question 7

Why does interoperability matter for a website that many different users will access?

Accepted Answer

Interoperability means a website works correctly across different browsers, operating systems, devices, and assistive technologies. Because users choose their own tools, a site built only for one product risks excluding visitors and breaking unexpectedly after updates. Following shared standards is the most reliable way to reach the widest possible audience.

Question 8

What is the purpose of the viewport meta tag on mobile-friendly pages?

Accepted Answer

The viewport meta tag tells mobile browsers how wide the layout area should be and how the page should scale. Without it, many phones render a desktop-width page and shrink it to fit. A common setting is width equals device-width with initial scale set to one, which lets responsive CSS rules take effect.

Question 9

What does it mean for HTML to be semantic?

Accepted Answer

Semantic HTML uses elements whose names describe the meaning of the content they contain, rather than only how it looks. A nav element signals navigation, an article element signals self-contained content, and a button signals an action. Browsers, search engines, and assistive technologies all rely on these meanings to interpret the page.

Question 10

Why should a page use only one main element?

Accepted Answer

The main element marks the central content unique to a page, excluding repeated items like headers, footers, and sidebars. Because it identifies the primary content, assistive technologies can let users jump directly to it. A page should therefore contain only one visible main element, which keeps this landmark clear and easy to find.

Question 11

How should heading elements be used to organize page content?

Accepted Answer

Headings from h1 through h6 form an outline of the page, with h1 typically naming the main topic and lower levels marking subsections. Heading levels should follow a logical order without skipping, so a level three heading should sit under a level two heading. Choose headings for structure, and let CSS handle visual size.

Question 12

What is the difference between the nav element and a simple group of links?

Accepted Answer

The nav element marks a section whose purpose is to provide major navigation, such as a site menu or table of contents, and it creates a navigation landmark for assistive technology. A few incidental links, such as those inside a paragraph or a footer credit line, do not need a nav wrapper.

Question 13

Why are button and a elements not interchangeable?

Accepted Answer

An a element with an href navigates to another location, while a button performs an action within the current page, such as submitting a form or opening a dialog. Browsers and assistive technologies expose each differently, and keyboard behavior follows from that choice. Using the correct element gives users predictable behavior without extra scripting.

Question 14

How do lists help structure content, and which element is used for an ordered list?

Accepted Answer

Lists group related items so that people and tools recognize them as a set, which aids scanning. An ordered list uses the ol element and is appropriate when sequence matters, such as steps in a procedure. Unordered lists use ul, and list items always sit inside one of these two parent elements.

Question 15

Why is a table only appropriate for tabular data, not for page layout?

Accepted Answer

Table elements represent data with meaningful rows and columns, and assistive technologies announce those relationships to users. Using tables for layout confuses screen readers, which may read cells out of logical order or announce headers incorrectly. Layout should be built with CSS, using elements like div, section, and flexible grid or flexbox rules.

Question 16

What does the figure element with figcaption accomplish?

Accepted Answer

The figure element groups self-contained media such as an image, chart, or code sample, and figcaption provides its visible caption. Together they associate the explanation with the media in a way that browsers and assistive technologies can recognize. The caption stays connected to its media even when the page is reflowed or reordered.

Question 17

What are the four principles of the Web Content Accessibility Guidelines?

Accepted Answer

The accessibility guidelines define four principles: content must be perceivable, operable, understandable, and robust. Perceivable means users can sense the information, such as seeing or hearing it. Operable means controls work by keyboard or other input. Understandable means content and interface behave predictably. Robust means content works with current and future assistive technologies.

Question 18

What does alt text provide, and when should an image have empty alt text?

Accepted Answer

Alt text gives a short text equivalent of an image's purpose or content, which screen reader users hear. Images that are purely decorative, such as a background flourish, should have an empty alt attribute so assistive technology skips them. Every img element needs an alt attribute, even when it is empty.

Question 19

What is the minimum contrast ratio for normal body text under WCAG AA?

Accepted Answer

For normal body text, the Level AA success criterion requires a contrast ratio of at least 4.5 to 1 between the text and its background. Large text, meaning roughly 18 point or 14 point bold, needs at least 3 to 1. Higher Level AAA targets are stricter, at 7 to 1 for normal text.

Question 20

Why must all interactive functions be reachable by keyboard alone?

Accepted Answer

Many people cannot use a mouse because of motor impairments, blindness, or preference, so they rely on keyboards or devices that emulate keyboard input. Every link, button, form field, and menu must be reachable with the Tab key and operable with Enter or Space.

Question 21

What is the purpose of a visible focus indicator?

Accepted Answer

A visible focus indicator shows which element currently receives keyboard input, such as a highlight outline around the active link. Without it, keyboard users cannot tell where they are on the page. Designers should avoid removing default outlines unless they supply an equally clear replacement.

Question 22

Why should form fields have explicit label elements?

Accepted Answer

A label element connects visible text to its input, so screen readers announce the purpose of the field when it receives focus. Clicking the label also moves focus into the input. Placeholder text alone is not a substitute, because it disappears when typing and often has low contrast.

Question 23

What is the purpose of ARIA attributes, and what is the first rule of using them?

Accepted Answer

ARIA attributes add roles, states, and properties that help assistive technologies understand custom widgets when native HTML cannot express them. The first rule of ARIA is to prefer native HTML elements when they already provide the right meaning. ARIA changes only what is announced, so it does not add functionality by itself.

Question 24

Why should a page avoid relying on color alone to convey meaning?

Accepted Answer

Some users have color vision deficiencies or use monochrome displays, so they may not perceive color differences. Error messages, required fields, and chart series should therefore include text, icons, patterns, or position cues along with color.

Question 25

What does the term responsive web design mean in practice?

Accepted Answer

Responsive web design is an approach in which one site adapts its layout, images, and navigation to fit a wide range of screen sizes and orientations. It usually relies on fluid grids, flexible images, and media queries that apply different CSS rules at different viewport widths.

Question 26

How does a CSS media query let a layout change with the screen?

Accepted Answer

A media query is a CSS rule that applies styles only when certain conditions are true, such as when the viewport is narrower than a given width. For example, a stylesheet can switch a three-column layout to a single column on small screens.

Question 27

Why do fluid layouts and relative units work better than fixed pixel widths?

Accepted Answer

Fluid layouts use percentages and max-width limits so content adapts to the available space. Fixed pixel widths can force horizontal scrolling on narrow devices and leave awkward gaps on wide screens. Relative units such as em and rem also scale with user text size preferences, which supports people who enlarge their text.

Question 28

What does a mobile-first approach to responsive CSS involve?

Accepted Answer

A mobile-first approach writes the base styles for the smallest screens first, then adds min-width media queries to enhance the layout for larger screens. This keeps the default experience lightweight for phones. Many developers adopt it because it encourages focusing on essential content before visual complexity.

Question 29

Why do images need explicit width and height attributes?

Accepted Answer

Declaring width and height lets the browser reserve the correct space before an image loads, which prevents the page from jumping as content arrives. This reduces layout shift, which frustrates readers. Responsive images can also use the srcset attribute so smaller devices download smaller files.

Question 30

What is lazy loading, and which kinds of content benefit from it?

Accepted Answer

Lazy loading delays fetching images or iframes until they are about to enter the visible area of the screen. Content far below the fold, such as later images in an article, benefits most. Critical images visible at load should not be lazy loaded, since that delays content people see first.

Question 31

Why does page weight matter, and what is one common way to reduce it?

Accepted Answer

Page weight is the total size of files a browser must download, and larger pages load more slowly on slow connections. One common way to reduce weight is minifying CSS and JavaScript by removing unnecessary whitespace and comments. Compressing text responses on the server also reduces transfer size.

Question 32

Why should designers avoid disabling pinch zoom on mobile pages?

Accepted Answer

Disabling pinch zoom prevents users with low vision from enlarging text and images to a size they can read. Restricting the viewport this way blocks that control and conflicts with accessibility guidance. Designers should allow zooming and build layouts that remain usable at large magnifications.

Question 33

Why do developers run markup through a validator?

Accepted Answer

An HTML validator checks markup against the formal rules of the language, flagging unclosed elements, invalid attributes, and misplaced content. Validation catches errors that browsers might silently correct differently, which can lead to inconsistent layouts. Fixing errors early makes code easier to maintain and reduces surprises during updates.

Question 34

What is the difference between validation and testing in practice?

Accepted Answer

Validation checks whether code follows the published syntax rules, while testing checks whether the page actually behaves correctly for people using it. Testing includes browser checks, keyboard navigation, and screen reader review. Both are useful, and a page can pass validation yet still fail real users.

Question 35

Where do breakpoints appear in a responsive stylesheet, and why?

Accepted Answer

Breakpoints are viewport widths at which a layout changes, typically defined in media queries. They should be chosen based on where content actually begins to break or feel cramped, rather than matching specific popular device sizes. Testing across a range of widths confirms that the design transitions smoothly between breakpoints.

Question 36

What is the main goal of cross-browser testing for a website?

Accepted Answer

Cross-browser testing checks that a site displays and functions consistently across the browsers and versions that its audience actually uses. Differences often appear in CSS support, form controls, and JavaScript APIs. Teams usually decide which browsers to support using analytics about real visitors, then test those combinations before release.

Question 37

Why does each page need a unique and descriptive title element?

Accepted Answer

The title element supplies the name shown in browser tabs, bookmarks, and window lists. Unique, descriptive titles help people tell pages apart, such as naming the section and the site instead of repeating a generic label. Search results also display title text, so clear wording supports discovery.

Question 38

What is the purpose of a version control system in web projects?

Accepted Answer

A version control system records each change to project files, allowing developers to review history, compare versions, and restore earlier states. It also lets several people work on the same codebase through branches and merges. Using such a system reduces the risk that an update accidentally erases someone else's work.

Question 39

Why should a team document which browsers and devices it supports?

Accepted Answer

A documented support policy sets clear expectations about which browsers, operating systems, and devices receive full testing and fixes. It helps designers and developers make consistent decisions about features and fallbacks. Without one, teams often spend effort on combinations that few visitors ever use.

Question 40

Why do sites need ongoing maintenance after launch?

Accepted Answer

Browsers, operating systems, and assistive technologies change over time, so a site can break without any edits. Ongoing maintenance includes monitoring for broken links, reviewing accessibility regressions, updating dependencies, and retesting key pages after major updates. Scheduling these tasks keeps a site reliable and secure.

Web Design Standards Flashcards

1Foundations of Web Standards

2Semantic HTML and Document Structure

3Accessibility Principles and Practices

4Responsive Design and Performance

5Validation, Testing and Maintenance

Learning Resources