Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML CSS

0/1

HTML Links

0/3

HTML Images

0/3

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/8

HTML Lists

0/4

HTML Block and Inline

0/1

HTML Div

0/1

HTML classes

0/1

HTML id

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Layout

0/1

HTML Responsive

0/1

HTML Computer Code

0/1

HTML Semantic

0/1

HTML Style Guide

0/1

HTML Style Guide

10 minutes

HTML Entities

0/1

HTML Symbols

0/1

HTML Emojis

0/1

HTML Charsets

0/1

HTML URL Encode

0/1

HTML vs. XHTML

0/1

HTML Forms

0/6

HTML Graphics

0/2

HTML Media

0/5

HTML APIs

0/5

Text lesson

HTML Style Guide

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

Always Declare Document Type

Begin your document by declaring the document type as the first line.

For HTML, ensure you use the correct document type declaration.

<!DOCTYPE html>

Use Lowercase Element Names

While HTML permits mixing uppercase and lowercase letters in element names, it’s advisable to opt for lowercase names. Here’s why:

Mixing uppercase and lowercase names can appear inconsistent.
Developers typically prefer using lowercase names for consistency.
Lowercase names offer a cleaner aesthetic.
Writing in lowercase is generally easier and more intuitive.

Good:

<body>
<p>This is a paragraph.</p>
</body>

Bad:

<BODY>
<P>This is a paragraph.</P>
</BODY>

Close All HTML Elements

In HTML, it’s not mandatory to close all elements (e.g., the <p> element).

Nevertheless, we highly recommend closing all HTML elements, following this syntax:

Good:

<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>

Bad:

<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>

Use Lowercase Attribute Names

While HTML permits mixing uppercase and lowercase letters in attribute names, it’s advisable to opt for lowercase names. Here’s why:

Mixing uppercase and lowercase names can appear inconsistent.
Developers typically prefer using lowercase names for consistency.
Lowercase names offer a cleaner aesthetic.
Writing in lowercase is generally easier and more intuitive.

Good:

<a href=”https://www.w3schools.com/html/”>Visit our HTML tutorial</a>

Bad:

<a HREF=”https://www.w3schools.com/html/”>Visit our HTML tutorial</a>

Always Quote Attribute Values

Although HTML permits attribute values without quotes, it’s advisable to use quoted attribute values. Here’s why:

Developers typically enclose attribute values in quotes for consistency.
Quoted values enhance readability.
Quotes are necessary when the value contains spaces.

Good:

Bad:

Very bad:

This approach won’t function as expected due to the presence of spaces in the value.

Always Specify alt, width, and height for Images

It’s crucial to always include the alt attribute for images. This attribute serves as vital descriptive text if the image fails to display for any reason.

Additionally, it’s advisable to define the width and height of images. Doing so minimizes flickering by allowing the browser to allocate space for the image before loading it.

Good:

Bad:

Spaces and Equal Signs

While HTML permits spaces around equal signs, it’s generally easier to read and organize code without them. Keeping attribute-value pairs space-less enhances readability and groups entities more effectively.

Good:

Bad:

Avoid Long Code Lines

When working with an HTML editor, it’s inconvenient to constantly scroll horizontally to read the HTML code.

To enhance readability and usability, it’s best to avoid excessively long lines of code.

Blank Lines and Indentation

Avoid inserting blank lines, spaces, or indentations arbitrarily in your code.

For improved readability, include blank lines to separate sizable or cohesive code blocks.

Additionally, for enhanced readability, utilize two spaces for indentation instead of the tab key.

Good:

<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.</p>

<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>

<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>

</body>

Bad:

<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.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</p>
</body>

Good Table Example:

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  </tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  </tr>
</table>

Good List Example:

<ul>
  <li>London</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ul>

Never Skip the <title> Element

The <title> element is a mandatory component in HTML.

The content within the page title carries significant importance for Search Engine Optimization (SEO). Search engine algorithms utilize the page title to determine the ranking and order of pages listed in search results.

The <title> element performs several crucial functions:

It establishes a title visible in the browser toolbar.
It furnishes a title for the page when users add it to their favorites.
It presents a title for the page in search engine results.

Hence, it’s essential to craft the title with precision and relevance to enhance its effectiveness.

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

Omitting <html> and <body>?

An HTML page can pass validation even without the presence of <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, it’s highly advisable to consistently include the <html> and <body> tags in your HTML documents.

