Separation between HTML structure and CSS style

Any Web page that you want to give a CSS design and reduce the barriers to the maximum, must contain a perfectly structured document as a base.

By clearly separating content and design, we created a document with a very marked logical structure. Everything that pertains to the content can be clearly identified as such without the need for auxiliary measures and the document, in turn, is perfectly understandable, regardless of its visual representation.

The optical representation of the contents is regulated by centralized format instructions that are saved, intelligently, outside the document itself.

Removing obstacles to have free access to the document is relatively easy and represents a giant step in the removal of barriers.

You can add extension functions to the document (for example, with JavaScript, PHP and similar), as long as they do not hinder access to the contents.

Logical structure and highlighted texts

Web pages are documents. HTML does not describe the appearance of a document or its location. HTML describes what a document is: a title, a list, an image, a table, etc. That is why HTML elements and attributes must be used correctly at the semantic level, that is, according to their meaning according to specifications.

A semantically structured HTML is the key to achieving minimum load times, independence of the platform, eliminating barriers and, not least, an impeccable design. An important example is the titles: they group parts of text and serve as orientation since they are hierarchically above the normal text. They are more important than the fluent text, so they must be declared as a title. Equally important is the hierarchy of titles. Some titles are more important than others, so they must belong to a higher level. The most important title is the first level <h1>, while the following levels <h2><h3><h4>, etc. they are his subordinates. Subtitles of equal importance should be placed on the same level.

Thus documents can be quickly read by either text browsers, screen readers or a robot. With a screen reader you can also browse titles or read them grouped by levels, for example, "all level 1 titles", "all level 2 titles", etc. In this way it is easy to get a clear and quick idea of all the contents of the text.

A correctly ranked title at the semantic level would offer this aspect:

<h1>A first level title</h1>

An incorrectly ranked title (in the semantic sense) would be, for example:

<div id="headline">A first level title</div>

Or even worse:

<p><font size="6"><b>A first level title</b></font></p>

When creating a title, what matters least, in At first, it is what font size will be used or whether it will be green or it will be bold, or exactly where it will be. The only thing that matters in the source code is that that element is a title.

Another nonsense (semantic) is to insert empty tags in the text, or any other type, simply to create a (in) certain space, for example:

<p>Here we have a paragraph of text</p>
<p>&nbsp;</p>
<p>Here we have another paragraph of text</p>

The same can be said for all other elements of the text, whether paragraphs, lists, citations, forms or tables. We should not waste time thinking about the font, size or color that we will give to an element, nor what distances it will keep regarding the contiguous elements. The important thing here is not the optical aspect, but the logical meaning, which should be recognizable by everyone: from a blind person who will read the page, or a theft-search engine for which the presentation does not count in the least.

Group the page elements

The next thing you can do is to group different parts of the document into logical blocks (containers) that can later be sorted or formatted according to the desired visual design. The division of the Web page of our example, classic and simple, is the following:

- Header
- Main menu
- Content
- Footer

Create a container for each area and identify each container with some signal, for example, assigning it an ID. The HTML <div> tag here has a special meaning. This block element has virtually no properties, since it does not define any particular paragraph or table, or anything similar; it simply delimits a certain area. In the source code it would look like this:

<body>
<div id="header">Logo</div>
<div id="menu">Main navigation</div>
<div id="content">Titles and text</div>
<div id="footer">Copyright</div>
</body>

This way you have created four areas that you can access separately using CSS.

#header {
Property value;
}

#menu {
Property value;
}

#content {
Property value;
}

#footer {
Property value;
}

#header {
Property value;
}

The contents of these containers can also be made accessible and designed in relation to the context, for example:

#content h1 {
Property value
}

#content p {
Property value
}

With these last two instructions we only take titles (<h1>) and the paragraphs (<p>) that appear inside the container with ID content.

Naturally, containers can also be nested, that is, we can create containers inside containers. But we must seriously ask ourselves beforehand if you really need containers inside containers, or if the semantic structure of the content is not enough. Remember that we want to keep the source code as clear and reduced as possible. With a multiple nesting of containers <div>, for example, it is superfluous that in most cases, since we can obtain the same result by other means, for example by directly formatting the elements we want to link.

Without barriers

Consider the Web page again from a conceptual point of view. By deciding to follow the standards, you have already taken the most important step in removing barriers, because it is implicit that you want to give full accessibility to your page. That is why it is worth taking another step and considering what else could be done to eliminate barriers. There are inveterate prejudices against the creation of web pages without barriers, but without prejudices that, when analyzed, vanish like the false beliefs that they are.