HTMLの要素関係を知ろう!

要素を選択してください

HTMLを書き換えたい場合はこちらにHTMLをコピペしてください。

うまく反映されない場合はタグがセットになっているか確認してください。

<header class="main-header">
  <h1 class="title">Welcome to Our Website</h1>
  <nav class="main-nav">
    <ul class="nav-list">
      <li class="nav-item"><a href="#home">Home</a></li>
      <li class="nav-item"><a href="#about">About</a></li>
      <li class="nav-item"><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main class="content">
  <article class="main-article">
    <h2 class="article-title">Latest News</h2>
    <p class="article-content">
      We're excited to announce the launch of our new product line!
      Stay tuned for more information coming soon.
    </p>
  </article>
  <aside class="sidebar">
    <h3 class="sidebar-title">Quick Links</h3>
    <ul class="sidebar-list">
      <li class="sidebar-item"><a href="#products">Our Products</a></li>
      <li class="sidebar-item"><a href="#services">Our Services</a></li>
    </ul>
  </aside>
</main>
<footer class="main-footer">
  <p class="copyright">&copy; 2023 Our Company. All rights reserved.</p>
</footer>