HTML CSS fieldset oder nicht fieldset / Das ist hier die Frage

[D0bby]

Moin

ich brauch mal input aus der echten Welt. Ich habe gerade eine Übungsseite und möchte dort eine Skill-Card machen.
Alles in einem 8Bit Retro Theme und deshalb soll auch über der Card quasi der Name stehen und die Border genau in diesem Berreich unterbrochen werden.

Nun bekomm ich das recht Simpel hin via fieldset - nur ist das so korrekt? Denn eigentlich gehören da ja nur Formulare etc. rein.
Überdenke ich da das Thema Semantik und einfach nutzen oder da jetzt deutlich mehr aufwand und gucken wie ich es anders löse?

            <fieldset class="retro-box">
                <legend class="retro-title">Skills</legend>
                <div class="retro-content">
                    <p>HTML</p>
                    <p>CSS</p>
                    <p>JavaScript</p>
                </div>
            </fieldset>

.retro-box {
  position: relative;
  width: 300px;
  border: 2px solid white;
  padding: 1rem;
  background-color: rgba(255, 255, 0, 0.05);
  font-family: 'Press Start 2P', cursive;
  margin: 3rem auto;
}

.retro-title {
  color: white;
  font-size: 0.8rem;
  padding: 0 0.5rem;
}

 

[Wo bin ich hier]

Tja du bist wohl nicht alleine mit der Frage: https://www.google.com/search?q=fieldset+without+form

Es ist nicht verboten und es funktioniert. Ich halte es dennoch für recht unschön, da ein Fieldset zur Strukturierung dient und du es als dekoratives Element "missbrauchst".

 

[User007]

Hi...

Einfach nutzen, was für Dich praktikabel zur Zielerreichung erscheint - es wird sowieso zu viel Relevanz in die "Auszeichnungskonformität" gelegt, der Browser muß nur den Code interpretieren können. 🤷‍♂️
Das Element ist lt. Spezifizierung nur an "flow content" gebunden und kann ansonsten frei genutzt werden - mit dem Attribut disabled kann es auch von jeglicher "Aktivität", bspw. als interagierendes Formular-Element, ausgeschlossen und nur mit szs. visueller Funktion belegt werden.
Hab' ich auch schon so "mißbraucht". 😉
​

Btw.:

Die Semantik steht jeweils der Syntax (in der Semiotik meist: „Syntaktik“) gegenüber, bei der es um die Kombination von Zeichen zu größeren Einheiten geht, und ferner der Pragmatik als der Theorie der Zeichenverwendung. Eine klare Abgrenzung ist aus verschiedenen Gründen umstritten.​

 

[Wo bin ich hier]

der Browser muß nur den Code interpretieren können

Ich würde das Thema "SEO" nicht ganz außen vor lassen. Ich kann mir gut vorstellen, dass die Crawler durch sowas auch verwirrt werden könnten.

 

[D0bby]

Stand jetzt "genau so verwirrt wie vorher".

Ich glaub ich werd es jetzt erst mal so weiter machen, da mich das sonst zu lange aufhällt - ABER im hinterkopf behalten. Denn ich habe auf der Seite ein Hintergrund IMG und über die sonst typischen lösungen bekomme ich einen Hässlichen Balken an dem span Title

 

[Tornhoof]

Ich hab ehrlich gesagt noch nie Fieldset ohne Form gesehen.

 

[sh.]

Meinst du sowas in etwa:
https://jsfiddle.net/j5g3fy1w/

 

[D0bby]

Meinst du sowas in etwa:
https://jsfiddle.net/j5g3fy1w/

genau so meine ich dass - aber es zeigt auch genau mein Problem auf.
Du änderst ja mit .card-title quasi nur den Hintergrunde und bekommst so eine Unterbrechung.

Wenn die Website jetzt aber einen Hintergrund hat der Struktruriert ist oder ein img etc. dann klappt diese Methode nicht mehr und du brauchst eine echte Unterbrechung.
Ich denke Man könnte das via Border left right bottom machen und dann before und after sich da ein strich dran basteln. Aber geil find ich das nicht^^

 

[sh.]

Du änderst ja mit .card-title quasi nur den Hintergrunde und bekommst so eine Unterbrechung.

klar, meine "Lösung" wäre nur ein optischer Trick. Aber ich befürchte es gibt noch keine echte Lösung mit einem HTML-Element mit dem man das machen kann.

 

[steff0rn]

Ich würde das Thema "SEO" nicht ganz außen vor lassen.

Jein. Natürlich spielt sauberer Code am Ende auch mit in das Ranking rein, aber rein vom Bauchgefühl her würde ich jetzt vermuten, dass es hier erstmal nicht um Position 1-Rankings geht.

