Coding standards for html

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

HTML Coding Standards you must conform to when writing HTML in Xfive projects.

xfiveco/html-coding-standards

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

HTML Coding Standards you must conform to when writing HTML in Xfive projects.

• Write valid HTML
• Indentation
• Line endings
• Encoding and charset
• Special characters
• Images
• Images prefixes
• HTML anchors
• Comments
• Accessibility
• Attaching CSS and JavaScript files
• License

All HTML code must be valid and well formed. You must validate it against the HTML specification pertaining to the project you are working on. Unless another specification is requested or needed, use HTML5 Document Type Definition:

Element and attribute names must be in all lower case:

 input name pl-s">name" type pl-s">text" /> input name pl-s">name" TYPE pl-s">text" />

Non-empty elements must have corresponding closing tags.

Empty elements must be followed by a corresponding closing tag:

Elements with a single tag, such as HR, BR, INPUT, IMG must end with > :

br> hr> img src pl-s">john.jpg" alt pl-s">John Doe" width pl-s">200" height pl-s">100">

Nested elements must be nested appropriately — for example:

The

tag and its corresponding closing tag,

, are both nested inside the

tags.

If elements overlap they are not properly nested. This is illustrated in the following code:

Attribute values, even numeric attributes should be quoted—for example:

 input name pl-s">age" type pl-s">text" size pl-s">3" /> input name=age type=text size=3 />

Use soft tabs with 2 spaces for code indentation.

Use indentation consistently to enhance the readability of the code.

When elements carry over more than one line of code, indent the contents of elements between the start tag and the end tag. This will make it easy to see where the element begins and ends.

div class pl-s">container"> header class pl-s">header"> h1>Site Namespan>span>h1> header>  hr> nav class pl-s">navigation"> ul> li>a href pl-s">#">Linka>li> li>a href pl-s">#">Linka>li> li>a href pl-s">#">Linka>li> li>a href pl-s">#">Linka>li> li>a href pl-s">#">Linka>li> ul> nav>  div> 

Format files with \n as the line ending (Unix line endings). Do not use \r\n (Windows line endings) or \r (Apple OS’s).

Set encoding of HTML document and its charset to UTF-8 Normalization Form C (NFC):

Encode special characters, for example:

When you need to link to the section inside a HTML document use ID attribute:

a href pl-s">#section">linka> div id pl-s">section">div>

If it isn’t possible to use IDs (for example because of ASP.NET platform), use a named anchor:

a href pl-s">#section">linka> a name pl-s">section">a>

Insert ending comment after closing tag of the HTML section in this format:

Do not use starting comment.

ol class pl-s">accessibility-nav"> li>a href pl-s">#navigation">Skip to navigationa>li> li>a href pl-s">#content">Skip to contenta>li> li>a href pl-s">#sidebar">Skip to sidebara>li> ol>  p> a href pl-s">#" title pl-s">Go to homepage">em>Homeem>a> p> 

Adhere to basic accessibility principles when writing HTML.

• Use h1 — h6 to identify headings — Read more »
• Use structural elements to group links — Read more »
• Provide definitions for abbreviations by using the abbr and acronym elements — Read more »
• Use language attributes on html element to identify the default language of a document — Read more »

• Use table markup to present tabular information — Read more »
• Use the scope attribute to associate header cells and data cells in data tables — Read more »
• Use the summary attribute of the table element to give an overview of data tables — Read more »

• Provide submit buttons — Read more »
• Use alt attributes on images used as submit buttons — Read more »
• Use label elements to associate text labels with form controls — Read more »
• Use the title attribute to identify form controls when the label element cannot be used — Read more »
• Indicate required form controls — Read more »

• Use alt attributes on img elements — Read more »
• Use null alt text and no title attribute on img elements for images that Assistive Technology should ignore — Read more »

About

HTML Coding Standards you must conform to when writing HTML in Xfive projects.

Источник

HTML Style Guide

A consistent, clean, and tidy HTML code makes it easier for others to read and understand your code.

Here are some guidelines and tips for creating good HTML code.

Always Declare Document Type

Always declare the document type as the first line in your document.

The correct document type for HTML is:

Use Lowercase Element Names

HTML allows mixing uppercase and lowercase letters in element names.

However, we recommend using lowercase element names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to write

Good:

Bad:

Close All HTML Elements

In HTML, you do not have to close all elements (for example the

element).

However, we strongly recommend closing all HTML elements, like this:

Good:

Bad:

This is a paragraph.

This is a paragraph.

Use Lowercase Attribute Names

HTML allows mixing uppercase and lowercase letters in attribute names.

However, we recommend using lowercase attribute names, because:

• Mixing uppercase and lowercase names looks bad
• Developers normally use lowercase names
• Lowercase looks cleaner
• Lowercase is easier to write

Good:

Bad:

Always Quote Attribute Values

HTML allows attribute values without quotes.

However, we recommend quoting attribute values, because:

• Developers normally quote attribute values
• Quoted values are easier to read
• You MUST use quotes if the value contains spaces

Good:

This will not work, because the value contains spaces:

Always Specify alt, width, and height for Images

Always specify the alt attribute for images. This attribute is important if the image for some reason cannot be displayed.

Also, always define the width and height of images. This reduces flickering, because the browser can reserve space for the image before loading.

Good:

Bad:

Spaces and Equal Signs

HTML allows spaces around equal signs. But space-less is easier to read and groups entities better together.

Good:

Bad:

Avoid Long Code Lines

When using an HTML editor, it is NOT convenient to scroll right and left to read the HTML code.

Try to avoid too long code lines.

Blank Lines and Indentation

Do not add blank lines, spaces, or indentations 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.

Good:

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

Bad:

Famous Cities

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

London

London is the capital city of England. It is the most populous city in the United Kingdom.

Paris

Paris is the capital of France. The Paris area is one of the largest population centers in Europe.

Good Table Example:

Good List Example:

Never Skip the Element

The element is required in HTML.

The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.

• defines a title in the browser toolbar
• provides a title for the page when it is added to favorites
• displays a title for the page in search-engine results

So, try to make the title as accurate and meaningful as possible:

Omitting and ?

An HTML page will validate without the and tags:

Example

This is a heading

This is a paragraph.

However, we strongly recommend to always add the and tags!

Omitting can produce errors in older browsers.

Omitting and can also crash DOM and XML software.

Omitting ?

The HTML tag can also be omitted.

Browsers will add all elements before , to a default element.

Example

This is a heading

This is a paragraph.

However, we recommend using the tag.

Close Empty HTML Elements?

In HTML, it is optional to close empty elements.

Allowed:

Also Allowed:

If you expect XML/XHTML software to access your page, keep the closing slash (/), because it is required in XML and XHTML.

Add the lang Attribute

You should always include the lang attribute inside the tag, to declare the language of the Web page. This is meant to assist search engines and browsers.

Example

This is a heading

This is a paragraph.

Meta Data

To ensure proper interpretation and correct search engine indexing, both the language and the character encoding charset«> should be defined as early as possible in an HTML document:

Setting The Viewport

The viewport is the user’s visible area of a web page. It varies with the device — it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Источник