-
Notifications
You must be signed in to change notification settings - Fork 0
Code Formatting HTML
Adroaldo de Andrade edited this page Sep 29, 2014
·
2 revisions
- Tells to browser the HTML version
Good we will use this
<!DOCTYPE html>Bad this is for older versions of HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">- Tags should be written in lower case
- Should have no close bar on tags, write standards-compliant markup
Good
<input type="text">Bad
<INPUT TYPE='text' />1 . Close tags properly 1 . Internal tags should be indented properly
<nav>
<ul>
<li>First Element</li>
<li>Second Element</li>
<li><a href="#">Link Element</a></li>
</ul>
</nav>- Attributes should be written in lower case
- Values should be written within double quotes
- When using external resource use no protocols
- Use meaningful names for CSS classes
Good
<div class="debtor-data"></div>
<img src="//www.google.com.br/images/logo.png">Bad
<img src='http://www.google.com.br/images/logo.png'>- They are not shown on website
- Relative matter, they do not generate JavaDoc like documentation
- Take care because it can increase loading a website if missused
<!-- Some HTML comment -->- Make use of semantic elements
- Use the proper document structure
- Use the alternative text attribute on images
<!DOCTYPE html>
<html>
<head>
<title>Fiddus Software</title>
</head>
<body>
<header>
<img src="img/logo.png" alt="Fiddus Software">
<h1>Fiddus Software</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<p>Under construction. <a href="mailto:contato@fiddus.com.br">Keep in touch</a>.</p>
<footer>
<p>Copyright ® 2014 Fiddus Software. All Rights Reserved</p>
</footer>
</body>
</html>