Since I'm new to HTML and CSS, I was wondering whether my HTML layout is correct? Before I used div id
for everything and everything seemed to work fine, however I recently heard about the use of span
and div class
es, so I've attempted to make use of them on a page from my website.
The issue is I have no idea if I've used div class
and span
in the right way on my site. I'm really quite confused. I've tried to ask questions about it before, but I can't understand the explanation. I've also tried reading up on them, but I'm still not sure on the difference. I don't understand what in-line or block-line in context to span
and id
means. I really just want to know if my code structure is technically correct and efficient. I mean it works, but I want to ensure I'm using proper practices.
Here is an portion of code from my HTML:
<!--GLOBAL HTML-->
<!--Code marked with GREEN is unused code that may be used later on-->
<!DOCTYPE html>
<html>
<!--CSS LINKS-->
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="css/index.css" rel="stylesheet" type="text/css" media="screen">
<!--TAB TITLE-->
<head>
<meta name="author" content="GR412">
<title>CRAFT412 - Home</title>
</head>
<!--BODY-->
<body>
<!--TOP BANNER-->
<div class="banner">
<div id="banner-image">
<img src="images/SiteBackground.png" width="100%" height="143.5" alt="SiteBackground">
</div>
<div id="logo">
<img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
</div>
<div id="ip-box">
<span id="ip-text">SERVER IP
craft412.serveminecraft.net</span>
</div>
<div id="teamspeak-box">
<a href="ts3server://craft412.serveminecraft.net:9987">
<span id="teamspeak-box_2"></span>
<span id="teamspeak-text">TEAMSPEAK</span>
<img id="teamspeak-image" src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
</a>
</div>
<div id="red-bar"></div>
</div>
<!--WRAPPER-->
<div class="wrapper">
<!--TOP NAV BAR-->
<div class="nav-bar">
<ul>
<li><a href="index.html" class="active-page">Home</a>
</li
><li><a href="status.html">Status</a>
</li
><li><a href="info.html">Info</a>
</li
><li><a href="">Gamemodes</a>
<ul>
<li><a href="survival.html">Survival</a>
</li
><li><a href="pure-pvp.html">Pure-PVP</a>
</li
><li><a href="gamesworld.html">Gamesworld</a>
</li>
</ul>
</li
><li><a href="rules.html">Rules</a>
</li
><li><a href="vote.html">Vote</a>
</li
><li><a href="contact.html">Contact</a>
</li>
</ul>
</div>
<!--INDEX CONTENT-->
<div id="index-banner">
<img class="bottom" src="images/SPAWN IMAGE.png" height="360" alt="INDEX BANNER">
<img class="top" src="images/SURVIVAL IMAGE - GAMEMODES.png" height="360" alt="INDEX BANNER 2">
</div>
<div id="welcome-text">
<h3>Welcome to CRAFT412</h3>
<h3>We are currently running version 1.8.1</h3>
<h3>Survival / PurePVP / GamesWorld</h3>
</div>
<div id="trailer-title">
<h4><br>SERVER TRAILER</h4>
</div>
<div id="trailer-video">
<iframe width="832" height="468" frameborder="0" src="http://www.youtube.com/embed/dfbWw757Iow"></iframe>
</div>
</div>
<!--GLOBAL HTML-->
<!--BOTTOM FOOTER SECTION-->
<div class="bottom-footer">
<span id="created-by">
<p>© 2015 GR412</p>
</span>
<span id="social-media-youtube">
<a href="https://www.youtube.com/user/GR412" target="_blank">
<img src="images/CRAFT412 - YouTube Button.png" width="40" height="40" alt="YOUTUBE"></a>
</span>
<span id="social-media-twitch">
<a href="http://www.twitch.tv/gr412" target="_blank">
<img src="images/CRAFT412 - Twitch Button.png" width="35" height="35" alt="TWITCH"></a>
</span>
<span id="social-media-twitter">
<a href="https://twitter.com/GR412" target="_blank">
<img src="images/CRAFT412 - Twitter Button.png" width="55" height="55" alt="TWITTER"></a>
</span>
<span id="social-media-facebook">
<a href="https://www.facebook.com/GR412" target="_blank">
<img src="images/CRAFT412 - Facebook Button.png" width="45" height="40" alt="FACEBOOOK"></a>
</span>
</div>
</body>
</html>