はじめに
この手順に従った実験では、HTML の<aside>タグの使い方を学びます。このタグは、メインコンテンツに関連するが必須ではないコンテンツを表示するために使用されます。
注：
index.htmlでコーディングを練習し、Visual Studio Code で HTML を書く方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080タブを更新して、ウェブページをプレビューできます。
HTML コンテンツのサイド
HTML ページのセットアップ
コードエディタを開き、index.htmlという名前の新しいファイルを作成し、次の基本的な HTML 構造を追加します。
<!doctype html>
<html>
<head>
<title>HTML Aside Tag Tutorial</title>
</head>
<body></body>
</html>メインコンテンツの作成
<body>タグの中に、いくつかのメインコンテンツを作成しましょう。次のコードを追加します。
<h1>Welcome to my blog!</h1>
<p>
In this article, we'll explore the benefits of using HTML5. HTML5 is a markup
language used for structuring and presenting content on the World Wide Web.
</p>aside コンテンツの追加
次に、メインコンテンツに関する追加情報を含む<aside>タグを追加しましょう。手順 2 の段落の下にこのコードを追加します。
<aside>
<h2>About this article</h2>
<p>
This article was written by John Doe, a web developer who has been working
in the industry for more than 8 years. He is passionate about web
development and loves to share his knowledge with others.
</p>
</aside>上記のコードを追加することで、記事に関する情報を含む<aside>タグを作成しました。この情報はメインコンテンツに関連していますが、必須ではありません。
次に、<aside>タグにいくつかのスタイルを与えるために以下の CSS を追加します。
<style>
aside {
width: 300px;
margin-left: 30px;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
}
</style>この CSS を追加することで、<aside>タグにいくつかのスタイルを与えました。幅を 300px に設定し、マージンを 30px に設定し、薄い灰色の背景と境界線があります。
記事に追加コンテンツを追加する
<aside>タグがどのように使用されるかをよりよく視覚化できるように、記事にさらにいくつかのコンテンツを追加しましょう。<aside>タグの下に次のコードを追加します。
<p>
HTML5 is an important update to the HTML language. It offers new features and
functionality, making it easier for developers to create web pages and
applications. Some of the new features in HTML5 include:
</p>
<ul>
<li>New semantic tags such as header, footer, article, and section</li>
<li>Improved support for multimedia with video and audio tags</li>
<li>Better accessibility with the nav and main tags</li>
</ul>上記のコードを追加することで、メインの記事にいくつかの追加コンテンツを追加しました。HTML5 に関する情報が含まれた箇条書きのリストがあります。
まとめ
この手順に沿った実験では、HTML の<aside>タグを使って Web ページのメインコンテンツに関連する追加コンテンツを追加する方法を学びました。また、CSS を使ってタグにいくつかのスタイルを追加する方法も学びました。<aside>タグを使用することで、検索エンジンや Web ブラウザがどのコンテンツが必須でどのコンテンツが必須でないかを理解するのに役立ちます。
