OER - Open Educational Resources
Content Strategy Knowledge Base

HTML beginner
Learning.com
Contributors
Rosa Winkler-Hermaden
Rosa Winkler-Hermaden
Sophie Vesely
Sophie Vesely
Topics

HTML for Content Strategists: Why Content Strategists Should Understand HTML

Originally published: 27 February 2021
Last updated: 27 April 2023

Read time: 7 minutes

Why should content strategists know anything about HTML, CSS, and Javascript? At the beginning of his course on frontend technologies, Heinz Wittenbrink justified why we should learn about angle brackets and alt attributes. The discussion is still ongoing.

This lecture is intended for content strategists who are considering the depth of their involvement with the technical aspects of digital content and HTML in particular. It explains what HTML is and where content strategists may encounter it in practice. It explains why knowledge of HTML is a good basis for dealing with content management.

Code 1076536 1920

istock

What is a semantically marked-up text?

What is a semantically correctly marked-up text? What distinguishes it from a non-semantically marked-up text? And what does that mean for me as a content strategist?

A semantically tagged text contains information about the function of the parts of its content for the user or reader. This information is independent of a particular visual (or even aural) implementation or design. The text retains this information even if that design changes.

From the user’s point of view, it means that the content is accessible in different ways, and I, as a user, can choose my access. In addition, the design of the text can be more differentiated than in a non-semantically labeled text.

A very simple first example: Main headings are marked up in HTML with the tag h1. Graphically, they are emphasized by larger and bolder letters, often also by their own font, as is usual in print media.

What are the advantages of using the h1 tag? First of all, it simply means that the headline is comparable to all other headlines. In addition, I can change the font if, for example, I only have a much smaller screen available. So the headline can be designed independently of the situation. A screen reader can indicate by announcements like heading and end of heading that the heading begins and ends. A search engine can use the heading highlighted by h1 to display search results. It will also be clearly recognizable as a heading in an RSS feed. So by semantic markup, I have:

  • ensured consistency and comparability,
  • increased the responsiveness of my content,
  • supported its accessibility,
  • made it easier to find (search engine optimized).

Why should I, as a content strategist, be able to read my document in the source code, i.e., recognize that it is properly marked up? One reason is that only a person competent in content can tell if the markup of the words as headings is correct. A second reason is that only an overview of the markups can tell me if perhaps another markup would be even better or more accurate. So knowing the honors helps me arrive at a decision that is accurate in terms of content.

What are the disadvantages of not being able to check in the source code whether the h1 markup is correct or of not being able to markup the text correctly myself? I have to adequately describe to a software or human that does this markup that it is a first-order heading. So I have to do exactly the same thing as with the h1 markup, only more awkwardly. But in order to specify the correct markup, I need to know the possible exclusions - that is, I need to know, for example, that there are headings between h1 and h6. In other words: Content-adequate markup must come from people who understand the content, and when it comes to a large number of texts, that can only be the content strategists.

Thus, mastering HTML does not mean being able to use a complicated technology but a relatively simple notation. This notation provides information about the tasks that certain parts of the text perform for their users so that these tasks can be implemented by the right visual and acoustic means, depending on the context. The other characteristics of HTML, at least from the point of view of content experts, are to support this notation and to be able to reuse the annotated texts as easily as possible. That is why only simple text files are used for HTML documents, that is why these notations follow some simple rules, so that it is easy to check whether a text is syntactically correct. And that is why it is hierarchically structured so that it can be easily processed digitally. But we don’t have to deal with that yet in this lecture.

So the HTML notation is something like an interface, or better: a cut layer between the communicative content and the strings in which it is stored and which are processed by machines. Because these notations must be adequate in terms of content, it must be possible to make or at least control them from the point of view of content. And because it depends on the available notations as a whole how adequate a certain notation is (e.g., one can only choose between six CLasses of headings), one needs an overview of these notations in order to be able to decide on the correct markup.

