` section of an HTML document?", "acceptedAnswer": { "@type": "Answer", "text": "The `` element within the `` section is used to provide metadata about the HTML document, such as character encoding, description, keywords, and viewport settings, which are important for browsers and search engines." } }, { "@type": "Question", "name": "What is the purpose of the `id` attribute in relation to URLs?", "acceptedAnswer": { "@type": "Answer", "text": "When appended to a URL (e.g., `https://en.wikipedia.org/wiki/HTML#Markup`), the `id` attribute provides a globally unique identifier for a specific element within the page, allowing direct linking to that section." } }, { "@type": "Question", "name": "What is the difference between named and numeric character references?", "acceptedAnswer": { "@type": "Answer", "text": "Named character references use a mnemonic name (e.g., `©` for the copyright symbol), while numeric character references use the character's numerical Unicode value (e.g., `©` for copyright). Both allow characters to be represented in HTML markup." } }, { "@type": "Question", "name": "What is the purpose of the `dir` attribute in HTML?", "acceptedAnswer": { "@type": "Answer", "text": "The `dir` attribute specifies the text direction for an element, commonly used for right-to-left languages like Arabic or Hebrew by setting its value to `rtl` (right-to-left)." } } ] ] } ] Html Wiki: The Architecture of the Web: A Deep Dive into HTML
This is an educational resource based on the Wikipedia article on HTML. Read the full source article here. (opens in new tab)

The Architecture of the Web

Understanding Hypertext Markup Language (HTML): The Foundational Language of the Internet.

Explore History ๐Ÿ“œ Discover Markup ๐Ÿ“

Dive in with Flashcard Learning!


When you are ready...
๐ŸŽฎ Play the Wiki2Web Clarity Challenge Game๐ŸŽฎ
` section of an HTML document?", "acceptedAnswer": { "@type": "Answer", "text": "The `` element within the `` section is used to provide metadata about the HTML document, such as character encoding, description, keywords, and viewport settings, which are important for browsers and search engines." } }, { "@type": "Question", "name": "What is the purpose of the `id` attribute in relation to URLs?", "acceptedAnswer": { "@type": "Answer", "text": "When appended to a URL (e.g., `https://en.wikipedia.org/wiki/HTML#Markup`), the `id` attribute provides a globally unique identifier for a specific element within the page, allowing direct linking to that section." } }, { "@type": "Question", "name": "What is the difference between named and numeric character references?", "acceptedAnswer": { "@type": "Answer", "text": "Named character references use a mnemonic name (e.g., `©` for the copyright symbol), while numeric character references use the character's numerical Unicode value (e.g., `©` for copyright). Both allow characters to be represented in HTML markup." } }, { "@type": "Question", "name": "What is the purpose of the `dir` attribute in HTML?", "acceptedAnswer": { "@type": "Answer", "text": "The `dir` attribute specifies the text direction for an element, commonly used for right-to-left languages like Arabic or Hebrew by setting its value to `rtl` (right-to-left)." } } ] ] } ] ` section of an HTML document?", "answer": "The `` element within the ` ` section of an HTML document?", "acceptedAnswer": { "@type": "Answer", "text": "The `` element within the `` section is used to provide metadata about the HTML document, such as character encoding, description, keywords, and viewport settings, which are important for browsers and search engines." } }, { "@type": "Question", "name": "What is the purpose of the `id` attribute in relation to URLs?", "acceptedAnswer": { "@type": "Answer", "text": "When appended to a URL (e.g., `https://en.wikipedia.org/wiki/HTML#Markup`), the `id` attribute provides a globally unique identifier for a specific element within the page, allowing direct linking to that section." } }, { "@type": "Question", "name": "What is the difference between named and numeric character references?", "acceptedAnswer": { "@type": "Answer", "text": "Named character references use a mnemonic name (e.g., `©` for the copyright symbol), while numeric character references use the character's numerical Unicode value (e.g., `©` for copyright). Both allow characters to be represented in HTML markup." } }, { "@type": "Question", "name": "What is the purpose of the `dir` attribute in HTML?", "acceptedAnswer": { "@type": "Answer", "text": "The `dir` attribute specifies the text direction for an element, commonly used for right-to-left languages like Arabic or Hebrew by setting its value to `rtl` (right-to-left)." } } ] ] } ] ` section is used to provide metadata about the HTML document, such as character encoding, description, keywords, and viewport settings, which are important for browsers and search engines." }, { "question": "What is the purpose of the `id` attribute in relation to URLs?", "answer": "When appended to a URL (e.g., `https://en.wikipedia.org/wiki/HTML#Markup`), the `id` attribute provides a globally unique identifier for a specific element within the page, allowing direct linking to that section." }, { "question": "What is the difference between named and numeric character references?", "answer": "Named character references use a mnemonic name (e.g., `©` for the copyright symbol), while numeric character references use the character's numerical Unicode value (e.g., `©` for copyright). Both allow characters to be represented in HTML markup." }, { "question": "What is the purpose of the `dir` attribute in HTML?", "answer": "The `dir` attribute specifies the text direction for an element, commonly used for right-to-left languages like Arabic or Hebrew by setting its value to `rtl` (right-to-left)." } ]; let currentCardIndex = 0; const flashcardQuestion = document.getElementById('flashcardQuestion'); const flashcardAnswerContainer = document.getElementById('flashcardAnswerContainer'); const flashcardAnswer = document.getElementById('flashcardAnswer'); const revealButton = document.getElementById('revealButton'); const nextButton = document.getElementById('nextButton'); const restartButton = document.getElementById('restartButton'); const flashcardCard = document.getElementById('flashcard'); const flashcardEndMessage = document.getElementById('flashcardEndMessage'); function displayCard() { if (flashcardData.length > 0 && currentCardIndex < flashcardData.length) { flashcardQuestion.textContent = flashcardData[currentCardIndex].question; flashcardAnswer.textContent = flashcardData[currentCardIndex].answer; flashcardAnswerContainer.classList.remove('is-revealed'); flashcardAnswerContainer.style.maxHeight = null; flashcardCard.style.display = 'flex'; flashcardEndMessage.style.display = 'none'; revealButton.style.display = 'inline-block'; nextButton.style.display = 'none'; restartButton.style.display = 'none'; revealButton.setAttribute('aria-expanded', 'false'); } else { flashcardCard.style.display = 'none'; flashcardEndMessage.style.display = 'block'; restartButton.style.display = 'inline-block'; nextButton.style.display = 'none'; revealButton.style.display = 'none'; } } function revealAnswer() { flashcardAnswerContainer.classList.add('is-revealed'); flashcardAnswerContainer.style.maxHeight = flashcardAnswerContainer.scrollHeight + "px"; revealButton.style.display = 'none'; nextButton.style.display = 'inline-block'; revealButton.setAttribute('aria-expanded', 'true'); nextButton.focus(); } function nextQuestion() { currentCardIndex++; displayCard(); const flashcardSection = document.getElementById('flashcardSection'); if (flashcardSection) { const header = document.querySelector('.main-header'); const banner = document.querySelector('.source-banner'); const headerHeight = header ? header.offsetHeight : 0; const bannerHeight = (banner && getComputedStyle(banner).position === 'sticky') ? banner.offsetHeight : 0; } } function restartFlashcards() { currentCardIndex = 0; displayCard(); } revealButton.addEventListener('click', revealAnswer); nextButton.addEventListener('click', nextQuestion); restartButton.addEventListener('click', restartFlashcards); displayCard(); });

