An article I was reading recently compared trying to build a website without knowing any HTML to attempting to build a house without knowing what a brick is. It’s extremely useful to know a bit about HTML even if it’s just the basics. In this tutorial series, I hope to give you a basic understanding of HTML and CSS, as well as to point you in the direction of several other great resources for learning about these topics.
So what is HTML?
HTML stands for hyper-text markup language which probably means nothing to you. It doesn’t mean much to me, either! Basically, HTML is responsible for taking the content you would like to display on a webpage and structuring it into semantic sections which can then by styled using CSS (Cascading Style Sheets), which I’ll cover later in this series.
Structuring your HTML documents
Every HTML document starts with the same basic structure. The first thing on every page should be the DOCTYPE. This is a line of code which often looks like gibberish. It’s sole purpose is to tell your internet browser (Firefox, Safari, Internet Explorer, etc.) which version of HTML the page is using. Browsers have long struggled to operate under the same standards leading to a page being displayed consistently in various browsers. The DOCTYPE is the first stepping stone in ensuring cross-browser compatibility for your webpages. For this tutorial series, I will be using HTML5 which is fairly new and isn’t even fully finished or supported in older browsers. However, all of the major browsers can interpret HTML5 and it is fairly safe to use it in your projects from this point forward.
So the first code that should go into any of your webpages is the HTML5 DOCTYPE (which they finally shortened and made pretty easy to remember):
<!DOCTYPE html>Now that you’ve told the browser that you’ll be using HTML5 to code your page, you can begin structuring the document. Every HTML file has the same basic structure:
<!DOCTYPE html>
<html>
<head>
<title>San Diego Pet Store</title>
<meta name="keywords" content="dogs, dog treats, san diego pet store, animal shop">
<meta name="description" content="San Diego Pet Store was established in 1943 and has been making pets happy ever since. Come visit us in Mission Valley Shopping Mall and bring your pet along for a fun afternoon!">
</head>
<body>
<h1>This is a Sample Heading</h1>
<p>This is some sample text inside of a paragraph. Dogs rule!</p>
</body>
</html>This may look a bit confusing at first glance, but it is actually fairly self-explanatory once you look at each tag individually:
<html></html>: This tag surrounds all of the code in a document besides the DOCTYPE.<head></head>: This tag includes several sub-tags which can do any of the following: declare the title of the page, associate keywords/a description/other meta information with the page, and include styles from another file which describe the layout/visual characteristics of the page.<title></title>: This tag is the only tag in the head section which will create a visual output. The title you set here will appear in several places such as the title bar of your browser, your taskbar (when you minimize the window), and as the default title if you bookmark the page in your browser. Also, it is used on SERPs (Search Engine Results Pages) as the title of your webpage. All other tags in the <head> section simply describe the content and are invisible to visitors. Many of the tags either help search engines or internet browsers to classify your content.<meta name="keywords" content="">: This tag was once very important in achieving high search engine rankings, and many still consider it to be important. But in reality, search engines don’t put much weight (if any) on this tag thanks to “black hat” deceptive practices by search engine optimizers. There is no harm in using the tag as long as the keywords you put in are reflective of the content on that specific page.<meta name="description" content="">: The description tag is more beneficial than the keywords tag as long as you use it properly. When your website shows up in search engines, one of two things will appear below the title: a random snippet of text from your website that matches what the person was searching for, or the description set in this tag. No two pages in your website should have the same description, and your description should be a 1-2 sentence account of what is on the page and why someone should visit your page rather than someone else’s.
<body></body>: This tag holds all of the content which is visible on any page. It is usually broken down into specific sections which refer to the layout of the page such as: header, navigation, main section, sidebar, and footer. CSS is then used to define the sizes of each section as well as their layout, backgrounds, colors, font sizes, etc.
What now?
For the next post in this tutorial series, I’ll be going over some common tags in HTML and I will also help you write your first HTML document.
If you have any questions, or would like me to cover something specific in a future tutorial, please call (619) 793-4645 or send an e-mail to hello@goldvine.biz.