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.