Understanding HTML Tags

Understanding and using HTML tags correctly can greatly improve accessibility, optimize search engine results, and enhance the overall user experience.

In this guide, we'll explore the strategic placement of HTML tags within Framer and discuss the benefits they offer to your website.

Article

Encapsulates the main content of a page, including the title and body, but excludes general site elements like navigation.

Aside

Represents content tangentially related to the content around it. Often used for sidebars or pull quotes.

Button

Creates a clickable button. Always use Button tag for interactive elements rather than relying on non-semantic elements like <div> or <span>.

Div

The <div> element in HTML is a generic container used to group other HTML elements and apply styles or scripting to them. It does not inherently provide any semantic meaning to the content it wraps. Its primary purpose is to structure and organize the layout of a webpage.

Figcaption

Provides a caption or description for the content inside <figure>.

Figure

Encapsulates any content that is referenced from the main content (such as images).

Main

Utilize the <main> tag to signify the main content of a website or section. This tag enhances the accessibility and usability of your website by simplifying navigation and aiding users in finding the information they seek.

Ol (Ordered List)

Use the <ol> element to create an ordered list, where each list item is numbered. The order of items has significance.

Ul (Unordered List)

The <ul> element is used to create an unordered list, where each list item is typically bulleted or marked with a different symbol. The order of items does not carry significance.

Footer

Designates the site's footer, typically containing secondary links and email sign-up sections. It can also be used within individual sections.

Header

Identifies the site's header or navigation bar, which can be a floating sticky bar. It's also applicable within sections.

Nav

Surrounds all navigation elements on a page, such as header links, footer links, or sidebar navigation.

Section

Marks a distinct section of your page, like a block for unique selling points (USPs) or testimonials.


If you encounter any issues or need further assistance, create a support ticket in the Community.