Most common used semantic HTML elements are listed below. The Nijmegen design system supports these elements with a default style.
    To use these elements, you can add the class `nijmegen-html` to your wrapping HTML element for example the body element.

    <code style="white-space: pre-wrap;margin-block: 1rem;display:block;">
    &#x3C;body class=&#x22;nijmegen-theme nijmegen-html&#x22;&#x3E;
        &#x3C;h1&#x3E;Lorem ipsum dolor sit amet&#x3C;/h1&#x3E;
    &#x3C;/body&#x3E;
    </code>
    <a href="https://gemeentenijmegen.github.io/design-system/?path=/docs/foundations-semantic-html-supported-semantic-elements--docs" target="_blank">View the Nijmegen Desing System documentation for all supported elements</a>
<div class="nijmegen-html nijmegen-theme">
    <hr>
    <h4>h1 - h6</h4>
    <h1>Lorem ipsum dolor sit amet</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
    <h3>Lorem ipsum dolor sit amet</h3>
    <h4>Lorem ipsum dolor sit amet</h4>
    <h5>Lorem ipsum dolor sit amet</h5>
    <h6>Lorem ipsum dolor sit amet</h6>
    <hr>
    <h4>Paragraph</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <hr>
    <h4>Link</h4>
    <a href="#">Lorem ipsum dolor sit amet</a>
    <hr>
    <h4>Link list</h4>
    <ul class="nijmegen-html-linklist">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    </ul>
    <hr>
    <h4>Unordered list</h4>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Unordered item with <a href="#">link</a></li>
        <li>Nested:
            <ul>
                <li>Nested 1</li>
                <li>Nested 2</li>
            </ul>
        </li>
    </ul>
    <hr>
    <h4>Button</h4>
    <button>Lorem ipsum dolor sit amet</button>
</div>