A HTML-ben még a kezdetek-kor megszületett egy elem, az elválasztóvonal, amit egy apró kódocska segítségével meghívhatsz. Külön dobozként elhatárolja az alatta és felette található dolgokat, és a rendelkezésre álló helyet kitölti. Így hívhatjuk meg:

<hr/>

Jól látjátok, ennyire egyszerű, és ilyen pici, és nincs is párja. Van néhány elem a HTML-ben aminek nincs záró tag-je, mint például a kép (ugye az is csak <img src=""/>), szóval ne ijedjetek meg tőle.

Ez a pici elem, rendkívül hasznos, könnyen meghívható, és nagyon sok folyamatba bele is van építve mint kötelező elem itt a gportálon is, például amikor válaszolsz egy kommentre, vagy idézel egy előtted szóló kommentet. Ha bármikor bármilyen sorelválasztóra van szükséged, nyugodtan használd ezt, ugyan úgy ellátható különböző osztályokkal mint bármelyik másik elem, így akár ötféléd is lehet, és a formázási lehetősége is nagyon sokszínű.

Viszont az utóbbi néhány évben ez az amúgy nagyon hasznos kis vonal kiesett a fejlesztők és webszerkesztők kegyeiből, így mintha mindenhol buzdítanak az elem nem használatára, de amikor olyan rendszered van amiben így benne maradt azért érdemes lehet hozzányúlni, mert tartogat olyan lehetőségeket amitől sokkal mutatósabb lehet. Akik régebb óta kódolnak lehet emlékeznek rá, ez egy nagy, otromba árnyékolt vonalka volt,  aminek csak néhány tulajdonságát lehetett piszkálni, a HTML5-ben pedig levettek minden terhet erről a kis elemről és szinte úgy kezelhetjük mint bármelyik másik dobozunkat!

Háttér, keretek, igazítás, villoghat kéken is, élére is állíthatjuk szinte bármi amit el tudtok képzelni.

Főbb tulajdonságai közé tartozik az hogy a rendelkezésre álló hely 100%-át kitölti, és alapvetően balra van igazítva. Megjelenését tekintve alapvetően egy vékony ~1px vastag szürke vonal.

CSS-ben így hivatkozhatunk rá: hr {}

Itt a példákban minden hr elemünket elláttuk egy-egy osztállyal, hogy külön-külön formázhassuk! Szóval nekedis lehet ebből a vonalból ha kell 100 féle! <hr class="hr1"/>

Nézzünk is pár példát, hogy hogyan is nézhet ki!

Ha esetleg van képed amit sorelválasztónak használsz vagy használnád, kép beszúrás helyett ebbe is belerakhatod, így sokkal könnyebben meghívható lesz, és később, akár design-hoz illően tudod módosítani a képet. Szóval, rakjunk be neki egy hátteret, pozícionáljuk középre, és adjunk neki akkora magasságot hogy a kép kiférjen, és vegyük le az ismétlődést!

Szöveget és karaktersorozatot is megadhatunk sorelválasztónak! Ezzel a módszerrel, a használt karaktersorozat bármikor módosítható és javítható, illetve a szövegnek is definiálhatsz különböző tulajdonságokat, szín és méret például. Fontos hogy jó magasságot vagy ne állítsunk be neki magasságot, hogy a karakterek kilátszanak a dobozból.

Van benne lehetőség azért nem? Használjatok nyugodtan!