ConceptDBISAI-written · not yet proofread

HTML Structure

Also HTML · CSS

HTML (Hypertext Markup Language) is the XML-like language that specifies the content of a web page as nested tagged elements, with meta information, style (CSS) and script includes in the head and the visible content in the body.

Formula#

Minimal valid page#

<html>
  <head>
    <meta charset="utf-8">
    <style>/* CSS rules */</style>
    <link rel="stylesheet" type="text/css" href="search.css"/>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Title</h1>
    <p id="content">Text</p>
  </body>
</html>

Key elements#

Element	Purpose	Key attributes
`<h1>`	level-1 heading
`<p>`	paragraph of text	`id`
`<div>`	arbitrary “logical” section	`id`, `class`
`<input>`	input field	`id`, `type`, `name`, `value`
`<button>`	clickable button
`<form>`	groups inputs for submission (HTML Form)	`method`, `action`
`<a>`	link	`href`
`<style>`	inline CSS definitions	placed in `<head>`
`<link>`	include a stylesheet	`rel="stylesheet"`, `href`
`<script>`	JavaScript, inline or from a file	`src` for external, `defer`
`<meta>`	meta information	`charset="utf-8"`

CSS#

CSS (Cascading Style Sheets) specifies style (layout, font, colour, …) independently of the content, in its own simple syntax selector { property: value; … }:

h1 { color: blue; font-weight: bold }    /* all level-1 headings blue and bold */
#result { background: lightgray }         /* the element with id "result" */

Cascading: when several rules apply to the same element, the most specific one wins. CSS goes into <style> in the head or into a separate file included with <link rel="stylesheet" …> (served with media type text/css).

Properties#

<head> contains metadata, styles and script references; <body> contains all visible content.
The id attribute uniquely identifies an element for CSS selectors (#id) and JavaScript access (DOM Manipulation).
The name attribute on <input> determines the query parameter key when submitted via an HTML Form.
Script placement. Inline <script>…</script> and <script src> without defer are executed as soon as they are encountered. With defer, the script runs after the whole HTML has been parsed and the DOM constructed. A script in <head> without defer cannot find body elements; put it at the end of <body> or add defer.
<meta charset="utf-8"> declares the Character Encoding of the page; if it does not match the bytes of the file, special characters are garbled (Ã¤ instead of ä).

Example#

ExampleSearch page with JavaScript (WS22/23, T4.2 pattern)

<html>
  <body>
    <h1>Search</h1>
    <input type="text" id="query" name="q"/>
    <p id="result"></p>
    <button>Go</button>
    <script src="script.js"></script>
  </body>
</html>

The script is included at the end of <body>, so the input, paragraph and button exist when it runs.

ExampleColoured heading with CSS (WS19/20, T3.1)

<html>
  <head>
    <style>h1 { color: darkblue }</style>
    <script src="webapp.js" defer></script>
  </head>
  <body>
    <h1>Title</h1>
    <input id="query"/>
    <p id="result"></p>
  </body>
</html>

The official solution has no defer; there the script itself waits for DOMContentLoaded before selecting elements.

Sources#

Slides 09, pp. 15–16 (HTML), p. 17 (CSS)
Slides 10, p. 9 (<script>, defer), p. 31 (<meta charset>)
DBIS_VL09 > HTML, DBIS_VL09 > CSS, DBIS_VL10 > JavaScript as part of the HTML, DBIS_VL10 > URL encoding and decoding
DBIS Exam WS1920 (not published) T3.1, DBIS Exam WS2122 (not published) T4.1, DBIS Exam WS2223 (not published) T4.2, DBIS Exam WS1617 (not published) T3.1

Connections

Mentioned in inline links4

DOM Manipulation
The DOM (Document Object Model) is a well-defined scheme for addressing the elements of a web page, in particular from JavaScript: the browser exposes the parsed HTML as a tree of objects. DOM manipulation means using it to (1) select elem… §
VL09 – Web Applications, Part 1
HTML (Hypertext Markup Language) specifies the content of a web page. It is an XML-like language with the general structure: §
HTML Structure — <html>/<head>/<body> skeleton and basic tags §
VL10 – Web Applications, Part 2
A script in <head> without defer runs before the <body> exists, so document.querySelector("#input") returns null. Either use defer or put the <script> at the end of <body> (see HTML Structure). §
HTML Structure — the page skeleton that JavaScript manipulates §
Web Applications
HTML Structure — page skeleton, key tags, CSS, where scripts go §

Search in these mentions →