How can developers enjoy CSS

Bring structure to the website

HTML is also there to define larger structures, such as a header area, a navigation menu or the area for the main content on a website. In this article we look at how to plan the structure of a website and represent it with the help of HTML.

Prior knowledge:HTML basics as covered in Learning HTML. HTML text formatting, as covered in Simple HTML Text Formatting. How links work, as described in the Creating Links article.
Aim:Learn how to set a basic structure in a web page with HTML tags and how to design the structure of a simple web page.

Areas of a website

Web pages can look very different, but most have similar components from which they are built. You can see these components on most websites that are not video, gaming, or art projects. These components bring a good structure to any website:

header - header area
Usually this is a wide strip at the very top of the website that houses a headline along with a logo. So you can always see which website you are on, the header remains the same on all subpages.
navigation
The links to the subpages of the website are provided in the navigation, mostly in the form of buttons, simple links or tabs. This area, like the header, remains the same on all pages of the website. Sometimes the navigation is built directly into the header. Whether a separate navigation menu makes more sense is a matter of opinion.
Main content
The largest area in the center of the website that contains most of the content of a website, for example a video, story, map or newspaper article. This part of the website will differ from page to page!
Sidebar
Additional information, links, quotations, advertising, etc. This is not displayed in the main window, but is usually to the right or left of it. The content often relates to the main content. In the case of a newspaper article, the sidebar could contain additional information, information about the author or links to similar articles. Sometimes the sidebar also houses a second navigation menu or other content that is the same on all pages.
footer - footer area
A strip at the end of the website, which often provides information on legal notice, copyright and contact information in small print. It is important information for those interested, but not relevant for most website users. Sometimes a sitemap is also provided here.

A "typical website" could be structured as follows:

Structure content with HTML

The example above may not be very nice, but it is very well suited to explain the typical structure of a website. There are websites with further columns, some are a lot more complex, but you can see the basic structure well. With the right CSS applied to it, all of the elements can be made to act and look like the different areas. But as mentioned before, it is important to maintain the semantic connection between the HTML tags and to use the correct element for the job assigned to it.

This is because representations don't tell the full story behind them. We use color and font size to alert users to the most useful parts of the content, such as the navigation menu and related links. But what about visually impaired people who, for example, don't find concepts like “pink” and “large font” very useful?

Note: About 8% of people worldwide are color blind. Blind or almost blind people make up 4-5% of humanity. In 2012 that was about 285 million people, while the total population is 7 trillion people.

In the HTML code you can divide sections, depending on what they contain and which ones function fill them in. If the elements are used as described above, it helps assistive software such as screen readers to classify these elements correctly. As we discussed earlier in this course, there would be some negative consequences if the right element and the right semantics were not used for the intended job.

To write semantic markup, HTML provides some tags that can be used, for example:

Active learning: Understand the code in the example

The example above is based on the following code (You can also find this example on GitHub). Take a look at the example above and then look at the code for it below. Try to see which lines of code belong to which sections of the web page.

Take some time to look at the code and try to understand it - the comments should help you with that. We don't have too many tasks in this article because the key to understanding layout is writing a solid HTML structure and manipulating it with CSS. But we are waiting for that, because this is part of the CSS course that follows this HTML course directly.

The HTML layout elements

It is good to know all the HTML elements for the layout in detail. You will learn that over time. You can find many details in our HTML elements reference.

  • is for the main area of ​​the website and usually represents content that only on this one side you can see. should only once per website and should be used directly in and not within other elements.
  • encloses a block of coherent content that could stand without the rest of the website (e.g. a single blog post).
  • is similar to but more for grouping areas with specific functionality (e.g. a minimap or some article headings and summaries). It is good practice to start each section with a heading. You can split s into several s and vice versa, you can do both.
  • contains content that is not directly related to the main content, but can serve as additional information (biography of the author, links to further information)
  • represents a group of introductory content elements. If it is within the tag, it defines a global header area for the website, but if it is within an or element, it represents a header area only for this section with title and headings
  • contains the main navigation menu for the page. Secondary links would not belong here.
  • represents a group of content at the end of the web page.

Non-semantic containers

Sometimes there is no suitable semantic element to wrap a group of elements or content with. Sometimes you just want to create one goal with a container around certain elements that can be addressed via CSS or JavaScript. For such cases there is this and the (en-US) element. If possible, these should always have a suitable attribute by means of which they can be identified and addressed.

(en-US) is an inline element without any specific semantics. Use it only when you can't find a better inline semantic element, or when you don't want to add a prominent meaning. For example:

In this case, the note for the editor is only intended to provide extra information for the director of the play; the note has no semantic meaning. This can be displayed visually via CSS with a difference in the text display.

is a block level element without any specific semantics. It should only be used if you can't find a better semantic block level element or if you don't want to add a prominent meaning. For example a shopping cart widget that can be displayed on an e-commerce website at any time:

This is not really content for, as it is not necessarily related to the content of the main page (you should be able to see it everywhere). Also seems inappropriate as it is not part of the main content. That's why you can use it here. A heading has been added so that users with screen readers can also find the shopping cart.

warning: Divs are easy to use, but you should be careful not to use too many of them, as they have no semantic value. You really should only use them if there are no other semantic elements. If you use too many divs, it becomes difficult to update the code and work with it again later.

Line breaks and horizontal lines

Two elements that you will use over and over again are and:

represents a line break within a paragraph (

). It is the only way to get a certain structure in the text, as you need it for an address or a poem. For example:

Without the elements, the paragraph would appear on a single long line because HTML ignores whitespace. With the
Elements in the code, the paragraph is represented as follows:

There once was a girl called Nell
Who loved to write HTML
But her structure was bad, her semantics were sad
and her markup didn't read very well.

Elements create a horizontal line. This can be used to represent a thematic change. Visually, it's just a line. Example:

<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p> <hr> <p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p>

Would look like this:

The cat ran out of the house to enjoy the sun.


The dog in the house and got the food from the cat's bowl.

Planning a simple website

Once you have planned the content of a very simple website, the next step is to work out which content should be displayed on an entire website, consisting of several sub-pages. This includes planning how the individual pages should be linked to one another, what the overall layout should look like, so that the page offers the best experience for the user. This is called the information architecture. With a very large and complex website, a lot of time has to be allowed for the planning process. But for a simpler website with few websites, it's pretty easy and can be fun too!

  1. Remember which elements should be the same on all pages, e.g. the navigation menu and the footer area. If the website is for a business, then it makes sense, for example, to have the contact information on every subpage in the footer. Make a note of what should be the same on each subpage.
  2. Next, draw a rough sketch of what the structure of the website should look like on a piece of paper. Do this for each subpage of the website. Write what each of the sections is for.
  3. Now think about which content should be found on the website, which is not the same on all sub-pages. Feel free to write a big list.
  4. Next, try to divide your content into groups to get an idea of ​​what might go together on a subpage.
  5. Finally, sketch a rough sitemap - draw a circle for each subpage and draw lines to make the links between the pages clear. The start page is probably in the middle and almost all the links go to the sub-pages from it. Most of the subpages of a small website should be accessible from the navigation menu. Also make a note of how the pages should be presented.

Active learning: create your own sitemap

Try the steps above yourself, create a sitemap for your own website. What would you like to make a website about?

Note: Save your work, you may want to use it later.

Summary

Now you should have a better understanding of how websites can be structured and how to plan a website with multiple subpages in advance. The last article of this module is about finding and fixing errors in the HTML code.

So see

In this module