Skip to content

More Text-Based Formats#

There are many more formats that are just some variation of plain text with some structure. I want to mention the following ones very superficially because they come up a lot. It is worth to at least know they exist and maybe how they look.

HTML — Hypertext Markup Language#

This one is very dear to my heart. I write and read this all the time. In fact you are currently reading this, because this is what makes the whole world wide web tick. We used to use it for documents only, but now it powers whole web applications. HTML is made up of "tags" like <title> and these can go around other pieces information like this:

<title>ER-T1 Text-Based Formats</title>

A full (but short) example of an HTML document looks like this:

example.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>This title goes in the browser tab</title>
    </head>
    <body>
        <h1>This is a headline</h1>
        <p>This is some text</p>
    </body>
</html>

XML — HTML's cousin for data#

XML looks extremely similar to HTML, because it was derived from HTML. It has a much stricter specification and is often used for data storage or transfer. If you have ever used SVG, this is a file format based on XML. If you have ever used LibreOffice or Microsoft Office (in the past 15 years) their file formats are based on XML. In fact there are literally over 200 well known file formats and languages that are based on XML. In XML you make up your own tags as you see fit.

example.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="391" height="391" viewBox="-70.5 -70.5 391 391" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect fill="#fff" stroke="#000" x="-70" y="-70" width="390" height="390"/>
<g opacity="0.8">
    <rect x="25" y="25" width="200" height="200" fill="lime" stroke-width="4" stroke="pink" />
    <circle cx="125" cy="125" r="75" fill="orange" />
    <polyline points="50,150 50,200 200,200 200,100" stroke="red" stroke-width="4" fill="none" />
    <line x1="50" y1="50" x2="200" y2="200" stroke="blue" stroke-width="4" />
</g>
</svg>

(example above was taken from Wikipedia)

YAML — Yet Another Markup Language#

This might be interesting to you because it is what Unity3d uses to store its scenes. It is also a common format for configuration files. It looks a little bit like JSON but without the curly braces.

Indentation Matters

In Java and JSON, I often urge you to use indentation correctly to help everyone see how the code is structured. In YAML, this indentation is what makes the whole format work. Instead of curly braces, the actual indentation - yes, the white space - is used to parse the document.

mkdocs.yml
site_name: 2023-WS ER-T1 SD
site_url: https://docs.claudiuscoenen.de/2023-WS-ER-T1-SD/
extra:
  # footer buttons
  social:
    - name: Moodle
      icon: fontawesome/solid/graduation-cap
      link: https://lernen.h-da.de/course/view.php?id=21136
    - name: Gitlab
      icon: simple/gitlab
      link: https://code.fbi.h-da.de
    - name: BBB
      icon: simple/bigbluebutton
      link: https://rooms.h-da.de/r?room=F18%2F014
    - name: Chat (Matrix)
      icon: simple/matrix
      link: https://chat.fbi.h-da.de/#/room/#2023-ws-er-t1-sd:matrix.fbi.h-da.de
    - name: Updates via RSS
      icon: simple/rss
      link: /feed_rss_updated.xml

This is an actual excerpt from the config file powering this website.