HTML Basics: Visual formatting vs. logical markup of text with HTML tags

Format text

Logical text markup refers to marking of single words or entire sections of text to highlight them semantically (or logically) in the text. The most important types of text markup are:


Format text using logical or physical markup

Text on webpages can be marked up using HTML tags to highlight it visually, e.g. in bold or italics. There is a difference between logical (semantic) markup and physical (visual) markup.

These two types of markup usually have the same visual appearance. However, semantic markup gives the text a special (content-related) meaning. This is not the case with visual markup.

Text on a webpage should always be marked up logically according to its content-related meaning. This has the following advantages:

  • Accessibility:
    Visually impaired people can read the text on webpages using a screen reader. If the text is logically marked up, then the layout, structure and content of the website is easier to understand.

    If you set the font size for normal text with CSS so that the text looks like a heading, then a user can assume that the text is supposed to be a heading when viewing the page on the screen. However, blind or visually handicapped people cannot recognize this. For them, it is just normal text without any special weighting or emphasis.

  • Reading by a search engine crawler:
    The inclusion of a webpage in the index of search engines is usually done by so-called spiders or bots. These are programs that crawl the web independently and add webpages to the search engine index. In order to recognize the structure and content of a page, they logically evaluate the content, including the HTML tags.

  • Reading by other programs:
    What applies to search engines is also significant for other programs that analyze a webpage. Social Networks usually display a headline and a short preview of the webpage when a link is shared.