【HTML】基本タグまとめ【情報まとめ】

プログラミング

Webデザインでよく使うかもしれないタグのまとめ

見出し h1~h6

<h1></h1>

段落 p

<p></p>

強調 em

<em></em>

重要性 strong

<strong></strong>

区切り hr

<hr>         /*終了タグは不要

引用

まとめて blockquote

<blockquote cite=”URL”>

<p>

~~~~~~~~.

</p>

</blockquote>

一部 q

<p>

~~~~~<q cite=”URL”>—</q> ~~~~.

</p>

略語 abbr

~~~<abbr title=”Hypertext Markup Language>HTML</abbr>~~~~.

名前を特記する cite

My name is <cite>Shirubusi</cite>

住所などの表現 address

<address></address>

コード code

<code></code>

改行 br

<br>         /*終了タグは不要

プリフォーマット pre (入力通りに出力)

<pre></pre>

リンク a

<a></a>

アンカー

リンクの飛び先を指定する href

<a href=”https//url—.com” target=”_blank”></a>

ページのある特定の部分について名前を付ける id

<a href=”#index”>—</a>

<p id=”index”>—.</p>

パス path

相対パス

今いる場所を基準に

フォルダ名/ファイル名

../         /*一つ上のフォルダ

絶対パス

相手がどこにいるのかを確実に伝える書き方=URL

画像 img

<img src=”https//url—.jpg” alt=”何かの画像” title=”何か”>         /*終了タグは不要

リスト

ul(親要素、黒点),ol(親要素、数字) , li(子要素)

<ul>

 <li></li>

 <li></li>

 <li class=”class名”></li>        /*要素に名前をつけて分類できる

<ul>

情報がセットになったリスト dl dt dd

<dl>

<dt>項目名</dt>

<dd>内容</dd>

</dl>

文中の一部分にCSSを適用させる span

<span></span>

ファイルの読み込み

スタイルシート・ファビコンの読み込み link

<link rel=”stylesheet” type=”text/css” href=”style.css”>

<link rel=”shortcut icon” type=”image/png” href=”icon.png”>

JavaScriptの読み込み script

<script type=”text/javascript” src=”javascript.js”></script>

特定のファイルをページの一部に表示させる iframe

<iframe src=”—.html” width=”200″ height=”100″>

 このページはiframe対応ブラウザでご覧ください。

</iframe>

1行のテキスト入力を受け取る input

ボタン

<form method=”POST” action=”#”>      /*入力フォーム全体を囲み、まとめて送信する

 <input type=”submit” value=”送信”>      /*入力したデータを送信

 <button>ボタン</button>      /*処理を実行するきっかけに使うボタン

</form>

ID,パスワード

<input type=”text” name=”id”>

<input type=”password” name=”pass”>

どれか1つを選択 radio

<input type=”radio” name=”gender” value=”male”>男性

<input type=”radio” name=”gender” value=”female”>女性

複数選択可 checkbox

<input tyle=”checkbox” name=”music” value=”jazz”>Jazz

<input tyle=”checkbox” name=”music” value=”Pops”>Pops

<input tyle=”checkbox” name=”music” value=”Rock”>Rock

複数行のテキスト入力を受け取る textarea

<textarea></textarea>

ドロップダウンメニュー select

<select name=”address”>

 <optgroup label=”関東”>

  <option value=”tokyo”>東京</option>

  <option value=”chiba”>千葉</option>

 </optgroup>

 <optgroup label=”関西”>

  <option value=”osaka”>大阪</option>

  <option value=”kyoto”>京都</option>

 </optgroup>

</select>

フォームのグルーピング fieldset

<fieldset>

 <legend>IDとパスワード</legend>      /*項目の説明

 <label for=”name”>ID</label><input type=”text” name=”name” id=”name”>

 <label for=”pass”>Password</label><input type=”password” name=”pass” id=”pass”>

</fieldset>

コンテンツ範囲の設定 section

<section></section>

コンテンツを区切るときに気分で使う印象。section内ではh1から使用 ↓その他類似タグ

<article></article>        /*記事などに使う

<aside></aside>        /*補足情報などに使う

<nav></nav>        /*ナビゲーションに使う

<header></header>        /*ヘッダに使う

<footer></footer>        /*フッタに使う

HTML全体構造テンプレ

<DOCTYPE html>      /* おまじない */

<html>

 <head>

  <meta charset=”urf-8″>             /* 文字コード */

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

  <link rel=”stylesheet” href=”stylesheet.css”>   /* CSSの読み込み */

 </head>       /* ここまでおまじない */

 <body>

  <div class=”header”></div>        /* divでレイアウト構成 */

  <div class=”main”>

   <ul>

    <li>~~~~<span>。</span>

    <li>~~~~。

   <ul>

  </div>

  <div class=”footer”></div>

 </body>

</html>

コメント

タイトルとURLをコピーしました