Meta Tags

Description Meta Tags - For SEO reasons You should always use the description meta tag when creating your html document. Meta tags help the search engine understand your web pages. Meta tags inform the search engine of your website content. See examples below of meta tags best practices.

  • Description Meta Tag Example: <meta name="description" content="Your Smart Guide to Internet Success: Tutorials on SEO, Internet Marketing, Web Design, Languages, What do you want to learn today? Join Free"/>
    • Description can help with ranking in the search engines
    • The meta tag description should be between 140 and 160 characters in length
    • You must create new meta tag content for every page.

  • Keywords Meta Tag Example: <meta name="keywords" content="web design, web development, programming languages, seo," />
    • No more than 7 keywords or keyword phrases
    • Separate every keyword or keyword phrases using commas
  • USA Charset Tag Example: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  • HTML Title Tag Example:
    • <!DOCTYPE html>
    • <html>
      • <head>
      • <title> How to Learn HTML</title>
      • </head>
    • <body>
    • </body>
    • </html>


CSS Style

I'm not going to tell you a lot about CSS files, not yet. I'm going to be creating a tutorial on the subject. Today, I'm just going to inform you that a CSS style will allow you to make every page look the same on your web site by changing one file..

There are three way to employ CSS styles. Try not to use the inline styles; Unless you have no other options. See the examples below.

CSS Style Type

  1. External CSS - (Tutorial External CSS Link Will Go Here)
  2. Internal CSS - (Tutorial Internal CSS Link Will Go Here)
  3. Inline CSS - (Tutorial Inline CSS Link Will Go Here)


  • Inline Option Example Try not to use this option

<!DOCTYPE html>
<html>
<head>
<title>HTML Examples</title>
</head>
<body>
<p style="color:green;" rel="color:green;" rel="color:green;" rel="color:green;" rel="color:green;">The text will be green.</p>
</body>
</html>


Alternative Options

  1. External CSS
  2. Internal CSS


External Example The Best Option

  • <!DOCTYPE html>
  • <html>
    • <head>
    • <link rel="stylesheet" type="text/css" href="filename.css" />
    • </head>
  • <body>
  • <h1>This Heading Will Be Blue</h1>
  • <p >All paragraph texts will be white on a black background.</p>
  • </body>
  • </html>


Internal Example A Good Choice

<!DOCTYPE html>

<html>

<head>

<title>HTML Examples</title>

<style>

body {background-color: black;}

h1 {color: blue;}

p {color: white;}

</style>

</head>

<body>

<h1>This Heading Will Be Blue</h1>

<p >All paragraph texts will be white on a black background.</p>

</body>

</html>



If you have any questions about using HTML, CSS, or Javascript please use the dussicion group or send me an PM here at Wealthy Affiliate. If you like this tutorial, please click on the like button and tell me how I can make it better.

UP NEXT: HTML Code - How to Comment Out HTML



Join the Discussion
Write something…
Recent messages
Snoetjies Premium
Very good, thank you!
Reply
seconds2work Premium
Thank you, Ylandi, for picking my tutorials to read. If you have any questions about any of them, please contact me.
Reply
reanna1 Premium
Bookmarked, LeNard! Thank you so much!
Reply
seconds2work Premium
Good morning, Rebecca. Thank you for looking over my tutorial. Bookmark, do that mean you like it? LOL.

You know I have a lot more on the way?
Reply
amgolf Premium
THis is great training about HTML that I have not seen before.
Thank you so much
Reply
seconds2work Premium
Thank you brother, for choosing my training. I hope it help you. Do you have any questions?
Reply
MKearns Premium
This is a great training LeNard. I used to-do some HTML coding back before the 2001 dotcom crash!
Reply
seconds2work Premium
Hi, Michael, I've been playing around with coding off and on for some time now. It's not as hard as I thought it would be. It's got is hard moments at times, it's truly is one of the easy languages to learn.

Thanks for the comments.
Reply
gs1954 Premium
Thanks for the lessons. I like wordpress because you don't have to use html,css and javascript. I have learnt a few html things for using in widgets, but otherwise i just use the normal post editor and don't touch html. Only when i have problems, which are very few, do i touch html code.
I like it that way.
Cheers
Reply
seconds2work Premium
Gregory, thank you, for reading the tutorial. I also like to use Wordpress, but every once in a while you will run into someone who wants a picture in a special spot.

Coding is great to learn about. It will allow you complete control of your outlook.
Reply
Top