Introduction
Website layout is a very structured, blocky design system. That’s not just a subjective opinion; it’s inherent to HyperText Markup Language (HTML), the code of that makes all websites. Many novices bring a print-design mentality to website content and layout. That’s a mistake. Instead, I suggest you organize, visualize, and create content in sequential blocks.
Why is this important?
When you edit content on a site, you edit at least some of the HTML block elements in the content of your site. HTML is supposed to work in specific ways that make content machine readable. Machine readability is important to search engine optimization (SEO), accessibility, and artificial intelligence optimization (AIO, also called generative engine optimization, GEO).
More generally, seeing content as blocks helps writers and editors create content for the blocky nature of HTML.
Let’s use an analogy: if you’re designing a business card, you know you can’t include hundreds of words and lots of pictures; you work within the constraints of the small format. Website content has constraints because of how HTML works. In HTML, everything is a block or is contained in a block, and those blocks are in a static order. (See below.) Some blocks elements have important meanings and should be used correctly, particularly headlines. (See this section Follow Heading Specifications in another post for more information about headlines.)
When you understand that many things are blocks, you can create content that better fits the format of HTML. It can also improve several performance metrics for your content.
Differences Between Print Layout and Webpage Layout
Here are some important differences between print layout and webpage layout.
| Print Layout and Design | Webpage Layout and Design |
|---|---|
| Layout is significantly free-form. Content can blend with backgrounds and flow around graphics. | Most visual elements including text are blocks. Content blocks are sequential, not free-form, even when they look free-form. |
| Print typically has one priority: visual reading by humans. | Websites have several priorities: visual reading by humans, code reading by machines like search engines and screen readers, page speed, compatibility with different screen sizes. |
| Content never moves or resizes once printed. | Content blocks resize, visually rearrange, and restack differently at different screen sizes. |
| Print does not have widely accepted preferences and specifications for content, sequence, and styling. | HTML, the code of all websites, has worldwide specifications and conventions for content blocks, styling, search engine optimization (SEO), accessibility, and more. The specifications should be followed. |
On Websites, Everything Is a Block or is Contained by a Block
When editing webpage content and how it’s arranged on screen, you have two general kinds of elements:
- block elements
They take up space like blocks, often stacking, creating a new line, and filling the width of an area. This includes paragraphs, headlines, and lists. It also includes images, tables of data, content sections, as well as page headers and footers. - inline elements
These elements do not create a new line. Inline elements behave like letters, words, and punctuation. They flow like text and are usually within text.
Even when a website editing system gives the option to point-click-drag items around the screen, those systems create CSS styles and arrange HTML blocks in some order to create the on-screen layout.
Definition of Style
Before the next section, I want to define two terms. In the context of web design, the word style has several meanings.
- Visual Style
This refers to what people see and perceive on screen.
- Technical Style
This refers to the many settings in cascading style sheets (CSS), which is the code that applies visual styles to websites. Most CSS settings have a direct or indirect effect on visual styles.
Not everything perceived as a visual style is a technical style. For instance, the HTML elements strong, bold, and em are used in text and they include default visual styles that make them look bold and italic. The elements themselves are not CSS styles, so they are not what I call technical styles.
When I use the word style in this article, I’m referring to technical styles (CSS settings) unless I specify visual style.
Styles Apply to Blocks
Blocks can be styled with colors, fonts, borders, and more. A block’s style sometimes applies to everything contained by the block and sometimes not.
For instance, when an article element has a 20 pixel font size and 1 pixel border around it, the font size applies to all text in the article element, but the border applies to the article block as a whole and not the individual words and letters.
Many Important Text Elements are Blocks
This idea is not obvious, and it can be a little confusing: Every paragraph is a block. Every headline (HTML heading) is a block. Every list is a block. Every list item is a block.
They can be rearranged when editing content, but the sequence generally doesn’t change and shouldn’t change in the code delivered to readers. (On the other hand, I’ve been doing this long enough to bet that there are cases where you could or should use something like JavaScript to rearrange them. But generally not.)
Text Block Styles
In most website editing systems, with the cursor in a paragraph, changing a font size changes the font size for the entire paragraph. That’s because that change is applied to the entire paragraph block, not just the text at the cursor.
Like other blocks, some styles apply to everything contained by the text block and sometimes the styles apply to the entire text block. For instance, when a heading element has a 20 pixel font size and 1 pixel border around it, the font size applies to every letter and word in the headline, but the border applies to the heading block as a whole.
Styles Can Apply Site Wide Automatically
This way of applying styles to HTML elements has a useful advantage: Many styles can be applied and edited for the entire site. So you can easily change the color of all headlines, or the border on all images, or the paragraph text size for the entire site automatically. WordPress and most website editing systems have settings like this.
Applying styles site wide can get into lots of details about how HTML and CSS work. It’s beyond this article. Just understand that this is another advantage of understanding and working within the blocky format of HTML.
Website Content Has Been Blocks Since the 1990s
The concept of “blocks” is more than a fleeting buzzword. It’s exactly how web pages have worked since the 1990s. Basic text elements like paragraph, headlines, and lists predate HTML and were taken from Standard Generalized Mark-up Language in the early 1990s. Source By 1999, HTML defined text and other elements as block-level elements.
So today, when you edit content on any website editing system, you’re editing with blocks. Even when you use a website system that let’s you click and drag elements around a page, the system creates blocks and styles to try to create that layout on screen. Usually that means inserting lots of extra HTML and CSS code to create the visual appearance. Sometimes that puts things in the wrong order in the code or bloats the site with extra code.
Conclusion: Think In Blocks
My short advice to non-experts is this: Think in blocks when editing website content for all the reasons above.
There’s more nuance in CSS styles and HTML (look up display settings if you want), but for typical website owners and editors, just realize almost everything you add to a site is a block to Google, screen readers, and browsers. Understand content as blocks to create content for better SEO, accessibility, and performance.
