Sprawdzenie kodu mojej strony

Question

Postanowiłem stworzyć swoją pierwszą stronę www w oparciu o nowe tagi HTML5. Chciałbym teraz, abyście sprawdzili ją pod względem poprawności kodu, zastosowania tagów itp. nie pod względem wyglądu bo nie na tym się aktualnie skupiałem, ale oczywiście kod CSS też można przejrzeć. Z góry dziękuję za wszelkie odpowiedzi, podpowiedzi i krytykę :)

http://cssdeck.com/labs/full/hivcgg6p

Answer 1

Jest całkiem ok, ale osobiście przyczepiłbym się aside,  a dokładnie wnętrza. Tam zamiast divów możesz zastosować section, a "Znajdź mnie tu" jest listą linków. Do tego można dodać, że sam znacznik date nie wystarcza:

<time datetime="2014-07-03">07/03/14</time>

Do tego jak jest header w article, i ten szary napis - można to uznać za footer. Poza tym wszystkim, używasz za dużo razy stylowania po tagach.

Comments

I jeszcze taki zabawny zapis:

<!-- Don't ask why there is logging panel in my portfolio. I don't know. -->

 logging panel :v

---

Dzięki za odpowiedź, teraz lepiej?

http://cssdeck.com/labs/full/nqtobapu

Wydaje mi się, że aside poprawiłem, "Znajdź mnie tu" też, datę również. Co do tego szarego napisu, nie rozumiem czemu można uznać to za footer.

Co do stylowania, chodzi o to że header.logo h1 mógłbym zamienić po prostu na .logo h1, tak?

Mam nadzieję, że teraz zmieniony komentarz cię usatysfakcjonuje :D

@Edit i przy okazji, żebym miał to z głowy: Jeśli tworzę ten panel i chcę dodać oczywiście login i hasło, muszę to dawać do <form>? Głupie pytanie, ale wolę się upewnić teraz.

---

Jest lepiej ;) Dalsze info:

Co do tego szarego napisu, nie rozumiem czemu można uznać to za footer.

Tutaj nie ma co rozumieć - czy to nie jest właśnie footer artykułu? Szczerze to trudno mi to wytłumaczyć, to jest logiczne :D

 

Co do stylowania, chodzi o to że header.logo h1 mógłbym zamienić po prostu na .logo h1, tak?

Nope, latając po tagach w stylach robisz źle, ponieważ może się zdarzyć sytuacja że użyjesz dwukrotnie jakiegoś elementu w identyczny sposób, ale ma on mieć różny charakter. Powinno używać się klas do stylizowania, ponieważ wtedy jeżeli będzie ww. sytuacja, nie będzie problemu zmienić stylu czegokolwiek. Jeżeli jednak tak by się wydarzyło, że użyłeś drukrotnie tej samej struktury, ale chcesz aby ta druga wyglądała inaczej i dopiero jej nadasz klasy, to będzie bardzo nie profesjonalne. Mam nadzieję, że zrozumiałeś. :D

Mam nadzieję, że teraz zmieniony komentarz cię usatysfakcjonuje :D

Jeżeli mamy się czepiać serio, to nie mieszajmy języków :P

---

Tutaj nie ma co rozumieć - czy to nie jest właśnie footer artykułu? Szczerze to trudno mi to wytłumaczyć, to jest logiczne :D

Aaaa, teraz rozumiem o co ci chodzi, że ten News #1 niby odnosi się do Newsa 2 jako jego footer? Ok, pewnie jutro się tym zajmę, na dziś koniec :D

Nope, latając po tagach w stylach robisz źle, ponieważ może się zdarzyć sytuacja że użyjesz dwukrotnie jakiegoś elementu w identyczny sposób, ale ma on mieć różny charakter. Powinno używać się klas do stylizowania, ponieważ wtedy jeżeli będzie ww. sytuacja, nie będzie problemu zmienić stylu czegokolwiek. Jeżeli jednak tak by się wydarzyło, że użyłeś drukrotnie tej samej struktury, ale chcesz aby ta druga wyglądała inaczej i dopiero jej nadasz klasy, to będzie bardzo nie profesjonalne. Mam nadzieję, że zrozumiałeś. :D

Czyli jeśli dobrze zrozumiałem, chodzi ci o coś takiego jak mam:

article {
	border-bottom: 2px solid darkgray;
}
aside {
	float: left;
	width: 25%;
	background: gray;
}
section {
	border-bottom: 2px solid darkgray;
}

@Edit again, jeśli chciałbym przenieść tą datę dodania na dół newsa, mam użyć zwykłego <p> czy jak? Pasowałby <details> moim zdaniem, ale Firefox go nie rozpoznaje jeszcze i dlatego nie chcę go dodawać.

