TECH I.S.

HTMLの基本的な例


この章では、いくつかの基本的なHTMLの例を示します。

まだ学習していないタグが使用されていても心配しないでください。


HTMLドキュメント

すべてのHTMLドキュメントは、ドキュメントタイプ宣言で開始する必要があります:<!DOCTYPE html>

HTMLドキュメント自体は<html>で始まり</html>で終わります。

HTMLドキュメントの表示部分は<body>で始まり、</body>で終わります。

<!DOCTYPE html> <html> <body> <h1>最初の見出し</h1> <p>最初の段落</p> </body> </html>


<!DOCTYPE>宣言

<!DOCTYPE>宣言はドキュメントタイプを表し、ブラウザがWebページを正しく表示するのに役立ちます。

ページの上部(HTMLタグの前)に一度だけ表示する必要があります。

<!DOCTYPE>宣言は大文字と小文字を区別しません。 <!DOCTYPE>HTML5の宣言は次のとおりです。
<!DOCTYPE html>

HTMLの見出し

HTMLの見出しは、<h1>から<h6>タグまであります。

<h1>は最も重要な見出しを定義します。<h6>は最も重要でない見出しを定義します。

<h1>見出し1</h1> <h2>見出し2</h2> <h3>見出し3</h3>


HTML段落

HTML段落は、<p>タグで設定します。

<p>段落</p> <p>別の段落</p>


HTMLリンク

HTMLのリンクは、<a>タグで設定します。

<a href="https://techis.jp/guide">テックアイエスガイド</a>

リンク先はhref属性。

属性は、HTML要素に関する追加情報を提供するために使用されます。

属性の詳細については、後の章で説明します。


HTML画像

HTMLの画像は、<img>タグで設定します。

ソースファイル(src)、代替テキスト(alt)、width、とheight属性として提供されます。

<img src="画像のソースファイル" alt="代替テキスト" width="横幅" height="縦幅">


HTMLソースの表示方法

Webページを見て、「どうやってそんなことをしたの?」と思ったことはありませんか?

HTMLソースコードを表示

HTMLページを右クリックし、[ページ ソースの表示] (Chromeの場合)または ソースの表示を選択するか、他のブラウザーの場合は同様の方法を選択します。これにより、ページのHTMLソースコードを含むウィンドウが開きます。

HTML要素を検査します。

要素(または空白の領域)を右クリックし、[検証] を選択して、どの要素が構成されているかを確認します(HTMLとCSSの両方が表示されます)。開いた要素またはスタイルパネルでHTMLまたはCSSをその場で編集することもできます。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細