Basic HTML Structure and Essential Elements: A Beginner's Guide to Web Page Creation

Learn the fundamental structure and key elements of HTML5. This tutorial covers the basic HTML document structure, including `<head`> and `<body`>, explains essential elements like headings (`<h1`> to `<h6`>), paragraphs (`<p`>), and links (`<a`>), providing a foundational understanding of HTML.

Basic HTML Structure and Elements

Understanding HTML Documents

HTML (HyperText Markup Language) is the standard language for creating web pages. Every HTML document starts with a document type declaration (`<!DOCTYPE html>`), which specifies that the document is an HTML5 document. The main part of the HTML document is contained within the <html> tag, which is composed of two main sections: `<head>` and `<body>`. The <head> section contains meta-information about the document, and the <body> section contains the visible content.

Basic HTML Document Structure


<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
</head>
<body>
  <h1>My Heading</h1>
  <p>My paragraph.</p>
</body>
</html>

The <!DOCTYPE html> declaration is case-insensitive.

HTML Headings

HTML headings are defined using the <h1> to <h6> tags. <h1> is the main heading; <h6> is the smallest. Headings provide structure and improve the readability of a webpage.

Example: HTML Headings


<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

Paragraphs are created using the <p> tag. This is a basic way to structure blocks of text on a web page. Browsers automatically add space between paragraphs.

Example: HTML Paragraphs


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

HTML Links

Links are created using the <a> tag. The URL of the linked resource is specified using the href attribute. For example: <a href="https://www.example.com">Link</a>. Attributes provide additional information about HTML elements.

Example: HTML Links


<a href="https://www.example.com">Visit Example</a>

HTML Images

Images are added using the <img> tag. The `src` attribute specifies the image's URL; the `alt` attribute provides alternative text (important for accessibility). The `width` and `height` attributes or CSS styles can control the image's dimensions. It is a good idea to always specify `width` and `height` to prevent layout shifts while the image loads.

Example: HTML Images


<img src="myimage.jpg" alt="An image" width="100" height="100">

Viewing HTML Source Code

You can view the HTML source code of a webpage by pressing Ctrl+U or right-clicking and selecting "View Page Source". Browser developer tools provide more detailed insights into the page's structure and styles.