HTML Exam Paper Questions Set A & B
HTML Exam Paper Questions Set A & B
To center text within an element using CSS, the rule text-align: center; can be applied to the parent container. This property instructs the browser to center-align the inline content within the block-level element it is applied to. For instance, applying this rule to a <div> will center any text contained within it. This method provides straightforward text alignment without the need for additional layout adjustments .
To create an HTML button that changes color when hovered over, follow these steps: First, define the button using the <button> tag with a class or id for targeting. Then, create a CSS rule to style the button's default state, for example: .button { background-color: blue; color: white; }. Next, define a hover state for the button using the :hover pseudo-class: .button:hover { background-color: green; }. This rule applies the new background color when the user's cursor hovers over the button, enhancing interactivity and visual feedback .
The <!DOCTYPE html> declaration in HTML5 is a critical instruction to web browsers that specifies the document type and the version of HTML being used. It ensures that browsers render the document in standards-compliant mode, which helps maintain consistency in style and functionality across different browsers and platforms. This declaration is instrumental in ensuring that HTML5 features and semantics are correctly interpreted by browsers .
The id attribute in CSS is unique and intended to identify a single element, ensuring that the selector is applied to only one instance in an HTML document. This makes id suited for styling specific parts of a page or for JavaScript manipulation. In contrast, the class attribute is reusable across multiple elements, allowing for the application of the same style rules to multiple instances. This distinction makes class useful for styling groups of elements with similar aesthetics or functionality. IDs have higher specificity in CSS than classes, affecting how style rules are applied in cascading stylesheets .
CSS can be applied via three main methods: inline, internal, and external styles. Inline CSS uses the style attribute directly within an HTML element, affecting only that specific element, and often leads to maintenance challenges due to the scattering of styles. Internal CSS is defined within a <style> tag in the <head> section of an HTML document, impacting styles throughout the entire document, but still limited to a single document. External CSS involves linking an external .css file, allowing for a global styling approach across multiple HTML documents, promoting consistency and reusability .
The primary distinction between <ol> (ordered list) and <ul> (unordered list) elements in HTML is the type of item delineation each provides. <ol> generates a list where each item is automatically numbered in sequential order, suitable for sequences where order matters. Conversely, <ul> creates a bulleted list where items are not inherently prioritized, indicating a simple grouping without specific sequence requirements. Both are commonly styled further with CSS to adjust visual presentation .
The key structural difference is that <div> is a block-level element, while <span> is an inline element. Block-level elements such as <div> occupy full width and start on a new line, making them suitable for larger sections or blocks of content. In contrast, inline elements like <span> do not disrupt the flow of text, allowing for stylistic customization within a paragraph or other inline groupings. This difference influences their use: <div> is often used for layout purposes, while <span> is used for styling specific parts of text within a block .
The <label> tag in HTML, when used with the 'for' attribute, is designed to specify a relationship between a form label and a form element, enhancing user accessibility. When the 'for' attribute is set on a <label> tag, it connects to a specific form element using the element's ID. This connection allows users to trigger form actions, such as focusing on a text input, by clicking on the label, thereby increasing usability and accessibility. For instance, introducing <label for='username'>Username</label> connects to an input element with id='username' .
Self-closing (void) elements in HTML are those that do not require an end tag because they do not contain any content. These elements include <img>, <br>, <hr>, and <input>. The syntax for these elements is straightforward: the element name is enclosed within angle brackets, and while in earlier versions of XHTML, a trailing slash was used (<img src='...' />), in HTML5, it is simply <img src='...'>. These elements are essential for embedding content or providing structural breaks without requiring closing tags, simplifying and tidying HTML syntax .
Semantic HTML elements such as <header>, <footer>, <article>, <section>, and <nav> provide meaning and context to web content beyond mere structural layout. They enhance Search Engine Optimization (SEO) and accessibility by clearly describing the role of each section of content within a page. This improved clarity helps browsers, developers, and assistive technologies like screen readers understand and interpret content accurately .