Gibt jedenfalls sehr viele, sehr große Seiten mit fürchterlichem Code, die dennoch die besten Rankings haben. Solang der Code am Ende nicht komplett "für'n A*sch" ist, ist das jedenfalls zu vernachlässigen

 

[n/a]

"SEO"

Jagt die Seite durch: https://validator.w3.org (geht mittlerweile auch mit Rechtsklick auf der Seite...)

Das zeigt grobe SEO-Schnitzer an, so vorhanden... Zum Beispiel sollte es h1 oder Ähnliches immer geben

 

[Ciraxis]

für seo oder performance gabs mal das https://developer.chrome.com/docs/lighthouse/overview?hl=de

Ist glaube nun auch in den dev tools drin.

 

[steff0rn]

Jagt die Seite durch: https://validator.w3.org (geht mittlerweile auch mit Rechtsklick auf der Seite...)

Das zeigt grobe SEO-Schnitzer an, so vorhanden... Zum Beispiel sollte es h1 oder Ähnliches immer geben

Naja, eigentlich nicht. Das Tool zeigt an, ob du validen HTML-Code hast - aber das hat mit SEO erstmal nur am Rande zu tun.

 

[n/a]

aber das hat mit SEO erstmal nur am Rande zu tun.

Doch, das hat unter anderem genau damit zu tun... sagt dir das Tool aber auch

 

[floq0r]

Bin ich froh, dass ich meine Apps nicht für den SEO Mist optimieren muss

 

[D0bby]

Nicht streiten.... Hab jetzt doch beide Varrianten gemacht. Hat mir keine ruhe gelassen und hatte ja die Idee mit Border Links rechts unten und oben dann via ::before/after und ging eig ganz easy von der Hand. Daher beides gelernt .

fieldset

.retro-box {
  position: relative;
  width: 300px;
  border: 2px solid white;
  padding: 1rem;
  background-color: rgba(255, 255, 0, 0.05);
  font-family: 'Press Start 2P', cursive; 
  margin: 3rem auto;
}


.retro-title {
  color: white;
  font-size: 0.8rem;
  padding: 0 0.5rem; 
}

::before/after

.skill-card {
  background-color: rgba(255, 255, 0, 0.05);
  width: 300px;
  font-family: 'Press Start 2P', cursive;
  margin: 3rem auto;
  padding: 2rem 1rem 1rem 1rem;
  position: relative;

  border-left: 3px solid black;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
}

.skill-card::before,
.skill-card::after {
  content: "";
  position: absolute;
  top: 0;
  height: 3px;
  background-color: black;
  width: 25%;
}

.skill-card::before {
  left: 0;
}

.skill-card::after {
  right: 0;
}

.card-title {
  position: absolute;
  top: -0.25rem;
  left: 50%;
  color: white;
  transform: translateX(-50%);
  padding: 0 0.5rem;
  font-size: 0.8rem;
}

 

[jb_alvarado]

Hier wurde jetzt nur SEO angesprochen, aber heutzutage sollte auch "accessibility" berücksichtigt werden. Und da könnte es schon eine Rollen spielen wie das Element fieldset verwendet wird.

Wie wäre es mit:

<section class="retro-box" aria-labelledby="skills-title">
  <h2 id="skills-title" class="retro-title">Skills</h2>
  <div class="retro-content">
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
  </div>
</section>

 

[sh.]

Hier geht es um eine Übungsseite... wollen wir jetzt auch Nachfragen ob eine Kundenanalyse und Konkurrenzanalyse durchgeführt wurde?

 

[floq0r]

Wär doch eine gute Übung oder?

 

[n/a]

Damit ihr mir glaubt: https://www.elegantthemes.com/blog/wordpress/how-to-use-w3c-validator-to-improve-seo

Conclusion

Using the W3C validator can improve your site’s overall performance. It enables you to avoid code bloat, resolve accessibility issues, and fix common errors. All these elements can lead to faster loading times and a better UX, which may, in turn, boost your site’s SEO.

Ich muss aber leider gestehen, dass ich auf die Schnelle kein Beispiel mehr gefunden habe, wo er mich aufgrund schlechter SEO angemeckert (Warning) hätte

Es kann aber auch sein, dass das nur mit einer echten (also online) index.html geht, nicht via direct text input ...

Jedenfalls gibt es diese "Semantik-Checks" ... auch wenn man denkt, es würde nur die Syntax (also Grundstruktur) überprüft werden

(Oder der W3C-Validator hat sich jetzt über Nacht geändert 🤷‍♂️)

wollen wir jetzt auch Nachfragen ob eine Kundenanalyse und Konkurrenzanalyse durchgeführt wurde?

Bitte nicht