HTML Syntax And Pattern

Table Of Content-

HTML Syntax And Pattern:
First Always Declare Document Type:
Close All HTML Tags:
Use Lowercase Element Names:
Always Quote Attribute Values:
Spaces and Equal Signs:
Blank Lines and Indentation:
Use Lowercase Attribute Names:
Images should always include width, height and alt:
Shorten Your Code:
Don’t Ignore the <title> :
Are you skipping the head?:
Omitting <html> and <body>?:
Is empty HTML closed?:
Meta Data:
Don’t Miss lang Attribute:
Set Viewport:
HTML Comments:
Style Sheets:
Using HTML to load JavaScript:
Using JavaScript to access HTML elements:
Proper File Extensions:
.htm vs .html – What’s the difference?:
Lower Case File Names:
Default Filenames:
Importance of HTML Syntax And Pattern:

In this article, we will discuss HTML syntax and pattern. If you maintain your HTML code in an organized, consistent, and clean manner, it will be easier to read, understand, and maintain.

Here are some guidelines for those who would like to learn how to write proper HTML code.

First Always Declare Document Type

Make sure you declare the document type at the very beginning of your document.

HTML documents should be typed as follows:

<!DOCTYPE html>

Close All HTML Tags

It is unnecessary to close all HTML elements like <p> tag in Html.

It is highly advised that you must close all HTML elements given in below example:

Good Practice

<!DOCTYPE html> <html><body><br><br><br><div><br><p> Mr Examples </p><br></div><br><br><br> </body></html>

Wrong Syntax

<!DOCTYPE html>
<html>
<body>
<div>
<p> Mr Examples
</div>
</body>
</html>

Execute

Use Lowercase Element Names

When naming elements, HTML allows uppercase and lowercase letters to be used together.

It is advised, however, that element names should be in lowercase, as follows:

Mixed upper- and lowercase names look sloppy and are challenging to read.
Lowercase names are usually used by developers.
Utilizing lowercase is more appealing.
There is less confusion when writing in lowercase.

Good Practice

<!DOCTYPE html> <html><body><br><p>This is a paragraph.</p><br> </body></html>

Example: Bad Practice

<!DOCTYPE html> <html><body><br><br><br><p>This is a paragraph.</p><br><br> </body></html>

Always Quote Attribute Values

HTML Syntax allows attribute values without quotes.

Quoted attribute values are recommended, however, since:

Attribute values are typically quoted by developers.
Readability is improved by quoted values.
Any value containing spaces MUST be enclosed in quotes.

Perfect Example

<!DOCTYPE html> <html><body><br><br><br><table class="Stitched"><br></table><br><br> </body></html>

Bad Practice

<!DOCTYPE html> <html><body><br><br><br><table class="Stitched"><br></table><br><br> </body></html>

The value contains spaces, so this won’t work:

Wrong Syntax

<!DOCTYPE html> <html><body><br><br><br><table class="table" stitched><br></table><br><br> </body></html>

Spaces and Equal Signs

Equal signs are permitted to have spaces around them in HTML. The space-less format is easier to read and makes it easier to group entities.

Good Practice

<!DOCTYPE html> <html><body><br><br><br><link rel="stylesheet" href="styles.css"><br><br> </body></html>

Example: Bad Practice

<!DOCTYPE html> <html><body><br><br><br><link rel="stylesheet" href="styles.css"><br><br> </body></html>

Blank Lines and Indentation:

When we talk about HTML Syntax then, Indentations, spaces, and blank lines should never be added without cause.

When splitting lengthy or logical codes, add blank lines to enhance readability.

Added two spaces of indentation makes it more comfortable to read. It would be best if you did not use the tab key.

Good Practice

<!DOCTYPE html> <html><body><br><br><br><h1>Quantum computers</h1><br><h2>What is Quantum Computers?</h2><br><p>Superposition and entanglement are quantum-mechanical phenomena used by quantum computers for data processing. Qubits are quantum information units that are used in quantum computers.</p><br><h2>Quantum computers vs. conventional computers</h2><br><p>There are many differences between quantum computers and the computers we use today. There are only two types of bits in conventional computers: ones and zeros. There are qubits in quantum computers that can be either 1 or 0. Multiple calculations can be performed simultaneously. Compared to conventional computers, quantum computers are also much faster. A conventional computer takes many times longer to solve a problem than a quantum computer.</p><br><h2>When we can use it?</h2><br><p>In order for quantum computing to be used on a large scale, many challenges must be overcome. Quantum computing has enormous potential benefits, however. Many industries, including medicine, finance, and manufacturing, may be revolutionized by it.</p><br><br> </body></html>

Bad Practice

