Que.howCategory

基本的なタグの一覧 | HTML

Contens

htmlタグ

中に head要素と body要素を用意します。全ての要素の中で最も上位にあるものです。

headタグ

ブラウザのタブに表示するページのタイトルなど、HTMLファイルの設定をするタグを head要素の中に書きます。

bodyタグ

body要素の中には、実際に表示するコンテンツ(見出し、段落、画像など)を表現するタグを書きます。

コメント

<!-- ここはコメント -->

HTMLの中でコメントを書くには、<!----> で囲みます。コメントは、ブラウザの画面上には表示されません。

body要素に書くもの

h1,h2...h6タグ・見出し

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

見出し要素はブロックレベル要素であり、h1 から h6 まであり、番号が大きくなるほど、文字が小さい見出しになります。

Related Articles

pタグ・段落

<p>段落</p>

p要素はブロックレベル要素であり、要素が段落であることを示します。

Related Articles

spanタグ・テキストの途中を変更

<span>テキスト</span>

span要素はインライン要素であり、文章などから、一部のテキストにCSSを適用する場合などに使います。

brタグ・改行

<p>テキスト<br>テキスト</p>

brタグは、テキストを改行させるために使われます。

Related Articles

aタグ・リンク

<a href="/url">リンクテキスト</a>

aタグはインライン要素であり、リンクを作成するのに使われます。href属性でリンク先のURLを指定します。

Related Articles

imgタグ・画像

<img src="/url">

imgタグはインライン要素であり(ただし、縦横のサイズ指定は可能)、画像を表示するのに使われます。src属性で画像のURLを指定します。終了タグはありません。

Related Articles

ulタグ・順序なしリスト

<ul>
    <li>項目</li>
</ul>

ulタグはブロックレベル要素であり、順序のないリスト、箇条書きを作るのに使われます。

liタグ・リストの項目

<ul>
    <li>項目</li>
</ul>

liタグはブロックレベル要素であり、リストの1つ1つの項目を作るのに使われます。

olタグ・順序ありリスト

<ol>
    <li>項目</li>
</ol>

olタグはブロックレベル要素であり、順序ありのリストを作るのに使われます。liで作った項目の先頭に、1,2,3などの番号が振られます。

iframeタグ・ページ埋め込み

<iframe src="/url"></iframe>

iframeタグはインライン要素であり(ただし、縦横のサイズ指定は可能)、別のウェブページをページに埋め込むのに使われます。src属性で、埋め込むページのURLを指定します。

divタグ・グループ分け

<div class="card">
    <img src="/url1">
    <span>テキスト1</span>
</div>
<div class="card">
    <img src="/url2">
    <span>テキスト2</span>
</div>

divタグはブロックレベル要素であり、複数の要素を1つにまとめてグループ分けし、ブロックレベル要素として扱うときに使います。div要素単体では何も役割がないものなので、大抵は id属性や class属性を指定して使います。

上の例では、div要素1つ1つがカードであり、その中には画像が1枚とテキストがあります。グループ分けすることで、スタイルの指定が楽になります。

head要素に書くもの

titleタグ・ページタイトル

<title>ページのタイトル</title>

titleタグは、HTMLファイルのタイトルを指定するのに使われます。ここで指定したタイトルは、ブラウザのタブなどに表示されます。ページ内には表示されません。

styleタグ・CSS埋め込み

<style>
    .body {
        color: #333;
    }
</style>

styleタグは、HTMLにCSSを埋め込むのに使います。

scriptタグ・JavaScript埋め込み、読み込み

<script>
    console.log('Hello.');
</script>
<script src="/url"></script>

scriptタグは、外部JavaScriptを読み込んだり、HTMLに埋め込むのに使われます。外部ファイルを読み込む場合は、そのURLを src属性で指定します。

linkタグ・他URLとの関係性

<link rel="stylesheet" href="/url">

linkタグは、他URLとの関係性を示すのに使われます。最も一般的な使われ方は、外部CSSファイルを読み込む場合であり、rel属性に stylesheet を指定し、href属性にそのURLを指定します。

metaタグ・メタデータ

<meta charset="UTF-8">

metaタグは、HTMLのメタデータを定義するのに使われます。上のコードでは、charset属性を使い、HTMLの文字コードが何であるかを示しています。



プライバシーポリシー