Qarpeo LogoInstitute

Syntax

HTML syntax includes angle-bracketed tags with opening and closing elements, attributes for additional information, and begins with <!DOCTYPE html> to define the document structure.

HTML Syntax

HTML syntax is written in text files with a .html extension. These files contain elements that tell web browsers how to display content. The elements form a structured tree that organizes information in a meaningful way.

Writing HTML Code

To get started, you can write or paste the following HTML code into a text editor like Notepad:

My First Heading

My first paragraph.

index.html
<!DOCTYPE html>
<html>
<head>
  <title>Web Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>
The content inside the <body> section is displayed on the browser, while the content inside the <title> element appears in the browser’s title bar or tab.

HTML Basics

HTML, or HyperText Markup Language, is the foundation for building websites. It provides the structure and layout for a webpage using various tags and elements.

HTML Document Structure

  • Every HTML document begins with a document type declaration: <!DOCTYPE>.
  • The document starts with the <html> tag and ends with the closing </html>.
  • The content that appears on the webpage is enclosed within the <body> tag.
My First Heading

My first paragraph.

index.html
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Both .htm and .html extensions can be used interchangeably. Choose the one you prefer.

The <!DOCTYPE> Declaration

  • The <!DOCTYPE> declaration indicates the document type and helps browsers render the page correctly.
  • It must appear at the very beginning of the HTML file, before any other tags.
  • The declaration is case-insensitive.
  • The standard declaration for HTML5 is:
index.html
<!DOCTYPE html>

HTML Headings

HTML headings range from <h1> to <h6>, with <h1> being the most important heading and <h6> being the least important.

This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
index.html
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

My First Heading

This is a paragraph.

index.html
<h1>My First Heading</h1>
<p>This is a paragraph.</p>

HTML Links

Links in HTML are created using the <a> tag:

  • The destination URL is defined using the href attribute.
  • Attributes provide additional details about the HTML element.
  • Further details on attributes will be explored in upcoming sections.

HTML Images

Images are added with the <img> tag. Common attributes include:

  • src: Specifies the image source file.
  • alt: Provides alternative text for the image if it cannot be displayed.
  • width and height: Set the image's dimensions.

Viewing HTML Source Code

If you're curious about how a webpage is structured, you can inspect its HTML source.

View HTML Source Code
To view the raw HTML of a webpage, press CTRL + U or right-click and select View Page Source.

Inspect an HTML Element
To examine specific elements, right-click on the webpage and choose Inspect. This opens the developer tools, where you can view and modify the HTML and CSS in real time.

Conclusion

HTML is the core of web development, establishing the structure of webpages. Using essential tags such as <h1>, <p>, <a>, and <img>, developers can create well-organized and meaningful content. Mastering these basics is the first step in becoming proficient in web development.

Getting Started

HTML or Hypertext Markup Language is the main language for creating and structuring webpages. It uses tags for formatting elements and is commonly combined with CSS and JavaScript.

Comments

HTML comments are notes written as <!-- comment --> that remain hidden in the browser, allowing developers to annotate and clarify their code.