<!DOCTYPE html> <html><body><br><br><h1>Quantum computers</h1><br><h2>What is Quantum Computers?</h2><p>Superposition and entanglement are quantum-mechanical phenomena used by quantum computers for data processing. Qubits are quantum information units that are used in quantum computers.</p><br><h2>Quantum computers vs. conventional computers</h2><p>There are many differences between quantum computers and the computers we use today. There are only two types of bits in conventional computers: ones and zeros. There are qubits in quantum computers that can be either 1 or 0. Multiple calculations can be performed simultaneously. Compared to conventional computers, quantum computers are also much faster. A conventional computer takes many times longer to solve a problem than a quantum computer.</p><br><h2>When we can use it?</h2><p>In order for quantum computing to be used on a large scale, many challenges must be overcome. Quantum computing has enormous potential benefits, however. Many industries, including medicine, finance, and manufacturing, may be revolutionized by it.</p><br><br> </body></html>

Good Table Example

<!DOCTYPE html> <html><body><br><table><br><tr><br><th>Name</th><br><th>Description</th><br></tr><br><tr><br><td>A</td><br><td>Description of A</td><br></tr><br><tr><br><td>B</td><br><td>Description of B</td><br></tr><br></table> </body></html>

Good List Example

<!DOCTYPE html> <html><body><br><ul><br><li>What is Quantum Computers?</li><br><li>Quantum computers vs. conventional computers</li><br><li>When we can use it?</li><br></ul> </body></html>

Use Lowercase Attribute Names

You may use either capital or lowercase letters for an attribute’s name in HTML when it comes to HTML Syntax.

Attribute names should be lowercase, nevertheless, for the reasons stated below.

Case-sensitive names are more professional looking than those that mix capitalization and lowercase letters.
Coders often only capitalize the first letter of a name.
The lowercase version is the more aesthetically pleasing one.
Less mental energy is required while using lowercase letters.

Readable Document

<!DOCTYPE html> <html><body><br><br><br><a href="https://mrexamples.com/html/">See our HTML tutorial for more information</a><br><br> </body></html>

Not Readable Document

<!DOCTYPE html> <html><body><br><a href="https://mrexamples.com/html/">LeArN HtMl bY vIsItInG oUr tuTorIal pAgE</a> </body></html>

Images should always include width, height and alt

Alt attributes should always be set for images. In the event that a picture cannot be portrayed for some reason, this attribute is essential.

Ensure that images are always described in terms of their width and height. Because of this, flickering is decreased. The browser can commit the area before loading the picture. This is an excellent guide to HTML Syntax.

Good Practice

<!DOCTYPE html> <html><body><br><br><br><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif" alt="Alt is defined" style="width:224px;height:224px"><br><br> </body></html>

Bad Practice

<!DOCTYPE html> <html><body><br><br><br><img src="https://mrexamples.com/wp-content/uploads/html_images/html5.gif"><br><br> </body></html>

Shorten Your Code

Scrolling right and left are not fortunate for reading HTML code in an HTML editor.

Whenever possible, dodge writing lengthy code lines. The HTML Syntax & Pattern is defined here.

Don’t Ignore the <title> :

HTML mandates the title element. SEO (search engine optimization) relies heavily on the content of a page title. In search results, search engines use page titles to determine their order. This document describes the proper HTML Syntax and pattern.

A title element consists of the following:

Defining the title of the toolbar in the browser
When a page is added to favorites, it receives a title.
Search engine results include a title for the page.

Tip : Be sure to give the title as much meaning and accuracy as possible.

Are you skipping the head?

There is also the choice of skipping the HTML <head> tag.

Head is default added to all elements before the body in most browsers.

Example

<!DOCTYPE html> <html> <head><title>Without Head tag</title> </head><body><h1>There is no head tag in start of this example</h1> <p>We have missed head tag.</p></body> </html>

Tip : Our recommendation is to use the <head> tag.

Omitting <html> and <body>?

In the absence of <html> and <body> tags, an HTML page is valid:

Example

<!DOCTYPE html> <html><head> <title>Here Is A Page Title</title> </head><body><h1>And this is a heading</h1> <p>A paragraph.</p></body></html>

You should always add the <html> and <body> tags!

There may be errors in older browsers if you forget the <body> tag.

A DOM or XML software crash can also occur when <html> and <body> are forgotten.

Is empty HTML closed?

The closing of empty elements is optional in HTML.

Advised

<!DOCTYPE html> <html><body><br><br><br><meta charset="utf-8"><br><br> </body></html>

Another Way

<!DOCTYPE html> <html><body><br><br><br><meta charset="utf-8"><br><br> </body></html>

Important: You must keep the closing slash (/) if you expect XML / XHTML software to access your page.

Meta Data:

The language and the character encoding of the HTML document should both be represented as earlier as feasible <meta charset=”charset”> to confirm the text will be appropriately comprehended and indexed by search engines.

Example:

