Kod -> https://jsfiddle.net/m09whkgL/
Jestem osobą, która dopiero się uczy pisać poprawnie strony internetowe.
Co myślicie o takiej strukturze? można to napisać lepiej?
Druga kwestia to semantyka:
Toficjusz napisał(a):
Kod -> https://jsfiddle.net/m09whkgL/
Jestem osobą, która dopiero się uczy pisać poprawnie strony internetowe.
Co myślicie o takiej strukturze? można to napisać lepiej?
Druga kwestia to semantyka:
- menu hamburgerowe powinno być w buttonie?
- h1 w headerze?
- a przycisk, który przewija stronę na daną sekcję niżej w buttonie?
Można to napisać lepiej. Dobrze że na takie rzeczy zwracasz uwagę, ponieważ 90% stron internetowych ma semantykę i dostępność w du***. Strony robione są tak, żeby "tylko wyglądały".
Co do twojego kodu:
button i wewnątrz nav, tak jak masz. Ale button musi zawierać w sobie tekst opisujący do czego ten button służy, czyli np tekst: "menu". Kiedy nie ma tam nic (poza ikonką), użytkownik czytnika ekranowego "wchodzący" na ten przycisk nie będzie wiedział do czego on służy. Tekst dla pozostałych użytkowników można ukryć, za pomocą CSS, na przykład dodając mu taką klasę: .visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
Przyda się też atrybut aria-expanded, który będzie wskazywał czy przycisk już coś uruchomił czy jeszcze nie. O zrobieniu poprawnego hamburgera poczytaj choćby pod tym linkiem
<header> w <header>? Przecież wystarczy jeden <header>
<div class="header-text">
<h1>Salon fryzjerski</h1>
<p>opis salonu fryzjerskiego</p>
<a href="#">Dowiedz się więcej</a>
</div>
</header>
albo nawet: (też można to spokojnie ostylować tak jak masz na screenshocie)
<header>
<h1>Salon fryzjerski</h1>
<p>opis salonu fryzjerskiego</p>
<a href="#">Dowiedz się więcej</a>
</header>
<div class="header-background"></div>? Domyślam się, że wkładasz tutaj tło. Dlaczego nie przypiszesz go bezpośrednio do <header>. Jeśli chcesz koniecznie mieć tło w osobnym elemencie, to możesz posłużyć się pseudoelementami, takimi jak ::after i ::before. Pusty <div> to niepotrzebny <div>, elementów w HTML powinno być tyle ile trzeba, ale nie więcej.<button><a href="#">Dowiedz się więcej</a></button> to nie ma za bardzo sensu. Coś albo jest linkiem, albo buttonem. A nie jednym i drugim naraz. Jeśli element służy wykonania jakiejś akcji na stronie (otworzenia menu, wysłania formularza, zmiany wyglądu itp.) to wtedy potrzebny jest button. Natomiast jeśli element służy do nawigacji do innego miejsca na stronie, albo do całkiem innej strony - to wtedy jest link. Link możesz sobie spokojnie ostylować tak, żeby wyglądał na button, ale w kodzie strony ma pozostać linkiem. W twoim przypadku ten linkobutton służy to przeniesienia w inne miejsce strony - więc jest to link, i tylko link.Dziękuje Ci za tego posta.
Czyli ostatecznie menu hamburgerowe powinno wyglądać tak:
https://jsfiddle.net/8x07qct1/
Potrzebny jest type="button"? Skoro to button?
Czy tak zapisana sekcja jest poprawna?
<section>
<header><h2>Salon fryzjerski</h2><header>
<p>opis salonu fryzjerskiego</p>
<a href="#">Dowiedz się więcej</a>
</section>