Excluding the <body> tag may lead to errors, particularly in older browser versions.

Furthermore, omitting both the <html> and <body> tags can potentially cause crashes in DOM and XML software.

Omitting <head>?

The HTML <head> tag is optional.

Browsers automatically append all elements before <body> to a default <head> element if the <head> tag is omitted.

Example

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

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

</body>
</html>

Nevertheless, we advise employing the <head> tag.

Close Empty HTML Elements?

Closing empty elements in HTML is optional.

Allowed:

Also Allowed:

If you anticipate XML/XHTML software accessing your page, ensure to include the closing slash (/) as it’s mandatory in XML and XHTML.

Add the lang Attribute

Including the lang attribute within the <html> tag is essential as it declares the language of the web page, aiding search engines and browsers in proper interpretation.

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>

Meta Data

For accurate interpretation and optimal search engine indexing, it’s crucial to define both the language and character encoding <meta charset=”charset”> as early as possible within an HTML document.

<!DOCTYPE html>
<html lang=”en-us”>
<head>
<meta charset=”UTF-8″>
<title>Page Title</title>
</head>

Setting The Viewport

On web pages, the viewport refers to the visible area for users, which changes according to the device being used – it’s typically smaller on mobile phones compared to computer screens.

It’s advisable to include the following <meta> element in all your web pages:

This provides the browser with directives on managing the page’s dimensions and scaling.

The “width=device-width” component adjusts the page’s width to match the device’s screen width, adapting to different devices.

The “initial-scale=1.0” portion establishes the initial zoom level when the browser loads the page.

Below is an illustration comparing a webpage before and after adding the viewport meta tag:

Hint: If you’re viewing this page on a phone or tablet, try tapping the two links below to observe the contrast.

ffa5a795-27ed-48a1-b4ef-cf9b51958129

HTML Comments

Concise comments should be single-lined, such as:

<!– This is a comment –>

Multi-line comments should be formatted as follows:

<!–
This is a long comment example. This is a long comment example.
This is a long comment example. This is a long comment example.
–>

Long comments are more readable when they are indented with two spaces for clarity.

Using Style Sheets

Simplify linking to style sheets by omitting the type attribute.

Short CSS rules can be compressed for brevity, like so:

p.intro {font-family:Verdana;font-size:16em;}

For lengthy CSS rules, it’s advisable to spread them across multiple lines:

body {
background-color: lightgrey;
font-family: “Arial Black”, Helvetica, sans-serif;
font-size: 16em;
color: black;
}

Ensure consistency in CSS formatting:

Begin each rule with the opening bracket on the same line as the selector, preceded by a single space.
Indent the properties and values with two spaces.
Conclude each property-value pair with a semicolon, even the last one.
Use quotes around values only when necessary, such as when they contain spaces.
Conclude each rule with the closing bracket on a new line, without leading spaces.

Loading JavaScript in HTML

Simplify the syntax for loading external scripts by omitting the type attribute.

Accessing HTML Elements with JavaScript

Employing messy HTML code may lead to JavaScript errors.

These two JavaScript statements yield distinct outcomes:

Example

getElementById(“Demo”).innerHTML = “Hello”;

getElementById(“demo”).innerHTML = “Hello”;

Use Lower Case File Names

Certain web servers, such as Apache on Unix systems, are case-sensitive regarding file names. For example, “london.jpg” cannot be accessed as “London.jpg”.

Conversely, other servers like Microsoft’s IIS are not case-sensitive. Thus, “london.jpg” can be accessed as “London.jpg”.

When employing a combination of upper and lowercase, it’s crucial to acknowledge this distinction.

Transitioning from a case-insensitive to a case-sensitive server can result in even minor discrepancies breaking your website.

To circumvent these issues, consistently employ lowercase file names!

File Extensions

HTML files are ideally given a .html extension (although .htm is permissible).

CSS files should end with a .css extension.

JavaScript files should conclude with a .js extension.

Differences Between .htm and .html?

The .htm and .html file extensions are functionally identical.

All web browsers and web servers interpret both extensions as HTML.

Default Filenames

When a URL lacks a specified filename at the end (e.g., “https://www.code7schools.com/“), the server typically appends a default filename like “index.html”, “index.htm”, “default.html”, or “default.htm”.

If your server is set up to recognize only “index.html” as the default filename, your file should be named “index.html” rather than “default.html”.

However, servers often allow configuration with multiple default filenames, giving you the flexibility to set up as many as needed.