This document aims to assist local users learning Framer who face difficulties due to the lack of Korean resources by translating official blog content into Korean and adding practical information. We hope it is of some help to those using Framer.

Why You Need to Understand HTML Tags

HTML tags aren't just for displaying content. They enhance web accessibility and help search engines better understand the content. As a result, HTML tags can help improve both the SEO performance and user experience of a site.

Semantic Structure

<article>
Use for main content that can be read independently such as blog posts, case studies, or product manuals. It is recommended not to use for wrapping common elements like headers or footers.

<aside>
Use for displaying auxiliary information like sidebars, related links, or callouts. While visually distinct, it should maintain contextual relevance.

<main>
Represents the core content area of the page and does not include navigational or repeated elements.

Interactive Elements

<button>
It's always best to use the <button> tag for prompting user actions such as form submissions, menu toggles, or viewing more content. This ensures compatibility and accessibility, especially with screen readers.

Avoid Using Non-semantic Tags
Avoid using <div> or <span> for interaction purposes. Instead, use tags that fit the intention, which is beneficial for both web standards and accessibility.

Grouping Content

<div>
Suitable as a container used for controlling styling or JavaScript functionality rather than conveying meaning.

<figure>, <figcaption>
Use when providing explanatory captions with images, charts, or code snippets. This clarifies the visual context and enhances user understanding.

Navigation and Layout

<header>
Appropriate for the top area of a site or section, fitting for navigation bars or hero sections.

<nav>
Clarifies the functionality of all navigation bars such as header links, footer links, and sidebar menus to improve semantic structure and usability.

Lists and Hierarchies

<ol>, <ul>
Suitable for functional lists like feature analysis, step-by-step guides, or navigation menus. Pay more attention to proper indentation and maintaining hierarchy in unordered contexts.

Tags for Clear Structure

<section>
Use to divide the page into logical blocks like testimonials, service introductions, or feature highlights.

<footer>
Placed at the bottom of the entire site or specific sections, it's good for including supplemental navigation, copyright text, or subscription forms.

Conclusion

If you understand HTML tags not just as tools for visual design but as a language for creating meaningful content structures, websites become easier to use and more favorable for search engines to recognize. Just by selecting and structuring tags accurately, your site can advance in accessibility, usability, and SEO.

This article is translated and adapted from Framer's official blog content titled ‘Understanding HTML Tags’.