HTML and CSS Basics for SEO Professional
-
Upload
web-trainings-academy -
Category
Internet
-
view
387 -
download
1
description
Transcript of HTML and CSS Basics for SEO Professional
HTML and CSS
• HTML is not a programming language, it is a markup
language
• HTML consists of set of tags and attributes
• HTML is language used to develop any website
• Basic understanding of HTML is necessary for SEO
What is HTML?
– HTML 4.01 [2000]
– XHTML 1.1 [2001]
– HTML 5.0 [2014 – Recommendation]
HTML Editor :
– We can use either notepad or notepad++ or Dreamweaver to create
html pages.
HTML Versions
<doctype html> [To define version of html]<html><head><title> Welcome to site </title>
</head><body>
</body></html>
Structure of HTML
Tag and Attributes
<p align=“center”> Welcome to Site </p>
Start Tag Attribute Content End
Tag
HTML Tag Elements
• Head Elements
• Structure Elements
• Content Elements
• Multimedia Elements
• Form Element
SEO Related Head Tags
• Title Tag
• Meta Tags
• Canonical Tags
• CSS (Important for Optimization)
• Java Script (Important for Optimization)
• Heading Tags (To define page headings)
– <h1> </h1> <h2> </h2> ……. <h6> </h6>
• Paragraph : <p> </p> – To display content of the page
• Preformatted: <pre> </pre>– To display the content exactly as input format
• Span: <span> </span>– To display the inline content block
• Breaks : <hr/> and <br/>
• Comments : <!-- This is a comment -->
Content Tags
List Tags• Unordered List
<ul><li>Home</li><li>About Us</li><li>Clients</li>
</ul>
• Ordered List<ol><li>Home</li><li>About Us</li><li>Client</li>
</ol>
• Home• About Us• Clients
1. Home2. About Us3. Clients
Nested Lists • Unordered List
<ul> <li>Home</li><li>About Us
<ul> <li>Vision </li></ul> </li><li>Clients</li>
</ul>
• Ordered List<ol><li>Home</li><li>About Us<ol> <li>Vision </li> </ol> </li><li>Client</li>
</ol>
• Home• About Us
• Vision • Clients
1. Home2. About Us
1. Vision 3. Clients
• Links are used to create relation between pages or external site
Anchor Links
<a href=“page.html" target="_blank"> Link </a>
<a href=“http://www." target="_blank"> Link </a> External
Internal
<a href=“mailto:" target="_blank"> Link </a> Mail Link
Image Tag – To Display Images
Flash Tag - To Display Flash Animation
Graphic Tags
<img src=“image path” alt=“some text” width=“200” height=“200” border=“1”>
<object …> <embed> </embed> </object>
• To retrieve content from the other sources
• Using IFRAME in practical purpose
– Facebook Like Box– Google Maps – Youtube Video
• Generally not recommended for SEO Purpose
iFrame
<iframe src=“ ” width=“ ” height=“ ” frameborder=“ 0”> </iframe>
CSS Concepts
• Cascading Style Sheet is used to define the page design
– It controls how the elements are displayed– What are the dimensions of elements– What are the colors of the elements – CSS helps in developing Responsive Design
CSS Tags
• Internal CSS– <style> …. </style> - This is called as internal css
and must be avoided in website
• External CSS– <link rel=“stylesheet” href=“style.css” />– To include the CSS from external page
CSS in SEO Point of View
• Use CSS to design a responsive website.
• Optimize the CSS to load the site faster.
• Use a single CSS file rather than using multiple
CSS files, which decrease the requests.
• Avoid using the hidden elements with CSS
Java Script Basics
• JS is scripting language to implement features like sliders, validations and other useful concepts in webpage
• Internal JS– <script> </script>
• External JS– <script src=“file.js”> </script>
Java Script in SEO Point View
• Crawler can render basic Java Script.
• Crawler cannot render complex java script
• Provide the crucial content in HTML format
• Avoid using external Ajax Content to load content
in page
• Avoid Javascript Drop Down menus