Lucia LADDERHTML Fundamentals Chapter 05
EN
Progress✕

Loading learning progress…

HTML-05-TRIAL · Lucia Lab · NO TIME LIMIT

Semantic Refactor

The bulletin already has content, but all its wrappers are generic. Give the structure meaningful roles and provide a shortcut to the content.

Four concept questions + one practical task. Each part is worth 20 points. Pass with at least 80/100 and a completed practical task. Retry without penalty; review guidance appears when needed.

01 A page’s distinctive main content belongs in…

02 A review that makes sense independently should use…

03 Does div class="nav" have the same semantics as nav?

04 A skip link’s purpose is to…

WRITE · OBSERVE · UNDERSTAND

A navigable bulletin

Replace div wrappers with header/nav, main with id konten and tabindex -1, section, article, aside, and footer according to their content. Add a skip link to #konten and repair the heading sequence.

HTML
index.htmlHTMLLn 1, Col 17 lines2 spasi
Editor shortcuts & help
Ctrl + Space
Show suggestions · ↑ ↓ select · Enter accept · Esc close
Shift + Alt + F
Format code
Ctrl/⌘ + F
Find and replace text
Ctrl/⌘ + [ / ]
Decrease / increase indentation
Tab
Move focus; inside a snippet, move to the next field. Esc then Tab to exit.
Ctrl/⌘ + Z
Undo changes, including formatting

Suggestions use the language, snippets, and local code context. Formatting runs in your browser.

Document preview

Ctrl/⌘ + Enter runs the preview. Preview uses reading styles. Scripts and form submission are disabled. Sample illustration: assets/observatory.svg.

Return to the starter code?

All files in this task will be replaced with starter code. Completed lessons remain recorded.

Lucia LEXICON / SHORT DEFINITION

Understand this concept

Search knowledge in Lucia

EXPLORE Lucia

Lucia LadderChoose a field, then a courseLibrary LibraryExplanations and context for independent readingLexicon DictionaryDefinitions, examples, and conceptual contextMy LearningContinue a course and review progress on this deviceWeb Basics ReadingFive readings and your saved quiz progress

LADDER / FIELDS OF KNOWLEDGE

Programming & Development1 course · local previewMusic & ArtsNo courses yetDigital Literacy & SecurityNo courses yetScience & DiscoveryNo courses yetHistory & General KnowledgeNo courses yet

LADDER / COURSE

HTML FundamentalsStructure gives meaning to web pages. Learn HTML through explanations, exercises, and a two-page project.

LIBRARY / READING

What happens when you open a website?Follow the journey from an address to a page on your screen.Read a web address without getting lostDomain, path, query, and fragment: small parts with different jobs.Three languages behind one pageUnderstand structure, appearance, and behavior without memorizing code.JSON: when data has structureRead name–value pairs, lists, and the difference between text and numbers.Clear images, lighter pagesWhy format, size, transparency, and alternative text all matter.

LADDER / LEARNING MATERIAL

What is HTML?HTML FundamentalsYour First HTML DocumentHTML FundamentalsInside the HeadHTML FundamentalsEdit, Preview, RepeatHTML FundamentalsTrial 1HTML FundamentalsTags vs. ElementsHTML FundamentalsUnderstanding AttributesHTML FundamentalsNesting & Void ElementsHTML FundamentalsComments & Character ReferencesHTML FundamentalsTrial 2HTML FundamentalsHeadings & ParagraphsHTML FundamentalsEmphasis, Importance & QuotesHTML FundamentalsListsHTML FundamentalsText with MeaningHTML FundamentalsTrial 3HTML FundamentalsLinks & URLsHTML FundamentalsFiles, Folders & NavigationHTML FundamentalsImages & Alternative TextHTML FundamentalsFigures, Audio & Video BasicsHTML FundamentalsTrial 4HTML FundamentalsPage LandmarksHTML FundamentalsSections & ArticlesHTML FundamentalsDiv, Span, ID & ClassHTML FundamentalsAccessible NavigationHTML FundamentalsTrial 5HTML FundamentalsWhen to Use a TableHTML FundamentalsRows & CellsHTML FundamentalsCaptions & HeadingsHTML FundamentalsAccessible TablesHTML FundamentalsTrial 6HTML FundamentalsForms & LabelsHTML FundamentalsInputs & Field ValuesHTML FundamentalsMore Form ControlsHTML FundamentalsBuilt-in Validation & SubmissionHTML FundamentalsTrial 7HTML FundamentalsPlan Your WebsiteHTML FundamentalsBuild the StructureHTML FundamentalsAdd Media & FormsHTML FundamentalsValidate, Debug & ReviewHTML FundamentalsMy First HTML WebsiteHTML Fundamentals

LEXICON / CONCEPTS

BrowserAn application for opening, displaying, and interacting with web pages.HTTPA protocol for exchanging requests and responses between web clients and servers.HTMLA markup language that gives structure and meaning to web content.JSONA text format for storing or exchanging structured data.DNSA distributed naming system that associates domain names with information such as IP addresses.HTTPSHTTP using TLS to protect data exchanges in transit.ServerSoftware or a computer that provides services to clients.URLAn address identifying a resource’s location and how to access it.Domain nameA hierarchical name identifying part of the internet’s naming system.LinkA reference you can follow to a resource or another part of a document.CSSA stylesheet language for controlling web document appearance and layout.JavaScriptA programming language that can add dynamic behavior to web pages.DOMA document representation structured as objects that APIs can read and modify.JSON objectA collection of name–value pairs in JSON, written inside curly braces.ArrayAn ordered sequence of JSON values, written inside square brackets.StringA sequence of characters representing text; JSON encloses it in double quotes.CompressionA way to represent data using less space.TransparencyAn image’s ability to let the background show through fully or partially.Raster imageAn image made from a pixel grid with defined dimensions.Alternative textText conveying an image’s function or meaning when the image cannot be seen.HTML elementA unit of markup that gives content structure or meaning.HTML tagA marker in angle brackets that opens or closes an element.HTML attributeAdditional information on an element’s opening tag.HeadThe part of an HTML document that holds page metadata.TitleThe name of an HTML document, usually displayed in browser tabs and bookmarks.MetaAn element for metadata not covered by other metadata elements.Character encodingRules connecting text characters with byte representations.ViewportThe area in which a browser displays a page on a device.Void elementAn HTML element with no child content or closing tag.Character referenceA way to write a character through a named or numeric reference in HTML.HeadingThe h1 through h6 elements, which identify heading levels in document content.Semantic HTMLUsing HTML elements according to their content’s meaning and function.AccessibilityThe practice of making content and interactions usable by people with varied abilities.HTML listA structure for grouping items, with or without meaningful order.Relative pathA resource address resolved from the document’s location or base URL.Figure & figcaptionElements that group self-contained content with a visible caption.LandmarkA major page region that helps users recognize and navigate its structure.HTML tableA row and column structure presenting data with two-dimensional relationships.HTML formA group of controls that lets users enter or select data.Form labelA name explaining a form control and connected to it programmatically.HTML validationChecking markup conformance or, for forms, compliance with declared field rules.