Structure
Here is the general idea the structure of a web page. Let's say you want to build a multi-story house. It is easy to lay bricks on the ground floor to build a wall, but to reach the second floor you need a scaffold. A scaffold gives you structure to hold onto. Assembling multiple HTML elements in a web page creates a similar scaffold where further content can be attached to or fit in.
Continuing with the house metaphor, you can also think about it as the rooms in a house as shown in the image below. Each room in a house serves a specific purpose: you have a kitchen, living room, bedroom, maybe even a gym etc. Therefore, furniture and objects are grouped into these thematically rooms. Most people only cook in their kitchen and not elsewhere. Besides a bed there typically is a wardrobe in the bedroom and you often find a couch and TV in a living room.
The rooms of a building and high-level elements of a web page are containers for smaller pieces (furniture or elements respectively). They define the structure and give each area a purpose and meaning.
Note: the image above serves an illustrative purpose. To actually accomplish a web page that looks similar, you would need to apply styling with CSS that moves the <aside>
to the right, and sets the background color to light brown and a dark brown border (outline).
In a similar fashion, you define areas on a web page that serve a specific purpose and describe the meaning of the area. Such areas could be a header at the top of the page, a main area in the middle and a footer at the bottom for example. In each of these larger areas smaller elements fit in. Inside the header could be a navigation that contains itself a list of links to other web pages. The main area could contain a newspaper-style article or a blog post with headlines, paragraphs, images etc. And the footer could link to social media sites and an imprint page as well as show contact information.
Before building a website you have to consider the demands and features comparable to planning building a house. Just instead of asking...
...if you need a second bathroom, how many kids you are going to have or if you can afford a gym or recreational room you are asking questions like: what kind of content should be presented? Should visitors be able to reach me via a contact form? Do you want to sell products in an online shop? Do you need a blog with features additional features (listing every article, tagging articles with keywords, giving different authors access to a Content Management System with editing access and a writing tool) And so on and so forth... The page TODO goes into more detail about this topic.
By the way, a more technical term to describe this process of considering needed features is called requirement analysis, a standard practice in (software) engineering.
The notion of structure can also be approached from a design-oriented perspective. The headings, paragraphs, images etc. in a newspaper or magazine are placed and organized in an ordered and intentional way. In both print media and web programming the resulting structure of lay-ing out the content on a page is called layout. So, with HTML you define what elements shall appear on a web page, in which order they are arranged, so basically the flow of elements from top to bottom.
Typically a web page has a hierarchical structure. As above-mentioned there might be large elements that differentiate a page into the most important areas like rooms in a building. Then inside of each of these areas are smaller building blocks. These smaller building blocks can contain even smaller ones and so on, like Matryoshka dolls. Putting HTML elements inside of another element is called nesting
On the smallest level, individual heading HTML elements define a hierarchy as well. The <h1>
tag defines the largest headline on page. It is also supposed to be only used once on a page. A sub-heading can be defined with <h2>
and is a bit smaller then <h1>
. Heading tags <h3>
, <h4>
and so on are smaller and smaller until <h6>
which is the smallest. The heading tags <h2>
- <h6>
can be used multiple times on a page. Using proper headings does not only serve stylistic purpose but is also important for semantics and accessibility. Assistive tools like screen readers allow users to navigate and jump through the largest headings until a particularly interesting section, where the user can drill-down into the details or jump through the sub-sub-headings.
Another noteworthy aspect is that the HTML structure is relevant for styling pages with CSS. Once you learn about nesting and wrote some HTML code yourself, you can learn how the structure and flow of HTML elements interacts with the styling of a page (To foreshadow: e.g. the arrangement and nesting of elements must be held in sync with particular CSS selectors and the displayed position of elements on a page doesn't necessarily have to be the same as the flow of elements in HTML).