Basic Web Design: Adding Headings and Images

icww9x6eh7 · Oct 21, 2024, 06:43 AM

SEO · Jul 31, 2025, 03:31 PM

To build a basic web page, you'll use two fundamental HTML elements: headings to structure your text and images to add visual content. Here's a breakdown of how they work.

1. Adding Headings
Headings are used to create a clear hierarchy for your content, making it easier for both users and search engines to understand the structure of your page.

HTML Heading Tags:
There are six levels of headings, from <h1> to <h6>. <h1> is the most important heading on the page, and <h6> is the least important. You should use them in a logical order, like an outline for a paper.

Example:
To add a main heading and a subheading, you would use the following code:

HTML

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>

<h1>Welcome to My Website</h1>
<h2>About Me</h2>
<p>This is a paragraph of text about me.</p>
<h3>My Hobbies</h3>
<p>I enjoy coding and reading books.</p>

</body>
</html>
<h1>: This tag is for the main title of your page. It should be used only once per page.

<h2>: This tag is for major sections or topics.

<h3>: This tag is for sub-sections within an <h2> section.

Best Practices for Headings:

Use them to organize your content logically.

Avoid skipping heading levels (e.g., going directly from <h1> to <h3>). This helps with accessibility and SEO.

Keep your headings concise and descriptive.

2. Adding Images
Images make your website more engaging and visually appealing. The <img> tag is used to insert an image into your web page.

HTML Image Tag:
The <img> tag is a self-closing tag, meaning it doesn't need a separate closing tag. It has a few important attributes:

src (Source): This is the most important attribute. It specifies the path to your image file. The path can be a relative path (e.g., images/my-photo.jpg) or an absolute URL from another website (e.g., https://www.example.com/images/my-photo.jpg).

alt (Alternative Text): This is crucial for accessibility and search engine optimization (SEO). It provides a text description of the image. This text is displayed if the image can't load, and it's read by screen readers for visually impaired users.

width and height: These attributes define the size of the image in pixels. While you can set these in HTML, it's often better practice to use CSS for more flexible styling.

Example:
To add an image to your web page, you would use this code:

HTML

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>

<h1>My Photo Gallery</h1>

<h2>A picture of my pet</h2>
<img src="images/dog-photo.jpg" alt="A cute dog wearing a red collar" width="400" height="300">

<h2>A picture from my vacation</h2>
<img src="images/beach-sunset.png" alt="A beautiful sunset over a tropical beach" width="500" height="350">

</body>
</html>
Best Practices for Images:

Descriptive alt text: Always provide a clear, descriptive alt attribute. This is vital for accessibility.

Optimize Images: Use a tool to compress your images before uploading them to your website. Large image files can significantly slow down your page load time, leading to a poor user experience.

Use the Right Format: Common web image formats include JPG for photos, PNG for images with transparency, and SVG for logos and icons.

Organize Your Files: It's good practice to create a dedicated folder (like images/) to store all your image files. This keeps your project organized and makes it easier to manage file paths.

Basic Web Design: Adding Headings and Images

icww9x6eh7

SEO

Didn't find what you were looking for? Search Below