HTML Styles | Style Guide | Coding

the HTML style attribute is used to add styles to an element, such as color, font, size, and more.

Example

I am Red 
I am Blue 
I am Big

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value. You will learn more about CSS later in this tutorial.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example

Set the background color for a page to powderblue:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

Example

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Text Color

The CSS color property defines the text color for an HTML element:

Example

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size

The CSS font-size property defines the text size for an HTML element:

Example

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML element:

Example

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

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 look cleaner
  • Lowercase are easier to write

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.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Spaces and Equal Signs

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

<link rel="stylesheet" href="styles.css">

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.

<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>

Never Skip the <title> Element

The <title> 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.

The <title> element:

  • 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: 

<title>HTML Style Guide and Coding Conventions</title>

Omitting <html> and <body>?

An HTML page will validate without the <html> and <body> tags:

Example

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

However, we strongly recommend to always add the <html> and <body> tags! Omitting <body> can produce errors in older browsers. Omitting <html> and <body> can also crash DOM and XML software.

Omitting <head>?

The HTML <head> tag can also be omitted. Browsers will add all elements before <body>, to a default <head> element.

Example

<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Close Empty HTML Elements?

In HTML, it is optional to close empty elements.

Allowed:

<meta charset="utf-8">

Add the lang Attribute

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

Example

<!DOCTYPE html>
<html lang="en-us">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
HTML Styles | Style Guide | Coding
Show Buttons
Hide Buttons