The web is one of the most important channels for digital content. At the same time, however, it is a platform for its own types of content because linked information that can also be further linked will only exist on the Web. In order to understand this special role of the Web for content, one must understand its special properties as a digital platform and, thus, above all, the design of HTML, the language for Web content and Web applications. Without this knowledge, one cannot judge whether one's own content actually exploits the possibilities of the web and will optimally reach current and future users.

Black screens on which many small white, green, yellow, or red characters flicker. Numbers, angle brackets, and commas are displayed. For many, it is a big question mark what exactly programmers and software developers have in front of them when they are writing code. Most of the time, it is shyness or perplexity that prevents one from asking more questions. Or one acts according

Yet the programming shortcuts in the background are the be-all and end-all of every website. Without programming, nothing works on the web. And even if people who publish texts and images on the internet rarely actually come into contact with the codes, for example, the programming language HTML, it is worth taking a look at them, according to the lecture "Digital Publication Platforms."

Exchange ideas with technical staff

After all, part of the job profile of a content strategist is to commission and accompany the development of content management systems and design applications, or at least supervise them and adapt them for one's own use. Often it is just a matter of making small adjustments. Especially then, one should be able to exchange ideas with the technicians and know which vocabulary is best to use. After all, you want to be understood with your wishes and goals.

Women 1209678 1920

istock

At least that is the argument of Heinz Wittenbrink, long-time head of the Master's program in Content Strategy at the FH Joanneum and currently a lecturer. In his lecture, he shows the most important basics of programming - and wants one thing above all: for the students to get to grips with it themselves. They are supposed to create a small website project themselves, which doesn't have to be so much about the content. But the website should contain what can be done with relatively little effort. Text, headlines, subtitles, pictures, captions, links to each other, and links to external sites. A real structure. You can find plenty of suggestions on how best to get started on the web. But more on that later.

First, it is worth taking a look at Wittenbrink's curriculum vitae to understand how a content person can develop a passion for the web and publishing there. Wittenbrink started his early career in book publishing. As far as publishing on the internet is concerned, he is considered an early adopter. He experimented in this field as early as the 1990s and implemented his first projects. For example, in the conception of the encyclopedic platform Wissen.de or in the development of a B2B portal in the field of electronic publishing for Bertelsmann.

At that time, there were neither ready-made online editorial systems nor simple, easy-to-understand instructions on how to proceed. Wittenbrink probably had to learn the basics of programming in order to do justice to his tasks. And he obviously recognized the added value in it: that good things can come about when content creators can exchange ideas with technicians on an equal footing.

Useful guides

Today, the web is full of guides that quickly teach you HTML. The page develpoper.mozilla.org, recommended by Wittenbrink, shows how a typical HTML page and an HTML element are structured, and what the head and metadata are about. It also shows how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.

Why structuring the text is important is explained on another page there: Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings, to begin with. If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.

Important for search engines

The role of search engines also weighs heavily and must be taken into account when coding HTML: Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of SEO (Search Engine Optimization).

Seo 758264 1920

istock

German-language sources for self-study of the code also exist. The aim of selfhtml.org is to provide documentation on HTML and related technologies. It is intended to introduce beginners to the creation of websites in accordance with the current state of the art, but also to serve as a reliable reference work for advanced users and professionals. Clearly arranged in a wiki, those interested will find everything they are looking for in HTML. Hardly any question remains unanswered. You can work your way from one HTML term to the next via numerous links.

Fundamental in design, but no less in-depth in content, is the site html.spec.whatwg.org, which is constantly updated.

And when you're through with the instructions? Then hopefully, the following sentence by Wittenbrink applies: "You have to be able to understand the core of HTML." Then, he says, it is "no witchcraft" to control what may be the responsibility of other members of an organization or company - to handle the technical stuff in the background. Because, as is often the case, you can't become an expert in everything. But a little control is always helpful, and being able to have a say doesn't hurt anyway.

Where to go from here

A manifest for content-centered web development: Resilient Web Design by Jeremy Keith

References

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals

https://www.selfhtml.org/

https://html.spec.whatwg.org/

Anna Turner, Elena Soroka, Shkëndie Sopa, Rebecca Trebus, Iida Sirviö, Atti Moradi