Use Correct Document Type

Use Correct Document Type:
========================
<!DOCTYPE html>
Language Attribute:
<html lang = “en-us”>

</--- >
</html>
Use Lower Case Element Names:

===========================
 Mixing uppercase and lowercase names is bad
 Lowercase look cleaner
 Lowercase are easier to write
Bad:
====
<SECTION>
<p>This is a paragraph.</p>
</SECTION>
Very Bad:
=========
<Section>
</SECTION>
Good:
======
<section>
</section>
Image Attributes:
==============
 Always add the alt attribute to images.
Bad:
====
<img src="html5.gif">
Good:
======
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
Spaces and Equal Signs:

====================
Bad:
====
<link rel = "stylesheet" href = "styles.css">
Good:
======
<link rel="stylesheet" href="styles.css">
Blank Lines and Indentation:
=======================
 Do not add blank lines without a reason.
 For readability, add blank lines to separate large or logical code blocks.
 For readability, add two spaces of indentation. Do not use the tab key.
 Do not use unnecessary blank lines and indentation. It is not necessary to indent every
element.
Unnecessary:
===========
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>
</body>
Better:
=====
<body>
<h1>Famous Cities</h1>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most
populous metropolitan area in the world. It is the seat of the Japanese government and
the Imperial Palace, and the home of the Japanese Imperial Family.</p>
</body>
Declaring a language is important for accessibility applications (screen readers) and

search engines:
=======================================================================
<!DOCTYPE html>
<html lang="en-US">
Setting The Viewport:

==================
 A <meta> viewport element gives the browser instructions on how to control the page's
dimensions and scaling.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTML Comments:
================
Short comments should be written on one line, like this:

Comment’s that spans more than one line, should be written like this:
=========================================================

SEO INTEGRATION:
================
Use meta description it states extra information about your document
 Meta title contains 60-70 characters. (Primary Keyword - Secondary Keyword | Brand
Name)
 Meta description contains 160 to 300 characters.
 Meta keywords contains 20 ;( keywords contains repetition in title and description)
 h1 to h6 elements must be used at least once per entire project.
 Use alt attribute for every img element.
Example:
========
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
Indentation:
===========
 Use soft tabs with 2 spaces for code indentation.
Example:
========
<div class="container">
<header class="header">
<h1>Site Name<span></span></h1>
</header>

<hr>
<nav class="navigation">
<ul>
<li><a href="#">Link</a></li>
</ul>
</nav>

</div>

 Don't use spaces and use tabs

 Keep your home page title as index.html
 Don't use upper-case alphabets in your entire website design i.e directory names, project
name, image title
 Use meaningful comments to describe your sections in code
 Keep responsive for all pages as per device width
 Keep spacing and alignments properly to avoid typography errors.
 While writing css attributes for a class in a css file maintain alphabetical order.
 Do not use units for value 0.
 Use clear and precise names for IDs and classes.
 Choose names according to semantic meaning rather than presentation.

 Avoid using unnecessary classes and wrapper elements.
Self-closing Elements:
==================
<br />
Rather than the compact but incorrect: <br/>

Use Correct Document Type

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Use Correct Document Type

Hochgeladen von

Copyright:

Verfügbare Formate

Use Correct Document Type:

<html lang = “en-us”>

Use Lower Case Element Names:

Spaces and Equal Signs:

Declaring a language is important for accessibility applications (screen readers) and

Setting The Viewport:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 Don't use spaces and use tabs

 Choose names according to semantic meaning rather than presentation.

Das könnte Ihnen auch gefallen