HTML: structured, accessible pagesDocument structure10 minhtml<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Contact | Acme Clinic</title> <link rel="stylesheet" href="styles.css"> <script src="app.js" defer></script> </head> <body> <h1>Contact us</h1> </body> </html>LineWhy<!DOCTYPE html>Standards mode renderinglang="en"Screen readers pick the right pronunciation (WCAG 3.1.1)meta charsetCharacters display correctlymeta viewportPhones render at device width instead of a zoomed-out desktop page<title>Tab name, bookmarks, search results; unique per page (WCAG 2.4.2)deferScript runs after the HTML is parsed, so elements existElement = start tag, content, end tag: <p>Text</p>. Void elements have no end tag: <img>, <br>, <input>, <meta>, <link>.Attributes go in the start tag: <a href="about.html">.id is unique on the page; class can repeat.Nesting closes in reverse order: <p><strong>x</strong></p>.Check every page with the W3C Markup Validation Service.Knowledge checkWhich line makes a page render at phone width?A<meta charset="utf-8">B<!DOCTYPE html>C<meta name="viewport" content="width=device-width, initial-scale=1">D<html lang="en">Which attribute value may appear only once per page?AclassBhrefCaltDidMark doneSemantic layout and headings
