HTMLとは?
こんにちは、パキラです。
私はまったくの未経験です。
まずプログラミングを始める前に、
このHTMLについて勉強しないとテキストに
記述することができません。
今回は、HTMLについて調べたのでまとめました。
Hyper Text Markup Language
まず『HTML』とはHyper Text Markup Languageの頭文字からとった略した言葉になります。
Webページで読んでいる文章は、ほとんどがこの『HTML』で作成されたものです。
Webページ内には様々なルールがあり、コンピューターにしっかり命令を出さないと、
適切に表示がされません。読むことさえできないこともあります。
人が本を読むときは最初に本のタイトルがあり、目次があり、見出し、段落といった構成を自然と、見て判別できますが、コンピューターは判別がつかないので印をつけてあげます。それをマークと言います。ですのでマークアップ言語と言われてます。
 |
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ] 価格:2,486円 |
例えば
なんとか物語
昔、昔、あるところに・・・このような文章をWebページで表示させたい場合
<ここから見出し>なんとか物語<ここまで見出し>
<ここから段落>昔、昔、あるところに・・・<ここまで段落>このように文章の前後に、ここからここまでが何の文章です、という入力をしないといけません。
人はこれを自然とやっていますよね。
コンピューターに判別してもらうにはこうします。
<h1>なんとか物語</h1>
<p>昔、昔、あるところに</p>このように『タグ』と呼ばれる記号で文章を挟みます。
これを『マーク』するといいます。
ですので『マークアップ』言語と呼ばれています。
私は最初は『HTML』はプログラミング言語だと思っていました。
恥ずかしいですね。
先ほど<h1>を『タグ』と呼びましたが、開始『タグ』と終了『タグ』があります。<h1></h1>のように終了『タグ』には『/』をつけます。
原則は開始『タグ』と終了『タグ』はセットになりますが、
終了『タグ』を省略できるもの、終了『タグ』がないものもあります。
名称は要素といいます。
そこまで呼び名は重要ではないとのことですが、正式な名称でお伝えできたらと思います。
要素にかなり種類があります。
 |
