Now znaczniki HTML

pytanie zadane 8 czerwca 2017 w HTML i CSS przez mitsuukurinaa Bywalec (2,790 p.)

Witam, stworzyłem własną stronę, sugerowałem się według poradnika Pana Mirosława, więc ciężko z nowymi znacznikami. Powiecie mniej więcej co zmienić w kodzie, co dodać?

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>BlocksAd.com| Szukamy za Ciebie!  </title>
	<meta name="description" content="Nowa marka reklamowa - Usługi, Firmy, Oferty z całej Polski!" />
	<meta name="keywords" content="oferty, usługi, firmy, ranking firm, bloczki reklamowe, banery reklamowe, ogłoszenia, reklama, blocksad" />
	
	<META NAME=”ROBOTS” CONTENT=”INDEX,FOLLOW,ALL”>
	<meta name="google-site-verification" content="iiLb2_LTdX_2YYnRWHv73QP-yaUtDCe2w62PUuryCBo" />
	<meta name="google-site-verification" content="Qn34TM5OY1bOXGuSqCtwk5eH4dIh19IweZZ6T4t2pzU" />
	
	<link rel="Shortcut icon" href="img/shortcut.ico" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/fontello.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Oswald:400,600&amp;subset=latin-ext" rel="stylesheet">
	
	<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1870302369888354'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1870302369888354&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

</head>

<body>
	
		<div id="container">
	
		<div class="rectangle">
				<div id="logo"><a href="strona-glowna"><img src="logorec3.png" ></a></div>
	
				<div style="clear: both;"></div>
			
				</div>
		
		<font color="#3299CC"><b><center><h1>Poszukujesz czegoś? A może chcesz przejrzeć usługi i firmy w Twoim mieście?</h1></font></b></center>
		
		<div class="square">
				<div class="tile5"><a href="poszukuje" class="sociallink"><i class="icon-search-1"><span class="tekst3">Poszukuję...</span></i></a></div>
			
			
				<div class="tile2"><span class="tekst">Odznaki</span><a href="odznaki" class="tilelink"><i class="icon-award"></i></a></div>
				<div class="tile2"><span class="tekst">Najczęstsze pytania</span><a href="faq" class="tilelink"><i class="icon-help"></i></a></div>
				<div class="tile2"><span class="tekst">Regulamin</span><a href="regulamin" class="tilelink"><i class="icon-attention-1"></i></a></div>
				<div class="tile2"><span class="tekst">Kontakt</span><a href="kontakt" class="tilelink"><i class="icon-mail-alt"></i></a></div>
				<div style="clear:both;"></div>
				
			
				
		</div>
		<div class="square">
				<div class="tile5"><a href="uslugi-i-firmy" class="sociallink"><i class="icon-users"><span class="tekst2">Firmy i Usługi</span></i></a></div>
			
				<div class="tile2"><span class="tekst">Nasze usługi</span><a href="uslugi" class="tilelink"><i class="icon-star"></i></a></div>
				<div class="tile2"><span class="tekst">Co nas wyróżnia?</span><a href="co-nas-wyroznia" class="tilelink"><i class="icon-user-o"></i></a></div>
				<div class="tile2"><span class="tekst">Facebook</span><a href="https://www.facebook.com/blocksadcom/" class="tilelink"><i class="icon-facebook-1"></i></a></div>
				<div class="tile2"><span class="tekst">YouTube</span><a href="https://www.youtube.com/channel/UC1-ZSYug_OMcH9p2Q79C7Yg" class="tilelink"><i class="icon-youtube-2"></i></a></div>
				
				
				<div style="clear: both;">
	
			</div>
			
			
		
		</div>
		
		<div class="rectangle">BlocksAd.com - ###<br /><font color="red">Wszystkie prawa autorskie zastrzeżone! Copyright © 2017 Reflex Publishing, Inc. All Rights Reserved.</font></div>
	
		
	</div>

</body>

</html>

1 odpowiedź

odpowiedź 8 czerwca 2017 przez Arkadiusz Waluk Ekspert (290,310 p.)
wybrane 8 czerwca 2017 przez mitsuukurinaa

Najlepsza

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

chrome=1 tu niepotrzebne.

Meta keywords o ile mi wiadomo też jest już niezbyt brana pod uwagę, wyszukiwarki same szukają czego chcą.
Atrybut type w <link> jest niepotrzebny.
<font> i <center> nie używamy, przestarzałe.
```
<i class="icon-star"></i>
```
Ikonki niedostępne, Comandeer ciągle zwraca na to uwagę.
```
<div style="clear: both;"></div>
```
Pusty element czyli niepotrzebny, do tego style inline które również są złe. Lepiej zrobić to na pseudoelementach.
Menu zrobiłbym na listach, a nie kolejnych divach.
Stylizujmy po klasach, nie po id.
Raz nazwy klas po angielsku raz po polsku - lepiej zdecydować się na jedno, zawsze angielski.
Jak już sam napisałeś: brak znaczników z HTML5. Spokojnie dodałbym przynajmniej <header>, <nav> czy <footer>

W zasadzie to częste błędy w stronach robionych na podstawie kursów pana Zelenta. Proponuję przejrzeć sobie chociażby dział "Nasze projekty" na forum, tam już wiele podobnych ocen i różnych sugestii było.