10分で学べる簡単なhtmlコード例17選

基本的なWebページを作ってみませんか？これらのhtmlの例を学び、テキストエディタで試して、ブラウザでどのように見えるかを確認する...

最近のWebサイトはユーザーフレンドリーなインターフェースで構築されていることが多いですが、基本的なHTMLの知識を持っておくと便利です。以下の17のサンプルHTMLタグ（およびいくつかの追加タグ）を知っていれば、基本的なWebページをゼロから作成したり、WordPressなどのアプリケーションで作成したコードを微調整したりすることができます。

ほとんどのタグの出力を含むサンプルHTMLコードを提供します。実際の動作をご覧になりたい方は、本記事の最後にあるサンプルHTMLファイルをダウンロードしてください。テキストエディタで使用し、ブラウザで読み込むと、変更された内容を確認できます。

1

このタグは、作成されたすべてのHTML文書の最初に必要です。これは、ブラウザがHTMLを読んでいること、そして最新バージョンのHTML5が必要であることを確実に認識させるものです。

これは実際にはHTMLのマークアップではありませんが、それでも良いものです。

2

これも、ブラウザがHTMLを読んでいることを伝えるためのタグである。このタグはDOCTYPEタグに続くもので、文書の末尾にあるタグで閉じることができます。残りの部分は、これらのタグの間にあります。

3つです。

このタグは、ファイルのヘッダー部分を開始します。ここに書かれている内容は、ウェブページには表示されません。代わりに、検索エンジンのためのメタデータやブラウザーのための情報が含まれています。

基本的なページの場合、タグにはタイトルとそれだけを入れますが、他にもいくつか入れることができますので、それについては後ほど説明します。

4

このタグは、ページのタイトルを設定します。このように、タグの中にタイトルを入れて閉じるだけです（タイトルタグも入れています）。

<head><title>My Website</title></head>

ブラウザで開いたときに、タブのタイトルとして表示される名前です。

5

titleタグと同様に、メタデータはページのタイトル領域に配置されます。メタデータは、主に検索エンジンが利用するもので、ページの内容に関する情報である。メタフィールドには様々な種類がありますが、最も一般的に使用されるのはこれらのフィールドです。

説明文 - ページの基本的な説明文です。
キーワード - ページに適用されるキーワードのセットです。
Author - あなたのページの作者です。
viewport - すべてのデバイスでページが美しく見えるようにするためのタグです。

以下は、このページに適用される場合の例です。

viewport」タグの内容は、常に「width=device width, initial scale=1.0」とし、モバイル端末やデスクトップ端末でページが良好に表示されるようにする必要があります。

6

見出し部分を閉じたら、本文へ。タブで開いて、タブで閉じる。ファイルの最後、タブの手前で。

ページの内容はすべてこのタグの間にあります。簡単なようで難しいですね。

<body>Everything you want displayed on your page.</body>

7

タグは、ページの最初のレベルの見出しを定義します。これは通常タイトルで、1ページにつき1つだけあるのが望ましいです。

セクション見出し、第3レベルの小見出しなど、第2レベルの見出しを定義する。例えば、この文書でマークされた名前は第2レベルの見出しである。

<h1>Big and Important Header</h1><h2>Slightly Less Big Header</h2><h3>Sub-Header</h3>

結果

ご覧のように、レベルが上がるごとに小さくなっていきます。

8

段落マーカーは新しい段落を開始します。これは通常、**2行の改行です。

例えば、前の行とこの行の間にあるブレークポイントを見てください。タグはまさにそのような役割を担っています。

<p>Your first paragraph.</p><p>Your second paragraph.</p>

結果

最初の段落ですね。

2段落目ですね。

また、段落のマークアップにCSSスタイルを使用することで、例えば、文字の大きさを変更することができます。

<p style="font-size: 120%;">20% larger text</p>

結果

文字を20%拡大

CSSを使用したテキストのスタイル設定方法については、HTMLとCSSのチュートリアルをご覧ください。

9

改行マーカー ** 単一の改行。

<p>The first line.<br>The second line (close to the first one).</p>

結果

1列目。

2列目（1列目に近い）。

タブも同様で、ページを横切る水平線を引き、テキストの各パーツを区切るのに役立ちます。

10

このマークアップは重要なテキストを定義するもので、一般的には太字になることを意味します。

しかし、安心して太字を使うことができます。

<strong>Very important things you want to say.</strong>

結果

伝えたい、とても大切なこと。

太字のマークアップに慣れている方は、そのままお使いいただけます。将来のバージョンのHTMLでも動作し続ける保証はありませんが、今のところ動作します。

11