本当によくわかるHTML＆CSSの教科書 シンプルで、デザインの良いサイトが必ず作れる [ 鈴木 介翔 ] 価格:1,958円 |
| 要素名 | 説明 |
| ルート要素 | |
| <html> | 文書のルート要素 |
| 文書のメタデータ | |
| <head> |
メタデータの集まりを示す |
| <title> | 文書のタイトルを指定する |
| <base> |
相対リンクの基準となるURLを href属性で指定する |
| <link> |
自分とhref属性で指定したファイルとの関係をrel属性で定義する |
| <style> | スタイルシートを指定する |
| <meta> | 文書に関する様々なメタデータを示す |
| セクション | |
| <body> | 文書の本体を示す |
| <article> | 自己完結したセクションを示す |
| <section> | 一般的なセクションを示す |
| <nav> | ナビゲーションを示す |
| <aside> | 補足的なセクションを示す |
| <h1>-<h6> | 見出しを付ける |
| <header> | ヘッダを示す |
| <footer> | フッタを示す |
| <address> | 連絡先を示す |
| コンテンツのグループ化 | |
| <p> | 段落を示す |
| <hr> | テーマの区切りを示す |
| <pre> | 整形済みのテキスト |
| <blockquote> | 引用のセクションを示す |
| <ol> | 順序付きのリストを作成する |
| <ul> | 順不同のリストを作成する |
| <li> | リストの項目を示す |
| <dl> | 記述リストを作成する |
| <dt> | 記述リストの名前部分を示す |
| <dd> | 記述リストの値部分を示す |
| <figure> | 参照される図版を示す |
| <figcaption> | 図版にキャプションを付ける |
| <main> | 文書のメインコンテンツを示す |
| <div> | 特定の範囲をグループ化する |
| テキストの意味 | |
| <a> | リンクを設定する |
| <em> | 強調を示す |
| <strong> |
より強調を示す |
| <small> | 細目のような注釈を示す |
| <s> | すでに正確ではない内容を示す |
| <cite> | 作品のタイトル・著者名・URLを示す |
| <q> | 引用フレーズを示す |
| <dfn> | 定義された用語を示す |
| <abbr> | 略語や頭文字を示す |
| <code> | ソースコードを示す |
| <var>、<let> | 変数を示す |
| <const> | 定数を示す |
| <samp> | プログラムの出力サンプルを示す |
| <kbd> |
ユーザーが入力する内容を示す |
| <data> | コンピューター向けのデータを指定する |
| <sub> | 下付き文字を示す |
| <sup> | 上付き文字を示す |
| <time> | 日付や時刻を示す |
| <i> | 他と区別されるテキストを示す（思考・専門用語など） |
| <b> | 他と区別されるテキストを示す（キーワード・製品名など） |
| <u> | 軽めのラベル付け |
| <mark> | テキストのハイライト表示 |
| <ruby> | ルビ（ふりがな）をふる |
| <rb> | ルビの対象テキストを示す |
| <rt> | ルビテキストを示す |
| <rtc> | ルビテキストのコンテナ |
| <rp> | ルビテキストを括弧で囲む |
| <bdi> | 隔離されたテキストを示す |
| <bdo> | 書字方向を指定する |
| <span> | 特定の範囲をグループ化する |
| <br> | 改行する |
| <wbr> | 改行位置の候補を示す |
| 訂正 | |
| <ins> | 追加された部分を示す |
| <del> | 削除された部分を示す |
| コンテンツの埋め込み | |
| <img> | 画像を表示する |
| <picture> | レスポンスイメージ(最適化)で画像が表示する |
| <iframe> | インラインフレームを作る |
| <embed> | プラグインデータを埋め込む |
| <object> | 外部リソースを埋め込む |
| <param> | パラメータを指定する |
| <video> | プラグインを使わずに動画を再生する |
| <audio> | プラグインを使わずに音声を再生する |
| <track> | 動画・音声と同期するテキストトラック |
| <source> | メディアリソースの候補を指定する |
| <map> | イメージマップを作る |
| <area> | イメージマップのリンク領域を設定する |
| テーブル | |
| <table> | 表を作る |
| <caption> | 表にキャプションを付ける |
| <colgroup> | 表の列をグループ化する |
| <col> | 表の列を示す |
| <tbody> | 表の行をグループ化する(本体部分) |
| <thead> | 表の行をグループ化する(ヘッダ部分) |
| <tfoot> | 表の行をグループ化する(フッタ部分) |
| <tr> | 表の行を示す |
| <td> | データセルを示す |
| <th> | 見出しのセルを示す |
| フォーム | |
| <form> | 入力フォームを作る |
| <fieldset> | フォーム部品をグループ化する |
| <legend> | 部品グループにキャプションを付ける |
| <label> | フォーム部品とラベルを関連付ける |
| <input> | 入力欄・選択肢・ボタンを作る |
| <select> | プルダウンメニューを作る |
| <option> | プルダウンメニューや入力候補の選択肢を作る |
| <optgroup> | プルダウンメニューの選択肢をグループ化する |
| <textarea> | 複数行のテキスト入力欄を作る |
| <button> | 内容を持つボタンを作る |
| <datalist> | 入力候補のリストを作る |
| <output> | 計算結果の出力欄を作る |
| <progress> | 作業の進捗状況を示す |
| <meter> | 特定範囲内の数量や割合を示す |
| スクリプティング | |
| <script> |
JavaScriptを埋め込む |
| <noscript> | スクリプトが利用できない環境用の内容 |
| <template> | スクリプトで利用するHTMLコードのテンプレート |
| <canvas> | スクリプトを使ってグラフィックスを描く |
| インタラクティブ | |
| <details> | リクエストに応じて詳細情報を提供する |
| <summary> | 詳細情報のキャプションや要約を示す |
| <menu> | ポップアップメニューを示す |
| <menuitem> | ポップアップメニューの項目を示す |
| <command> | コマンドを示す(廃止) |
以上が私が調べた要素名でした。
勉強のためすべて記してみましたが、とても多いですね。
もし、記述に間違いがありましたら、遠慮なくお問い合わせから指摘してください。
すぐに訂正して、より良い表にしていきたいと思います！
 |
HTML＆CSSとWebデザインが1冊できちんと身につく本 [ 服部雄樹 ] 価格:2,508円 |
コメント