A Chronicle of HTML

Genesis: Tim Berners-Lee

The conceptualization of HTML began with Tim Berners-Lee, a physicist at CERN, in 1980. His initial proposal for an Internet-based hypertext system in 1989 laid the groundwork. By late 1990, he had specified HTML and developed the first browser and server software.

Early Standards and Evolution

The first public description of HTML, "HTML Tags," emerged in 1991, detailing 18 initial elements. HTML was initially an application of SGML, with early specifications developed by the IETF. Key milestones include HTML 2.0 (1995), HTML 3.2 (1997), and HTML 4.01 (1999).

  • 1993: First HTML Internet Draft.
  • 1995: HTML 2.0 published as a standard.
  • 1997: HTML 3.2 standardized by W3C.
  • 1999: HTML 4.01 released, introducing Strict, Transitional, and Frameset variations.
  • 2000: ISO/IEC 15445:2000 standardizes HTML 4.01.
  • 2008 onwards: HTML5 development begins with WHATWG and W3C collaboration.
  • 2014: HTML5 officially published as a W3C Recommendation.

Standardization Bodies

The World Wide Web Consortium (W3C) initially maintained HTML standards from 1996. Later, the Web Hypertext Application Technology Working Group (WHATWG) took the lead, with HTML5 becoming a joint deliverable and WHATWG eventually becoming the sole publisher of HTML and DOM standards.

The Anatomy of Markup

Core Components

HTML documents are structured using elements, denoted by tags enclosed in angle brackets. These tags can be paired (start and end tags) or be empty elements. Attributes within start tags provide additional information about the element.

Tags and Elements

Elements are the fundamental building blocks. For example, `

` is a start tag for a paragraph element, and `

` is its end tag. Empty elements like `
` or `` do not have content and are self-closing.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <br> <!-- Line break -->
  </body>
</html>

Character and Entity References

HTML supports character entity references (e.g., `&amp;` for `&`) and numeric character references (e.g., `&` for `&`) to represent special characters or characters not easily typed. This is crucial for displaying characters like `<`, `>`, and `&` within content.

Essential Elements

Structural Elements

HTML defines elements for document structure, such as headings (`

` to `

`), paragraphs (`

`), lists (`