html 101

Being Semantic

In the Heading Levels section of this tutorial, we discussed the importance of using specific heading levels because they describe the outline/hierarchy of headings in the document, not just because you like the size they display at by default. You should extend this principle to all aspects of the HTML you write.

In other words, don't use the <blockquote> tag just because it makes text indented by default - use it because you're quoting something or someone and need it set off from the main text (there are better ways to indent text). Don't use HTML tables to lay out your pages - use tables if you have tabular data to display.  In other words, choose HTML tags according to their logical meaning in the structure of the document, not because you happen to like the way the browser displays that tag by default. You can take full control over how things are displayed with CSS. The point of HTML is to give a document a logical markup structure.

In ideal circumstances, every tag in your document should adequately describe the piece of content it surrounds, and there should be little to no formatting-related information in it. All display and formatting problems should be handled with CSS. A good HTML document should be stripped free of all or most formatting data. 

This practice is known as "semantic" HTML and is the core of best practices in modern web development. 


Congratulations! This has been a whirlwind tour of basic HTML concepts. It's by no means complete, and there's still much to learn, but now that you've gotten your feet wet, the sky's the limit.

Please see some of the sites referenced in the Related Links section of this tutorial to learn more. If pressed for time, we highly recommend the official W3Schools HTML tutorial.