Túl terjengős HTML tartalom?
Az lenne a kérdésem, hogy hogyan szokás kordában tartani a HTML oldalak forráskódjának méretét. Ez alatt azt értem, hogy már egy nem túl bonyolult táblázat is akár többszáz soros kódot eredményezhet, amit - nekem legalábbis - elég nehéz átlátni.
Visual Studio Code-ban próbálkozom és ott össze lehet csukni az elemeket de ez még mindig nem megoldás akkor ha valami nagyon mélyen van a struktúrában.
Szóval az lenne a kérdésem, hogy mi "best practice" a HTML esetében? Nyilván lejött, hogy teljesen új vagyok a html-ben, úgyhogy bocsánat ha nagyon amatőr a kérdés.
Gyűjtsed divekbe a nagyobb blockokat. Még ha nem is adsz funkciókat neki, a vs codeban betudod csukni. A nyitó div tag előtti sorba ajánlott beszúrni egy kommentet, hogy az adott szekcióban mi van/mi a funkciója.
Kovetkezokepp tudsz kommentet beilleszteni:
<!--ide jön a komment amit a böngésző nem renderel ki-->
Vs codeban elég a nyitó taget begépelni (<!--) a vs code beilleszti a tobbi részét. Ha nem világos nyisd meg a vs codeot kezd el gépelni és rájössz mire gondolok
Igen, ismerem a html comment-et és tudom, hogy össze is lehet csukni a tag-ek tartalmát. Olyat lehet / szoktak, hogy egy html oldal-t több másik oldalból raknak össze ahhoz hasonlóan mint ahogy pl a js meg a css file-okat is be lehet importálni a html-be?
(lehet nem szoktak semmi ilyesmit, és a problémám csak abból adódik, hogy lárva vagyok és aki profi annak nem okoz ez gondot)
Másik kérdés lehet, hogy hol van a határ amikor tudom, hogy már túl hosszú a forráskód és mit lehet ilyenkor kezdeni?
"Ez alatt azt értem, hogy már egy nem túl bonyolult táblázat is akár többszáz soros"
A sorok akár csoportosíthatóak is.
A táblázat fejléce például berakható <thead> elembe, az egy csoportba tartozó sorok <tbody> elemekbe (példa: https://www.growingwiththeweb.com/2012/06/use-tbody-tag-to-group-multiple-tr-tags.html ), ha esetleg van összegzés, az meg berakható <tfoot> elembe.
"Gyűjtsed divekbe a nagyobb blockokat."
Mivel táblázatokról volt szó: táblázatcellán (<td> vagy <th>) belül rakhat <div> elemet.
De táblázatcellák vagy sorok csoportosítására nem illik használni - a HTML-validátor nyafogni fog érte (nem éppen szemantikus).
Oldalszerkezet kialakításánál már alkalmazható - de ott vannak még jelentéssel bíró elemek is:
https://www.w3schools.com/html/html5_semantic_elements.asp
"Olyat lehet / szoktak, hogy egy html oldal-t több másik oldalból raknak össze ahhoz hasonlóan mint ahogy pl a js meg a css file-okat is be lehet importálni a html-be?"
Az egyik lehetőség a soron belüli keret (<iframe>) alkalmazása lenne - de azt inkább másik weboldal beillesztésénél alkalmazzák (például Youtube-videó).
A másik lehetőség a szerveroldali nyelv használatával bontod fel részekre az oldalt - erre itt egy réges-régi példa:
https://www.tutorial.hu/weboldal-keszites/php-switch-get-i/
Harmadik lehetőség - főként ha az adatok valamilyen adatbázisban vagy strukturált szövegfájlban (CSV, JSON) vannak - hogy vagy szerveroldali nyelvvel generálod ki, vagy esetleg a szerveroldali adatokból (amiket a kliensoldalon például XMLHTTPRequest- vagy Fetch-API segítségével kérsz le) Javascript segítségével hozod létre a HTML-struktúrát.
A jó strukturálásnál többet nem tehetsz, amennyiben statikus weboldalról van szó.
De ha tényleg nagy mennyiségű, és gyakran változó a tartalom, akkor érdemesebb valamilyen dinamikus technikát használni, pl. a PHP-t.
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!