Coding Ninjas - Master Programming Skills

HTML Syntax

HTML syntax refers to the set of rules and structure that define how HTML code should be written. Understanding HTML syntax is essential for creating valid, well-structured web pages that work correctly across all browsers.

HTML syntax is relatively simple and follows a consistent pattern. Once you understand the basic rules, you can create any web page you can imagine.

HTML Tags

HTML uses tags to mark up content. Tags are keywords enclosed in angle brackets < >. Most HTML elements consist of an opening tag and a closing tag, with content in between.

The basic syntax of an HTML tag is:

The opening tag is <tagname> and the closing tag is </tagname>. Notice the forward slash (/) in the closing tag.

Examples of HTML Tags

HTML Elements

An HTML element is everything from the start tag to the end tag, including the content in between:

Start tag (Opening tag): <tagname> - Marks the beginning of an element
Content: The text, images, or other elements between the tags
End tag (Closing tag): </tagname> - Marks the end of an element

Here's a visual breakdown:

Nested HTML Elements

HTML elements can be nested, meaning you can put elements inside other elements. This is how you create complex page structures.

In this example, the <h2> and <p> elements are nested inside the <div> element. The <strong> element is nested inside the <p> element.

Always close nested elements in the reverse order they were opened.
Proper nesting: <p><strong>text</strong></p>
Improper nesting: <p><strong>text</p></strong> (Wrong!)

HTML Attributes

HTML attributes provide additional information about HTML elements. Attributes are always specified in the start tag and usually come in name/value pairs like: name="value"

Common HTML Attributes

href - Specifies the URL for links (<a> tag)
src - Specifies the source file for images, scripts, etc.
alt - Provides alternative text for images
class - Specifies one or more class names for CSS styling
id - Specifies a unique id for an element
style - Specifies inline CSS styles
title - Provides extra information (tooltip on hover)

Empty HTML Elements

Some HTML elements have no content and no closing tag. These are called empty elements or self-closing elements.

Common empty elements include:

<br> - Line break
<hr> - Horizontal rule (line)
<img> - Image
<input> - Input field
<meta> - Metadata
<link> - Link to external resources

Complete HTML Document Structure

Every HTML document should follow this standard structure:

Structure Explained

<!DOCTYPE html> - Declares this is an HTML5 document. Must be the first line.
<html lang="en"> - Root element. The lang attribute specifies the language (en = English).
<head> - Contains metadata that doesn't appear on the page.
<meta charset="UTF-8"> - Specifies character encoding for proper text display.
<meta name="viewport"> - Makes the page responsive on mobile devices.
<title> - Sets the page title shown in browser tab and search results.
<body> - Contains all visible page content.
 - HTML comments are not displayed in the browser.

HTML Comments

Comments are used to add notes in your code that won't be displayed in the browser. They're useful for explaining your code or temporarily disabling code.

Case Sensitivity

HTML is not case-sensitive, which means <P> is the same as <p>. However, it's strongly recommended to use lowercase for all tag names for consistency and better readability.

Valid	Also Valid	Recommended
<p>	<P>	<p>
<div>	<DIV>	<div>
<html>	<HTML>	<html>

Whitespace in HTML

HTML treats multiple spaces, tabs, and line breaks as a single space. This is called whitespace collapsing.

HTML Syntax Rules - Summary

Always close your HTML tags (except empty elements)
Use lowercase for tag names
Quote attribute values with double quotes
Use proper indentation for nested elements
Add comments to explain complex code
Follow the standard document structure
Validate your HTML code regularly

Following proper HTML syntax ensures your web pages work correctly across all browsers and are easier to maintain and debug. Good syntax is the foundation of professional web development.