Common HTML Tags

Introduction

In Wappler you rarely start by hand-typing markup, but HTML structure still decides whether a page stays maintainable. The editor, insert panel, and properties panel all sit on top of the same core tags: headings, paragraphs, sections, lists, links, images, buttons, and form elements.

This tour gives you the mental model for picking the right tag before you style or bind it.

Think in meaning first

Choose tags for what the content is, not just for how you want it to look. Styling and data binding are easier when the structure already makes sense.

What Wappler adds

Wappler helps you insert and edit these elements visually, but the underlying HTML still matters for accessibility, layout, and future maintenance.

Use headings to create page hierarchy.

Use paragraphs and lists for readable content blocks.

Use buttons for actions and links for navigation.

Use sections, containers, and groups to create meaningful page regions.

Choose the right element for the job

Most page-editing mistakes come from using one element as a universal substitute for everything else. These patterns keep the structure honest.

Text and structure

Headings, paragraphs, lists, and sections are your content skeleton. If those choices are right, the rest of the page is easier to style and easier to understand later.

Good habit

Reach for the semantic element first, then use classes to style it.

Navigation and actions

Links move the user somewhere. Buttons trigger an action. Keeping that distinction clear pays off when you later add events, routes, and accessibility labels.

Why it matters

This prevents pages from becoming visually correct but behaviorally confusing.

Media and form elements

Images, inputs, labels, and form controls each bring their own attributes and responsive concerns. Use the element that already carries the behavior you need instead of recreating it with generic containers.

Use built-in behavior

Start with the native element that already matches the job, then layer styling or bindings on top.

Next steps

Once you know which element belongs where, the next job is moving those elements safely and styling them cleanly.