Website remarks #1873

HTML

Trailing / for unpaired tags are a XHTML thing and are not used in HTML5

<link rel="stylesheet" type="text/css" href="style.css" />

If you want to specify the width specify the height as well. Using the width and height attributes of the image tag is primarily for reserving space on the page. I would argue that specifying a height would be more important for that than specifying the width.
Also trailing / for unpaired tags are a XHTML thing and are not used in HTML5

<img width="300" src="spawn.png" alt="Logo Your-Land"/>

What is this used for? If it's not used (by for instance a script) it should not be here.

<div id="highlight-position">
</div>

For links that lead off the current page you can better set a target attribute to open in a new tab|window

<nav>                                                                               
    <ul class="mitte">                                                                     <li><a href="https://gitea.your-land.de">Your-Land Gitea</a></li>                   <li><a href="https://gitea.your-land.de/your-land/bugtracker/issues">Bugtracker</a></li>
        <li><a href="https://twitch.tv/bailiffofhaven">Twitch Spawn Stream</a></li> 
        <li><a href="https://discord.com" target="_top">Follow on Discord</a></li>
    </ul>                                                          
</nav>

Please also put this between <p> tags

Werde auch du ein Teil von unserer Community und join unser Abenteuer Server mit Spannung und Spaß!

Okay, 3 major thing here:

Remove the outer <nav> tags as they are in the wrong place as wel as redundant
Switch the closing tags for the <section> and <nav> tags because they are in the wrong order
Remove all <p> tags around the list items. If you want to use <p> tags in a list place them in between the <li> tags, not around them

<nav>
    <section id="streamer">
        <h2>Streamer</h2>
        <nav>                                                                       
            <ul>                                                                                   <li><a href="https://youtube.com/channel/UCTcta1cn4s3vQF2g64tj6DA" target="blank">Inevas Youtube Channel</a></li>
                <p><li><a href="https://www.twitch.tv/opensource_gaming" target="blank">OpenSource_Gaming</a></li></p>
                <p><li><a href="https://www.twitch.tv/kwadroke" target="blank">Kwadroke Twitch Channel</a></li></p>
                <p><li><a href="https://www.twitch.tv/one_suit_samus" target="blank">One_Suit_Samus Twitch Channel</a></li></p>
                <p><li><a href="https://www.twitch.tv/empempires" target="blank">Empempires Twitch Channel</a></li></p>
                <p><li><a href="https://www.twitch.tv/styxcolor" target="blank">Styxcolors Twitch Channel</a></li></p>
                <p><li><a href="https://www.twitch.tv/jackofthebean" target="blank">Jackofthebean Twitch Channel</a></li></p>
                <li><a href="https://www.twitch.tv/lucien_midnight" target="blank">Lucien_midnights Twitch Channel</a></li>
            </ul>
        </section>
    </nav>
</nav>

Footers are not manditory for websites. If not used they should not be defined. The same goes for the unused <ul> tag

<footer>
    <ul class="mitte"></ul>
</footer>

CSS

Try to keep the CSS files clean by removing unused styles.

Please don't assign such styles to tags, but rather use classes or ids. You can and are using more than one <nav> tag in your page and setting such style as such can have unexpected and horrible-looking results.

nav {
    position: sticky;
    top:0px;
    backdrop-filter: blur(8px);
}

JAVASCRIPT

The entire main.js file seems dedicated to some sort of confetti system. However the element "confetti-box" is no longer an existing element on the page. Either restore the confetti-box element or unlink the javacript file.

# HTML Trailing / for unpaired tags are a XHTML thing and are not used in HTML5 ``` <link rel="stylesheet" type="text/css" href="style.css" /> ``` If you want to specify the width specify the height as well. Using the width and height attributes of the image tag is primarily for reserving space on the page. I would argue that specifying a height would be more important for that than specifying the width. Also trailing / for unpaired tags are a XHTML thing and are not used in HTML5 ``` <img width="300" src="spawn.png" alt="Logo Your-Land"/> ``` What is this used for? If it's not used (by for instance a script) it should not be here. ``` <div id="highlight-position"> </div> ``` For links that lead off the current page you can better set a target attribute to open in a new tab|window ``` <nav> <ul class="mitte"> <li><a href="https://gitea.your-land.de">Your-Land Gitea</a></li> <li><a href="https://gitea.your-land.de/your-land/bugtracker/issues">Bugtracker</a></li> <li><a href="https://twitch.tv/bailiffofhaven">Twitch Spawn Stream</a></li> <li><a href="https://discord.com" target="_top">Follow on Discord</a></li> </ul> </nav> ``` Please also put this between `<p>` tags ``` Werde auch du ein Teil von unserer Community und join unser Abenteuer Server mit Spannung und Spaß! ``` Okay, 3 major thing here: 1) Remove the outer `<nav>` tags as they are in the wrong place as wel as redundant 2) Switch the closing tags for the `<section>` and `<nav>` tags because they are in the wrong order 3) Remove all `<p>` tags around the list items. If you want to use `<p>` tags in a list place them in between the `<li>` tags, not around them ``` <nav> <section id="streamer"> <h2>Streamer</h2> <nav> <ul> <li><a href="https://youtube.com/channel/UCTcta1cn4s3vQF2g64tj6DA" target="blank">Inevas Youtube Channel</a></li> <p><li><a href="https://www.twitch.tv/opensource_gaming" target="blank">OpenSource_Gaming</a></li></p> <p><li><a href="https://www.twitch.tv/kwadroke" target="blank">Kwadroke Twitch Channel</a></li></p> <p><li><a href="https://www.twitch.tv/one_suit_samus" target="blank">One_Suit_Samus Twitch Channel</a></li></p> <p><li><a href="https://www.twitch.tv/empempires" target="blank">Empempires Twitch Channel</a></li></p> <p><li><a href="https://www.twitch.tv/styxcolor" target="blank">Styxcolors Twitch Channel</a></li></p> <p><li><a href="https://www.twitch.tv/jackofthebean" target="blank">Jackofthebean Twitch Channel</a></li></p> <li><a href="https://www.twitch.tv/lucien_midnight" target="blank">Lucien_midnights Twitch Channel</a></li> </ul> </section> </nav> </nav> ``` Footers are not manditory for websites. If not used they should not be defined. The same goes for the unused `<ul>` tag ``` <footer> <ul class="mitte"></ul> </footer> ``` # CSS Try to keep the CSS files clean by removing unused styles. Please don't assign such styles to tags, but rather use classes or ids. You can and are using more than one `<nav>` tag in your page and setting such style as such can have unexpected and horrible-looking results. ``` nav { position: sticky; top:0px; backdrop-filter: blur(8px); } ``` # JAVASCRIPT The entire main.js file seems dedicated to some sort of confetti system. However the element "confetti-box" is no longer an existing element on the page. Either restore the confetti-box element or unlink the javacript file.

Hey Elvano, thanks for the ideas. I'm going to look at it and we'll see how to implement your ideas. Feel free to send me more information in irc.

Trailing / for unpaired tags are a XHTML thing and are not used in HTML5

i suppose this is the wrong decade to root for XHTML :) i always preferred it.