2. Let’s Discuss The Following
• The HTML Doctype
• HTML Meta Tags
• HTML Body Tags
• HTML Standards Checklist
• Web Checklist
• W3C Validation
• Must for SEO compliant HTML
• HTML Best Practices
• HTML Importance for Web Developers
3. The Doctype is an instruction to the web browser about what
The HTML Doctype version of the markup language the page is written in.
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
//EN“ "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
4. The <meta> tag provides metadata about the HTML document,
HTML Meta Tags Meta elements are typically used to specify page description,
keywords, author of the document, and other metadata.
Tag Name Example(s) Description
The HTTP content type may
be extended to give the
<META HTTP-EQUIV="CONTENT-TYPE"
character set. It is
CONTENT-TYPE CONTENT="text/html; charset=UTF-
recommended to always use
8">
this tag and to specify the
character set.
Declares the primary natural
<META HTTP-EQUIV="CONTENT- language(s) of the document.
CONTENT-LANGUAGE LANGUAGE" May be used by search
CONTENT="en-US,fr"> engines to categorize by
language.
<META NAME="AUTHOR"
AUTHOR The author's name.
CONTENT="Tex Texin">
<META HTTP-EQUIV="CACHE- The directive CACHE-
CACHE-CONTROL CONTROL" CONTENT="NO-CACHE"> CONTROL:NO-CACHE indicates
cached information should
not be used
6. The body tag serves as the element containing all the content for
HTML Standard Tags the website. Tables, Lists, Forms, Paragraphs, everything must be
placed within the body element to be displayed on your site.
Tag Description Tag Description
<!--...--> Defines a comment <select> Defines a select list
<a> Defines an anchor <span> Defines a section
<area /> Defines an area inside an image-map <table> Defines a table
<base /> Defines a default address <td> Defines a cell in a table
<div> Defines a section in a document <tr> Defines a row in a table
<h1> to <h6> Defines HTML headings <tt> Defines teletype text
<ul> Defines an unordered list <textarea> Defines a multi-line text
<ol> Defines an ordered list <strike> Defines strikethrough text
<li> Defines a list item <p> Defines a paragraph
<menu> Deprecated. Defines a menu list <hr /> Defines a horizontal line
<object> Defines an embedded object <select> Defines a select list
<script> Defines a client-side script
7. Let’s Verify The HTML Document
HTML document can be verified by
1. Structure and visualization
2. HTML code
3. CSS Code
4. Structure
8. HTML Standard Checklist
Structure and Visualization
• Do not use <font> element.
• Move arrangement attributes (align, valign, width, height) to CSS.
• Do not use tables except showing table data. Using tables for visual
formatting is acceptable in complex situations only. Max table nesting can
not be great than 3.
• Move attribute "background" to CSS.
• Design of input fields and buttons must be written as class in CSS.
• Style table must be written as external file and linked using <link>
• All images related to design (not content) move to block with style
{background: transparent url("gif") no-repeat;}
9. HTML Standard Checklist
HTML Code
• If table cell contains only image with width and height, then don't
use these attributes for cell.
• Use minimum cols and rows for tables.
• All <image> elements must have "width" and "height" attributes.
• All <image> elements, which are not links, don't have "border" attribute.
• All attributes values must be placed in double quotes.
• All tags and attributes names must be in low case.
10. HTML Standard Checklist
CSS Code
• Unique elements must have "id" attribute, which is used for style.
Repeated elements must use classes.
• Determine background color for <body>
• Split declarations to groups (fonts, tables, text blocks, divs)
• Determine geometrical dimensions in percents or pixels.
• All colors values must be as short as possible and in upper case.
• All tags and attributes names must be in lower case.
• All margins and indents must be defined for all browsers.
• All classes and identifiers must be named logically with one naming
convention.
11. HTML Standards Checklist
Structure
• Use title, description and keywords in header.
• All elements with closing tags must have it (ideally, use XHTML 1.0
Transitional/Strict).
• Use alt attribute for <image>. If image don't have semantic meaning, alt
must be empty.
• Use comments before main blocks.
• Use standard tags for creating text structure
(<h1>-<h4>, <p>, <ul>, <il>, <li> and so one).
• Vertical and Horizontal menus must be defined using <li>.
• Blocks must be placed in document in the descending order of importance.
Blocks location can be defined using CSS.
12. Website Checklist
Validation Browser Independence
Validate the html Try different browsers
Validate the CSS check printed page
Check the broken links Switch javascript off
Flexibility Switch plug-in off
Try varying window size Switch image off
Try varying font size Other Checks
Speed Check non-reliance on mailto
Access the site via a modem Check no orphan page
Check the image size specification
Accessibility
Test accessibility
View in text browser
13. W3C Validation
Most Web documents are written using markup
language, such as HTML or XHTML, which usually
include a machine-readable formal grammar The
act of checking a document against these
constraints is called validation, and this is what
the Markup validator does.
14. The markup validator is free service by W3C that helps to check
Markup Validators the validity of web documents.
Common markup validators
• Unicorn (W3C unified validator)
• Markup Validator (It checks document like HTML)
• Link Checker (checks hyperlinks, find broken links)
• CSS Validator (validate css stylesheets)
• Log validator (improve whole site step by step)
• mobileOk checker (check websites mobile friendliness)
15. Must For SEO Compliant HTML
Checklist for SEO compliant HTML document
Validity
Accessibility
Content Behind Form
Use CSS
Heading Tags
Links
Images and Alt Tags
16. HTML Best Practices
Examine Your HTML Code
Always Declare a Doctype
Use Meaningful Title Tags
Use Descriptive Meta Tags
Always check your code for cross browser visibility
Use Divs to Divide Your Layout into Major Sections
Close Your Tags
Validate Your Code
Never Use Inline Javascript
Use Firebug
Choose a Great Code Editor
17. HTML Importance For Web Developers
• Knowing HTML will give you an understanding of how the Web works
• CSS determines how a page will look.
• Important to understand how JavaScript connects with website
• Medium of Appreciation
• It’s really not a rocket science
• Common Communication
• You will be a better asset
WEB DEVELOPER WEB DESIGNER
ASP/.NET Photoshop, Illustrator,
PHP, JavaScript, DHT (X)HTML Flash, Firework,
ML, Perl, SQL, MYSQL,Dreamweaver Typography, Color,
CSS
Theory, Web,
XML, XSL, AJAX, C++,C Accessibility and
#, C-Objective, Java Standards