What Are Headings in a WYSIWYG Editor?

Using headings correctly in a WYSIWYG editor helps organize webpage content into clear and meaningful sections. A WYSIWYG editor allows users to select heading styles visually instead of manually typing HTML tags.

HTML provides several heading levels, including <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. These headings create a logical structure for the information presented on a webpage.

Understanding H1, H2, and H3

H1 – Main Topic

The <h1> heading generally identifies the main topic of a webpage. It should clearly describe what the page is about. For example, on this page the main heading is Using Headings Correctly in WYSIWYG Editor.

H2 – Major Sections

The <h2> heading is normally used for major sections beneath the main topic. It divides a long article into logical sections that are easier to read and understand.

H3 – Supporting Sections

The <h3> heading can be used for subsections within an H2 section. It provides another level of organization when a topic contains several related points.

Example of a Proper Heading Hierarchy

A well-structured webpage can use headings in a hierarchy. For example:

This structure makes it easier for readers to understand the relationship between the main topic, major sections, and supporting subsections.

How to Add Headings in a WYSIWYG Editor

1. Open your webpage or document in the WYSIWYG editor.
2. Place the cursor where you want to add a heading.
3. Select the appropriate heading option from the formatting toolbar.
4. Choose H1 for the main page topic when appropriate.
5. Use H2 for major sections of the page.
6. Use H3 for subsections within an H2 section.
7. Review the page to make sure the heading hierarchy is logical.

Why Correct Heading Structure Matters

Improves Readability

Proper headings break large amounts of text into manageable sections. Readers can quickly scan the page and find the information they need.

Creates Logical Organization

A logical heading hierarchy shows how different parts of an article are related. H2 sections belong to the main topic, while H3 sections provide additional detail within those sections.

Helps Maintain Consistent Webpage Structure

Using heading levels consistently makes webpages easier to maintain when content is edited or expanded later.

Supports Accessible Content Structure

A meaningful heading hierarchy can also help users navigate structured content more efficiently, particularly when using assistive technologies.

Common Heading Mistakes

• Using headings only to make text look bigger.
• Using multiple unrelated H1 headings without a clear reason.
• Skipping heading levels without considering the document structure.
• Using H3 headings when there is no related H2 section.
• Creating headings that do not describe the content below them.

A WYSIWYG editor makes formatting easy, but users should still understand the HTML structure created by the editor.

Headings and HTML Source Code

Many WYSIWYG editors provide a source-code or HTML view. When a user selects a heading style, the editor generally generates the corresponding HTML heading element.

Understanding these basic HTML elements can help users create better structured webpages while working with visual editors.

For more information, see the WYSIWYG HTML Editor article.

Best Practices for Using Headings

• Use a clear main heading that describes the page topic.
• Use H2 headings to divide the page into major sections.
• Use H3 headings for related subsections.
• Keep heading text short, descriptive, and meaningful.
• Maintain a logical hierarchy throughout the page.
• Do not select headings simply because of their visual appearance.
• Use CSS for visual styling when you want to change heading size or appearance.

Conclusion

Using headings correctly in a WYSIWYG editor helps create organized, readable, and logically structured webpages. The H1 heading generally identifies the main topic, while H2 and H3 headings organize major sections and supporting subsections.

By selecting heading levels according to their structural purpose rather than their visual appearance, users can create cleaner and more meaningful HTML documents. This is an important skill for anyone learning to create webpages with a WYSIWYG HTML editor .