<!DOCTYPE html> <html><body><br>lang="en-us"><br><br><meta charset="UTF-8"><title>Example Page Title</title><br> </body></html>

Don’t Miss lang Attribute:

It is still advised to have the lang attribute within the <html> tag to declare the language of the Web page. Search engines and browsers will benefit from this when it comes to HTML Syntax .

Example

<!DOCTYPE html> <html lang="en-us"> <head> <title>We have lang attribute before head</title> </head> <body><h1>This is an example heading</h1> <p>And this is a paragraph.</p></body> </html>

Set Viewport:

Viewports are areas of a website which are visible to the user as they navigate it. Mobile phones have smaller screens than computers, so they will differ depending on the device as it comes to HTML Syntax.

On all your web pages, you should include the following:

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

It tells the browser how to regulate the size and dimensions of the page.

By setting the width=device-width part, the width of the page is determined by the device’s screen width (which may vary).

When the browser preferably loads the page, the initial-scale=1.0 part sets the zoom level.

The following are examples of web pages without and with viewport meta tags:

Tip: To better understand HTML Syntax And Patterns, you can click on the two images below if you are browsing this page with a phone or tablet.

Without the
viewport meta tag

With the
viewport meta tag

HTML Comments:

You should write short comments on a single line, like this:

<!– This is a comment –>

For comments that span more than one line, write them as follows:

Example:

<!DOCTYPE html> <html><body><br><br><br><p>When we take a look at this illustration, we can plainly see that it is rather lengthy.<br>--></p><br><br> </body></html>

When long comments are indented with two spaces, they are much simpler to understand and analyze. Adhering to the principles of HTML Syntax is a recommended best practice.

Style Sheets:

You should use straightforward syntax for linking to style sheets if you wish to follow HTML Style Syntax And Pattern. (the type attribute is not necessary)

The following is an example of a short CSS rule that can be shortened:

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

It is best to document lengthy CSS rules over numerous lines:

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

Please keep this in mind:

Ensure that the opening bracket and the selector are on the same line
The opening bracket should be preceded by one space
You should use two spaces for indentation
You should use a semicolon after each property-value pair, including the last one
You should only use quotes around values if they contain spaces
Do not include leading spaces in the closing bracket

Using HTML to load JavaScript:

Load external scripts using simple syntax (the type attribute is not needed):

Using JavaScript to access HTML elements:

In some cases, JavaScript errors can be caused by untidy HTML code. A different result will be produced by these two JavaScript statements:

Example

<!DOCTYPE html> <html> <body> <script>getElementById("Example").innerHTML = "Hello"; getElementById("example").innerHTML= "Hello";</script> </body> </html>

Tip : You can find more information about JavaScript style guides here.

Proper File Extensions:

A .html extension is required for HTML files (.htm is also acceptable).

.css is the extension for CSS files and .js is the extension for JavaScript files.

.htm vs .html – What’s the difference?

It does not matter whether the extension is .htm or .html – Any web browser and the server will treat both as HTML.

Lower Case File Names:

Some web servers (Apache, Unix) are case-sensitive: “newyork.jpg” cannot be accessed as “Newyork.jpg.”

Other web servers (Microsoft, IIS) don’t care about case: “Newyork.jpg” works too.

You must be careful with mixed case. Even little faults can destroy your site if you switch to a case-sensitive server.

Lowercase file names prevent these issues.

Default Filenames:

It is standard practice for web servers to add a default filename to URLs without specifying one (for example, “https://mrexamples.com/”)
The default.html, default.html, or default.htm file.

Your server must be configured with a default file name of “index.html”, not “default.html”.

In most cases, server configurations allow for more than one default filename; you can usually set up an unlimited number.

Importance of HTML Syntax And Pattern

Importance of HTML Syntax and Pattern The syntax and pattern of HTML play a vital role in creating well-structured and readable web pages. Here are some reasons why they are important:

Consistency: HTML syntax and pattern provide a standard set of rules that ensure consistency across different web pages. This consistency makes it easier for users to navigate the web and find the information they need.
Accessibility: HTML syntax and pattern help to ensure that web pages are accessible to everyone, including people with disabilities. By following the correct syntax and pattern, web developers can create web pages that are compatible with assistive technologies such as screen readers.
Search Engine Optimization (SEO): HTML syntax and pattern play a crucial role in SEO. Search engines use these rules to crawl and index web pages, which affects their ranking in search results. By following the correct syntax and pattern, web developers can improve the visibility of their web pages in search results.
Readability: HTML syntax and pattern make web pages more readable by providing structure and hierarchy. Headings, paragraphs, and lists are just a few examples of HTML elements that help to organize content and make it easier to read.

If this article somehow fulfilled your educational desires, do subscribe to our Newsletter below to get connected to the technical news on this site.

We value your feedback.