と同じように、andは関連しています。マーカーは、強調されたテキストを識別するもので、通常はイタリック体（斜体）になることを意味します。同様に、CSSによってストレスのあるテキストが異なって表示されることがあります。

<em>An emphasized line.</em>

結果

線を強調する。

このマークアップは現在も有効ですが、やはり将来のバージョンのHTMLでは非推奨となる可能性があります。

12

アンカータグは、リンクを作成するために使用されます。簡単なリンクを以下に示します。

<a href="https://www.makeuseof.com/>Go to MakeUseOf</a>

結果

MakeUseOfのページへ

href "属性は、リンクのターゲットを特定するもので、多くの場合、他のウェブサイトを指しますが、画像やPDFなどのファイルを指定することもできます。

targetは、以下のように、リンクを新しいタブやウィンドウで開くためにほぼ独占的に使用される。

<a href="https://www.makeuseof.com/" target="_blank">Go to MakeUseOf in a new tab</a>

結果

新しいタブでMakeUseOfに移動する

"次のリンクにカーソルを合わせると、その様子を見ることができます。

<a href="https://www.makeuseof.com/" title="This is a tool tip">Hover over this to see the tool tip</a>

結果

ここにカーソルを合わせるとツールチップが表示されます

13

ページに画像を埋め込む場合は、imageタグを使用する必要があります。通常、'src'属性と組み合わせて使用することになります。これにより、以下のように画像のソースが指定されます。

結果

その他、"height"、"width"、"height "などの属性も利用可能です。

ご想像の通り、'height' と 'width' プロパティは画像の高さと幅を設定します。通常、これらのうち1つだけを設定して、画像が正しく拡大縮小されるようにするのがよいでしょう。両方の方法を使用した場合、画像が引き伸ばされたり、つぶれたりすることがあります。

alt」タグは、画像が表示できない場合に表示されるテキストをブラウザに伝えるもので、どの画像にも含めるとよい。特に遅い回線や古いブラウザを使用している場合でも、あなたのページに何が掲載されているのかを知ることができます。

14

順序付きリストタグを使用すると、順序付きリストを作成することができます。一般的には、番号付きのリストが得られるということです。リストの各項目にはリスト項目タグ()が必要なので、リストは以下のようになります。

<ol><li>First thing</li><li>Second thing</li><li>Third thing</li></ol>

結果

はじめに
2つ目は
3つ目のポイント

HTML5では、start属性で数値の順序を逆転させたり、開始値を設定することができます。

type "属性は、リスト項目に使用する記号の種類をブラウザに指示することができます。を設定することができます。"I "を押すと、以下のような記号でリストを表示するように設定できます。

15

順序なしリストは、順序付きリストよりもはるかにシンプルで、単なる箇条書きのリストです。

<ul><li>First item</li><li>Second item</li><li>Third item</li></ul>

結果

第一項目
第2項
項目 3

順序なしリストにも "type" 属性があり、"disc", "circle", "square" に設定することができます。

16

表を使った書式設定は好まれませんが、行と列を使ってページ上の情報を分割したい場合も多いでしょう。テーブルを正しく動作させるためには、いくつかのタグが必要です。以下は、HTMLコードのサンプルです。

<table><tbody><tr><th>1st column</th><th>2nd column</th></tr><tr><td>Row 1, column 1</td><td>Row 1, column 2</td></tr><td>Row 2, column 1</td><td>Row 2, column 2</td></tbody></table>

このタグには、すべてのテーブルコンテンツが含まれています。

表の各行は、タグの中に含まれています。各行の各セルは、列のヘッダー用タグまたは列データ用タグでラップされる。各行の各列に1つずつ必要です。

結果

1列目	2列目
1行目、1列目	1行目、2列目
2行目、1列目	2行目、2列目

17

他のウェブサイトや人から引用し、引用部分を文書の他の部分から分離したい場合は、blockquote マークアップを使用します。での開始と終了のブロッククォートタグに引用文を入れるだけです。

<blockquote>The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.</blockquote>

結果

私が思い描くWebは、まだ見えていない。未来はまだ、過去よりずっと大きいのです。

正確なフォーマットは使用するブラウザやサイトのCSSによって異なりますが、タグの内容は同じです。

ムービングオン

この17のHTMLの例（とカウント）を見れば、簡単なウェブサイトを作ることができるはずです。HTMLページのサンプルをダウンロードしてご覧ください。ブラウザで開けば、すべてのコードがどのように組み合わされているかを見ることができますし、テキストエディタで開けば、コードがどのように動くかを正確に見ることができます。

HTMLをよりコンパクトに学ぶなら、コーディングのためのマイクロラーニングアプリをお試しください。

2021-03-18 02:34 に公開
閲覧 ( 19 )
分類：プログラミング