HTML <h1> Tag
The <h1> tag represents the most important heading on a webpage, typically used for the main title of the page or section. It signals the primary topic and is crucial for both SEO and accessibility. Using the <h1> tag correctly helps search engines understand the page's content and provides clear structure for users.
Syntax
<h1 align="value" class="value" dir="value" id="value" style="value" title="value">
Main Heading Text
</h1>
Attributes
| Attribute | Value | Description |
|---|---|---|
align |
left, center, right, justify |
Specifies the horizontal alignment of the heading. (Deprecated in HTML5, use CSS instead) |
class |
classnames | Specifies one or more class names for styling using CSS. |
dir |
ltr, rtl |
Specifies the text direction for languages written right to left, like Arabic or Hebrew. |
id |
unique id | Specifies a unique ID for the heading element, useful for linking and scripting. |
style |
CSS properties | Specifies inline CSS styling for the heading element. |
title |
text | Specifies extra information about the heading, displayed as a tooltip. |
Example
<h1>Welcome to My Website</h1>
More Examples
Basic Usage
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Homepage</title>
</head>
<body>
<h1>My Amazing Homepage</h1>
<p>This is my website, where I talk about interesting things.</p>
</body>
</html>
This basic example shows a simple webpage with a main heading.
Adding an ID for Linking
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Article</title>
</head>
<body>
<h1 id="main-title">An In-depth Look at HTML Headings</h1>
<p>This article explains the importance of using proper headings in HTML.</p>
<a href="#main-title">Back to Main Title</a>
</body>
</html>
Here, an id is used so you can make a link back to the title of an article or section.
Styling with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Heading</title>
<style>
.fancy-heading {
color: navy;
text-align: center;
font-family: 'Arial', sans-serif;
}
</style>
</head>
<body>
<h1 class="fancy-heading">Welcome to Our Blog</h1>
<p>Check out our latest articles!</p>
</body>
</html>
This demonstrates how to apply styles to an h1 using the class attribute and CSS.
Using Inline Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Styled Heading</title>
</head>
<body>
<h1 style="color: green; font-size: 2em;">This is an inline styled Heading</h1>
</body>
</html>
This example showcases the style attribute for inline CSS.
Browser Support
The <h1> tag is supported by all modern browsers:
- Chrome
- Edge
- Firefox
- Safari
- Opera
Notes and Tips
- Use only one
<h1>per page: The<h1>tag should be used only once per HTML document to represent the most important topic of the page. - Maintain a clear hierarchy: Follow the
<h1>with<h2>for subheadings, then<h3>and so on. This helps create a logical structure and makes the content more understandable. - SEO considerations: Search engines use the
<h1>to understand the main topic of the page. Ensure the heading includes relevant keywords. - Accessibility: Proper heading structure enhances the navigation experience for users with assistive technologies like screen readers. Use headings to create clear navigation points within your page.
- Avoid styling: While you can style headings with attributes or CSS, avoid using
alignor other presentational attributes. Instead, use CSS for styling to keep your HTML semantic and clean. - Keep it concise: The
<h1>should be descriptive but not too long. It should provide a clear indication of what the page is about. - Text-based content: The
<h1>tag should generally contain text and not images or other non-text elements. Images can be included with descriptive text but try to avoid putting too much inside the heading.
