Insert HTML

Elements How do I…
1

In germany we need “Impressum” and “Datenschutz” Text on our website. I use a generator and it generates a very long text in html with <h1> tags an other.

How could i insert this huge text without handformatting?

<h1>Datenschutz&shy;erkl&auml;rung</h1><h2>1. Datenschutz auf einen Blick</h2><h3>Allgemeine Hinweise</h3> <p>Die folgenden Hinweise geben einen einfachen &Uuml;berblick dar&uuml;ber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie pers&ouml;nlich identifiziert werden k&ouml;nnen. Ausf&uuml;hrliche Informationen zum Thema Datenschutz entnehmen Sie unserer unter diesem Text aufgef&uuml;hrten Datenschutzerkl&auml;rung.</p><h3>Datenerfassung auf dieser Website</h3> <h4>Wer ist verantwortlich f&uuml;r die Datenerfassung auf dieser Website?</h4> <p>Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten k&ouml;nnen Sie dem Abschnitt &bdquo;Hinweis zur Verantwortlichen Stelle&ldquo; in dieser Datenschutzerkl&auml;rung entnehmen.</p> <h4>Wie erfassen wir Ihre Daten?</h4> <p>Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen. Hierbei kann es sich z.&nbsp;B. um Daten handeln, die Sie in ein Kontaktformular eingeben.</p> <p>Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website

2

I have the solution:

The HTML text isn’t formatted because h1 and other elements don’t have styles.

Simply add the following before the HTML text:

<style>
  h1 { font-size: 2em; padding-bottom: 5px; }
  h2 ....
</style>
....
3

You could also re-make it with the text of typography component so it matches the rest of your site.

4

It’s a really long text with 58 lines, 4,637 words, and 39 tags. :frowning:

My solution now looks like this: :slight_smile:

This is for documentation purposes and for others who have the same task.

I add an HTML element, insert the entire text, and enclose it with
<div id="datenschutz">...</div>
and precede it with:

<style>
    #datenschutz {
        font-size: 1em;
        color: #614636;
        margin: 0;
        padding: 0;
    }

    #datenschutz h1 {
        font-size: 1.4em;
        margin-bottom: 0.5em;
        font-weight: bold;
        line-height: 1.15;
    }
    #datenschutz h2 {
        font-size: 1.2em;
        margin-top: 1.1em;
        margin-bottom: 0.5em;
        font-weight: bold;
        line-height: 1.18;
    }
    #datenschutz h3 {
        font-size: 1.07em;
        margin-top: 1em;
        margin-bottom: 0.4em;
        font-weight: bold;
        line-height: 1.22;
    }
    #datenschutz h4 {
        font-weight: bold;
        margin-top: 0.8em;
        margin-bottom: 0.2em;
    }

    #datenschutz p {
        font-size: 1em;
        line-height: 1.7;
        margin-top: 0;
        margin-bottom: 1em;
        text-align: justify;
    }

    #datenschutz ul,
    #datenschutz ol {
        margin-top: 0;
        margin-bottom: 1em;
        padding-left: 2em;
    }
    #datenschutz li {
        margin-bottom: 0.5em;
        text-align: justify;
    }

    #datenschutz a,
    #datenschutz a:visited,
    #datenschutz a:hover,
    #datenschutz a:active,
    #datenschutz a:focus {
        color: #614636;
        text-decoration: underline;
        transition: none;
    }

    #datenschutz strong {
        font-weight: bold;
    }
</style>
1 Like