💡 An editor is ready below the article—experiment freely!
Updated: 2026年5月31日
Heading Levels
Original task (JA): 見出しの階層
📌
Conclusion
Heading Levels — free browser-based HTML practice
Why it matters in real projects
見出しは階層構造で使いましょう。h1は1ページに1つが推奨です。 Similar patterns appear daily in code review and production UI work.Step-by-step workflow
1. Read the guide and understand the goal of "Heading Levels" 2. Review the HTML editor pane and start from the starter code 3. Open hints if stuck; compare your diff with the sample solution 4. Click Run and inspect preview/console output 5. Auto-check looks for output containing: <h1>, <h2>, <h3>. 6. After success, continue with adjacent exercises in the same categoryCore concept explained
見出しは階層構造で使いましょう。h1は1ページに1つが推奨です。Technical focus
Key HTML elements in this task: h1, h2, h3.Hint before you peek at the solution
h1が最大、h2、h3と小さくなります。Sample solution walkthrough
The solution uses HTML tags such as h1, h2, h3. Check nesting and closing tags. Explanation: 見出しは階層構造で使いましょう。h1は1ページに1つが推奨です。 Hint recap: h1が最大、h2、h3と小さくなります。Solution code
📝 Sample code
<h1>私のページ</h1>
<h2>自己紹介</h2>
<h3>趣味</h3>Common mistakes for this exact task
・Skipping the hint: h1が最大、h2、h3と小さくなります。Troubleshooting
Q: Preview does not change after Run A: Ensure you edited the HTML pane and clicked Run. Q: Looks correct but check fails A: Auto-check looks for output containing: <h1>, <h2>, <h3>. Look for typos, full-width spaces, or unclosed tags. Q: Console shows errors A: Open DevTools Console and fix bracket/quote mismatches at the reported line. Q: Hard to type on mobile A: Use landscape mode or continue on desktop—the same URL keeps progress in localStorage.Interview / portfolio tips
・Explain the techniques in "Heading Levels" in your own words within 30 seconds ・Practice walking through each line of the sample solution on a whiteboard ・Be ready to discuss tags: h1, h2, h3 ・Mention responsive or accessibility trade-offs ・Prepare one alternative approach and why you chose this oneWhat to do after you pass
Move to the next exercise in the html-basic track, then continue the learning roadmap at /en/learning/html-basic/.Keywords
Free hands-on exercise covering 見出しの階層, html-basic, 入門, h1, h2, h3, heading levels—search-friendly guide for Heading Levels.🧪 Try it here — safe to break things
Use the editor below to write code and preview instantly.
Jump to editor■ Exercise task
好きなテーマで、h1、h2、h3の3つの見出しを階層順に作ってください。（例：私のページ、好きな映画の紹介など）
Hint if stuck
h1が最大、h2、h3と小さくなります。