---

Myślę, że p nie jest złym wyborem.

---

Dzięki wielkie za pomoc, miłego wieczoru :)

Answer 2

• użyj paddingu dla contentu. Np.: article { padding: 18px; }
• zwiększ interlinię dla tekstu. Np.: article { line-height: 1.5; }

* { margin: 0; padding: 0;

Nie rób tak. Zainteresuj się Normalize.css... No i nie resetuj czegoś czego nie potrafisz potem poprawnie ostylować.

><li><a href="#">O mnie</a></li
><li><a href="#">Moje projekty</a></li
><li><a href="#">Kontakt do mnie</a></li>

Co to?

<data>21:00 | 29.03.2016</data>

<data>? "data" to po angielsku dane...
<date> jeśli już... i nie <date>, a <time>
 http://html5doctor.com/the-time-element/

	<div class="sidebox" id="socials">
		<h3>Znajdź mnie tu</h3>
		<p><a href="#" id="fb"><i class="icon-facebook-squared"></i> Facebook</a></p>
		<p><a href="#" id="tw"><i class="icon-twitter-squared"></i> Twitter</a></p>
		<p><a href="#" id="yt"><i class="icon-youtube-squared"></i> Youtube</a></p>
		<p><a href="#" id="tr"><i class="icon-tumblr-squared"></i> Tumblr</a></p>
	</div>

Zamień to na listę...

</body>
</html>
<script>
</script>

</body>
</html>

2 razy zamykasz <body> i <html> ?

Jeśli chodzi o HTML5 jest raczej OK...

Pewnie znasz?
http://tutorials.comandeer.pl/html5-blog.html

Comments

• użyj paddingu dla contentu. Np.: article { padding: 18px; }
• zwiększ interlinię dla tekstu. Np.: article { line-height: 1.5; }

Pisałem, że na wyglądzie się nie skupiałem, to wszystko dokończę później, ale dzięki za rady.

Zainteresuj się Normalize.css... No i nie resetuj czegoś czego nie potrafisz potem poprawnie ostylować.

Nie znam się na rzeczach jak jakiś reset.css czy normalize.css jeszcze do tego tematu nie doszedłem :D Zainteresuję się jutro + again, nie o wygląd mi chodziło.

1 2 3

><li><a href="#">O mnie</a></li ><li><a href="#">Moje projekty</a></li ><li><a href="#">Kontakt do mnie</a></li>

Co to?

Jeśli ustawi się inline-block, to pomiędzy robią się spacje, taki zapis powoduje, że tych spacji nie ma.

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

<data>? "data" to po angielsku dane...
<date> jeśli już... i nie <date>, a <time>

Tu jakoś totalnie bez mózgu to palnąłem, już poprawione :D

Zamień to na listę...

Zamienione

2 razy zamykasz <body> i <html> ?

Nigdzie nie mam dwóch zamknięć tych tagów... czy czegoś nie widzę?

---

http://blog.end3r.com/131/normalize-css-nie-resetuj-normalizuj/

---

Jeśli ustawi się inline-block, to pomiędzy robią się spacje, taki zapis powoduje, że tych spacji nie ma.

Pierwsze coś takiego widzę jak żyję... Ja zamiast inline-block używam li { float: left; }

---

Nigdzie nie mam dwóch zamknięć tych tagów... czy czegoś nie widzę?

http://pasteboard.co/2Do93Qjb.png

---

Używasz ramek?

---

Dzięki, przeczytam :)

---

Mój koniec strony wygląda tak:

</footer>
</div>

</body>
</html>

 

---

To znaczy jakich ramek i w jaki sposób?

Answer 3

w <header> dał bym <h1> i <h2> zapmiast <p> i wstawił oba w znacznik <hgroup>  (albo <h1> i w nim <small>)

<aside> powinien być w <main>

Stara przeglądarka IE ma problem z takim zapisaem 

header.logo h1 {
    margin: 0;
    padding: 40px;
    font-weight: 100;
}

Ona nie rozumie co to jest <header> i w tym wypadku CSS nie zadziała przeglądarka to zignoruje, jest na to banalny patent. Wystarczy że robiąc <header> nadasz mu classę "header". Będzie to wyglądało w następujący sposób:

<header class="header">...</header> 

<main class="main">...</main>

i analogicznie w CSS 

.header .logo h1 {
    margin: 0;
    padding: 40px;
    font-weight: 100;
}

Dostawiasz tę kropkę i problem z głowy, nawet najgorsza przeglądarka zrozumie co ma robić :) 

Tak po za tym to wygląda to całkiem nieźle, validator.w3.org nic nie pokazuje po za błędnym linkiem w "twitter".