Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rhonda Bradley
2,010 PointsWhere can I properly learn the html meta info?
I wonder if I missed a class somewhere? I have completed "How to Build a Website," and I have a long way to go in my Front End Development track -- but I need to SEO a simple website this weekend, so I'm taking this SEO course.
The explanation of meta tags in the video wasn't quite enough to understand all of the meta info I need to include in the site's head section. Also, the text was so tiny that it was difficult to see.
In order to pass the challenge, I had to google other resources to learn exactly how to do the meta description in html. In doing so, I saw a bunch of other meta tags that I'm unfamiliar with.
Does anybody know where the full meta data for html tutorial exists within Treehouse? I'd like to understand it fully rather than just patch in what I need at the moment. Thanks a bunch for any recommendations.
6 Answers
Dane Parchment
Treehouse Moderator 11,075 PointsHey no problem, glad to be of some help :D! So let's tackle your questions shall we? This will be a lot to take in so be prepared and take it in slow!
Before answering your questions let's do a brief overview of what a meta tag is used for this should better help you understand why and when to use certain things. Basically a meta tag describes information about your website, if you think about the word 'metadata' you will realize that all the meta tag is doing is providing data or information about the other data and information on the webpage. Generally there are three types of meta tags of which I will describe here:
- The name - This is the most common of the three and generally is used to describe the content of the whole web page be it the description of the website, the way css should use utilize the viewport, and even the author of the website just to name a few! The syntax for a name meta tag looks like so:
<!-- The general form of the meta name tag -->
<meta name="name of the meta type goes here (ie. viewport, author, description, keywords, etc.)" content="what the name tag describes will go here">
<!-- The name tag with content in it -->
<meta name="author" content="Dane E. Parchment Jr.">
- The charset - Describes the character encoding of the website. Honestly as a front-end web developer you have no need to know what character encoding is all you need to know is that you should almost always make sure that you set this value to UTF-8. Here is what the syntax looks like:
<!-- General form of the charset meta tag -->
<meta charset="character encoding goes here (ie. UTF-8, UTF-32, etc. - but you should always use UTF-8)>
<!-- Charset tag with content in it -->
<meta charset="UTF-8">
- The http-equiv - This is actually the most confusing of the three and it is basically used to describe things that the server would generally be describing. For the most part and especially as a front-end web developer you will not really be needing this tag. Here is the syntax for this tag:
<!-- General form of the http-equiv meta tag -->
<meta http-equiv="type of server interaction here (ie. refresh)" content="what the interaction does">
<!-- Http-equiv meta tag with content in it -->
<meta http-equiv="refresh" content="5;URL=http://www.google.com">
Alright and thats it for the background now it is time to work on your questions :)!
As you can see if you read the background information only the name and http-equiv meta tags will need content attributes as well. Basically those attributes just describe what the meta tag itself is describing so in my example I had the author tag and it basically describes the author of the website so in my content attribute I put my name.
Only use the meta tags you need, because this is a simple website you only really need the charset tag. You will know if you are using HTML5 based on the DOCTYPE of your html document. The non-html5 documents are considered obsolete because they use old or inferior technology (sorry if the answer seemed obvious). Example:
<!-- HTML5 DOCTYPE -->
<!DOCTYPE html>
<!-- HTML 4.01 Transitional DOCTYPE (Obsolete do not use) -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML 1.0 DOCTYPE (Obsolete do not use) -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
In my experience the refresh tag has never been that important. You can accomplish the same thing and with much more control with other web languages like javascript or PHP. All this tag does is referesh the page whenever the specified amount of seconds has been reached, or refreshes the page to a different URL when the specified time is reached and a URL is given.
I can't answer for all other web developers out there but yes I do believe that the viewport tag is used by every responsive web site out there. If it isn't it SHOULD be and personally I believe it should become a standard. You would want to use this even with media queries because they allow smaller devices like an iphone or android to use their viewports width and height as the width and height that need to be compared in the media queries. Basically it prevents responsive designs from breaking!
Eh, I would use the tag just for the SEO (Search Engine Optimization) that it provides, even though that tag is on its way out, you may as well abuse it until they deprecate it.
Yeah, basically and don't forget the charset as well. I find that as long as you use these you will have a decent website meta tag list. If you work with a major company or what not they will usually have an SEO Analyst or someone like that who will let the developers know what extra meta tags need to be added for SEOs sake.
Hopefully this was helpful to you and I apologize for the long read!
Dane Parchment
Treehouse Moderator 11,075 PointsHere are two really great resources for you:
This one is a reference to the html meta tag and its attributes, important to know, but may be a bit hard to read - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
This one is a bunch of obsolete practices for html5 including a few for the meta tag - https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid
Finally this is the site that I am getting the info from, it is a great resource for new and experienced developers. If you still need help, let me know: https://developer.mozilla.org/en-US/
Rhonda Bradley
2,010 PointsDane,
Thanks so much for taking the time to include those links for me.
Unfortunately, I've already seen and read through them -- and they just lead to more questions. It looks Greek to me. It's Greek, right? ha! Seriously, I'm an absolute beginner who started learning CSS and HTML a few months ago. Until then, I had always used WordPress.
Since the Front End Development track is all about creating with html/css from scratch, I'd imagine there has to be something somewhere covering how to do that metadata / head section properly. I am almost too much of a beginner for the MOZ docs.
Thank you again for the links!
Dane Parchment
Treehouse Moderator 11,075 PointsOk then if those are a bit too complicated to read try these.
I answered a question for somebody a while back giving tips on essential meta tags sok this forum post may be of some help: https://teamtreehouse.com/forum/what-are-the-essential-meta-tags-i-should-be-using-in-every-project
Also this is the w3school (world wide web consortiums) own tutorial site that is great for beginners specifically ( it is possible that you may have seen this already ) : http://www.w3schools.com/tags/tag_meta.asp
If you still need help after this and you nobody else provides any better answered I will answer with a small QuickStart guide to meta tags for you tomorrow.
Rhonda Bradley
2,010 PointsDane,
These links are very helpful. Pretend "very" is in caps - because the info is much more logical for a beginner like me than the other sources I was able to find.
It still leaves me with a handful of simple questions:
While browsing a number of other resources yesterday, I noticed (and now cannot find my way back to) that there is also some type of content tag. This threw me off for two reasons: a. When would the content tag be required? b. Today I'm using only html and css for a simple website - so is that all I would include in there? And why are they saying html is obsolete -- is my html actually xhtml? All I have learned so far is that I am working with html5.
When is the refresh tag important?
Is the viewport tag: <meta name="viewport" content="initial-scale=1"> always used on all responsive sites - whether or not you use media queries to make it so?
I'm guessing we can skip the keywords if we're not focusing on reaching other countries?
Finally, if I'm understanding correctly, the minimum needed is keywords, description, viewport, and title tags?
Please forgive if my vocabulary is off. And I'm sorry to hit you up with so many questions!
Thanks a ton for the links and taking the time to help.
Rhonda Bradley
2,010 PointsDane,
Best answer of all time. Thanks so much. It is all much clearer now that I understand the entire structure better. That's exactly what I needed to see!!!
Dane Parchment
Treehouse Moderator 11,075 PointsNo problem glad to have been a great help!