HTMLの基礎を学び直す

最終更新日

【WordPressをもっと使いこなすための技術メモ】

WEB系のプログラミングを学び直し、今後の将来と本ブログに活かすことを目的に書いていきます。

 

 

 

 

タグ

タグとは『<html>』のように『< >』の中に半角英数の文字を入れたものを指す。

<html> ~ </html> 』のように囲うことで、階層、テキストの文字の大きさや色、機能の付加を命令していく。

タグの中にある文字を要素名と呼び、先頭にあるタグを『開始タグ』、後ろの『</ >』を『閉じタグ(終了タグ)』と呼ぶ。

例外として『<img>』など閉じタグを必要としないタグも存在し、これを『空要素タグ』と呼ぶ。

 

要素

要素とはタグで囲ったもの全体を指す。

例えば以下はタグ<p>の要素である。

 

HTMLを作成する際『<html> <body> ~ </body> </html> 』のようにタグの中にタグを入れて作成していく。

囲っているタグの事を『親要素』と呼び、親要素の中にあるタグを『子要素』と呼ぶ。

例でいうと<html>は<body>の親要素、<body>は<html>の子要素となる。

 

 

見出し・段落

↑のような大文字のタイトルを表現する時は『<h1>~</h1>』タグを用いる。

“h”は『heading(見出し)』の略でh2~h6までの要素がある。

段落を表す時は『<p>~</p>』タグを用いる。

<h1>1番大きい見出し</h1>
<h2>2番大きい見出し</h2>
<h3>3番大きい見出し</h3>
<h4>4番大きい見出し</h4>
<h5>5番大きい見出し</h5>
<h6>6番大きい見出し</h6>
<p>1段落目</p>
<p>2段落目</p>

 

 

 

コメント

<!– –>』で囲むとコメントを書くことができる。

注意点

  • コメントをコメントで入れ子に出来ない
  • ブラウザによってはコメントの中で使ったハイフン(-)を終了と認識してしまう可能性があるので、中でハイフンは使わない方が良い。
  • 現在、全てのブラウザではウェブサイトのHTMLソースをコメントアウト部分を含めてそのまま閲覧することができる。
    よってコメントアウトしたらブラウザに映らないが、ソースコードを表示されたら普通に見られるので大事なことは書かないこと。
<p>タグで囲まれたものはブラウザに反映されるが</p>

<!-- ここに何を書いてもブラウザに反映されない -->

<!-- もちろん複数行もできる

     ∧_∧
  __/___\
  ( _|´・ω・`|\<踊れ!カルメン! 
  \ヽ  ̄ ̄ ̄  |
  ∠ノ     /|
 ~(     //
   | __ノ ̄ ̄)
   | /   ̄/ /
   |/   //

-->

<!-- <!-- 
コメントアウトの中にコメントアウトを入れる”入れ子" は出来ない
--> -->

<!-- <!-- コメントアウトの中にコメントアウトを入れる”入れ子" は出来ない--> -->

<!-- 
ブラウザには表示されないがソースコード表示(右クリックで"ソースコード表示"など)されると普通に見られるので
ここにパスワードなどを書いたらバカである
-->

 

 

属性

HTMLの要素に対し『属性』という要素に対して+αの設定を追加する方法がある。

書き方は『<要素名 属性=”属性値”>』のように書く。

  • 開始タグの要素名の後ろに半角スペースを開ける
  • 属性の後ろに=(イコール)を付ける
  • 属性値は"(ダブルクオート)で囲む

 

 

リンク

<a></a>』で囲ったテキストはリンク文字にすることができる。

aは「アンカー(anchor)」の略で、リンクの出発点と到達点を意味する。

リンクを指定するには『<a href=”url”></a>』のように『href属性でURLを記述するとリンクを作ることができる。

hrefは『エイチレフ』と呼び、hypertext referenceの略で、直訳すると「ハイパーテキストの参照」となる。

<a href="https://hackheatharu.xyz">このブログトップページへのリンク</a>

 

 

画像を表示する(<img>タグ)

画像は『<img>』要素を使う(テキストで囲うことが無いので終了タグは不要)。

<img src=”url”>』のように『src属性』でURLを記述して使う。

<img src="C:\画像\スクリーンショット\hoge.jpeg">

 

リストを表示する(<li>タグ)

テキストをリストで表現するには『<li></li>』要素を使う。

この要素は『<ul></ul>』または『<ol></ol>』の間で使用しなければならない。

リストにした文字先頭に黒点を付ける場合は『<ul></ul>』要素で入れ子にする。

連番の数字は『<ol></ol>』要素で入れ子にする。

<!-- 黒点 -->
<ul>
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ul>


<!-- 数字 -->
<ol>
  <li>あ</li>
  <li>い</li>
  <li>う</li>
</ol>

関連項目

 

 

<html> <head> <body>

HTMLファイルは<html>タグというルート要素(全てのタグの親要素)を最初に記述して作られる。

ルート要素の後は、主に<head>タグと<body>タグで構成される。

head要素にはメタデータ( (検索エンジン や ブラウザー などが利用するページに関する情報を書く場所であり、Webページには何も表示されない。

body要素にはWebページに表示したい内容を書く場所である。

ちなみにhtml要素で<html lang=”ja”>とは必ずしも書かなくて良いらしい ⇒ Google「言語指定にlangは使うな」/公式発言

 

<!DOCTYPE html>
<html>
  <head>
    head要素以下に取ることができる要素群。
    title要素などをはじめとしたそのHTML文書自身に関する情報からなる。
  </head>
  <body>
    body要素以下に取ることができる要素群。
    HTML文書の本文となる情報を記述する。
  </body>
</html>

 

 

<!DOCTYPE html>

<head>タグの前には必ず<!DOCTYPE html>書く。

これは『このファイルはHTML5で作成されたものです』とブラウザに解釈させるため最初に宣言しておくためのものと解釈して良い。

これをDTD(Document Type Definition)宣言と言う。

もう少し詳しく ⇒ https://qiita.com/NoxGit/items/74314d755222c0d971e4

 

 

<head>内で書くこと

文字コードの宣言

文字コードを宣言することでWebコンテンツの文字化けを防ぐ。

主に『utf-8』を指定する ⇒ https://www.graffe.jp/blog/1278/

head要素に<meta>タグを用いて<meta charset=”utf-8″/>と記述して文字コードを指定する。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>

<!-- ちなみにこういう書き方もできるが、めんどくさい -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 

ページタイトル

<title>タグでページのタイトルを指定する。

ここに書いたテキストはブラウザのタブに表記される。

<!DOCTYPE html>
<html>
<head>
<title>ここにタイトルを書く</title>

 

 

CSSファイルの読み込み

反映させたいCSSファイルを指定するために<link>タグでファイルを指定する必要がある。

指定するには『<link rel=”stylesheet” href=”読み込みたいCSSファイル名.css”>』のように『rel属性でファイルとの関係性、href属性でファイル名を記述する。

CSSファイルを呼び出すだけならrelの属性値は『stylesheet』と書く。

relは『レル』と呼び、relation(関係)の略である。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="読み込みたいCSSファイル名.css">

 

 

ブロックレベル要素とインライン要素

HTMLで定義されている要素のうち、<body>~</body>の中で使用される要素の多くは、 ブロックレベル要素(Block-Level Elements)か、インライン要素(Inline Elements)に分類される。

分類することで、どの要素の内側にどの要素を配置できるかなどのルールが定める。

ブロックレベル要素(Block-Level Elements)

ブロックレベル要素は見出し・段落・表』など、文書を構成する基本となる要素達を一つのブロック(かたまり)として認識する。

ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは前後に改行が入る。

以下は代表的なブロックレベル要素のタグである。

<address> <blockquote> <center>
<div> <dl> <fieldset> <form>
<h1>-<h6> <hr> <noframes> <noscript>
<ol> <p> <pre> <table> <ul>

インライン要素(Inline Elements)

インライン要素は主にブロックレベル要素の”内容”として用いられる要素で、文章の一部として扱われる。

例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素をこれに当たる。

一般的なブラウザでは前後に改行が入らず、文章の一部として表示される。

以下は代表的なインライン要素のタグである。

<a> <abbr> <acronym> <b>
<basefont> <bdo> <big> <br>
<cite> <code> <dfn> <em>
<font> <i> <img> <input> <kbd>
<label> <q> <s> <samp> <select>
<small> <span> <strike> <strong>
<sub> <sup> <textarea> <tt> <u> <var>

<div>

<div>タグとは、囲った部分をブロック要素としてまとめて扱うことができるようになるタグになります。

HTML構造(レイアウト)に沿って要素を区切っていくように使う。

pタグであれば段落を区別するためのタグで、h1タグであれば見出しを作るためのタグになるが、divタグはそれ単体では意味を持たない特殊なタグである。

 

<div class="header">
/* headerグループのブロックレベル要素 */<div> <div class="main">
/* mainグループのブロックレベル要素 */<div>
<div class="footer">
/* footerグループのブロックレベル要素 */<div>

 

 

<input> <textarea>

<input>タグは1行のテキストを受け取る為の入力欄を作る要素である。

<textarea>タグは複数行のテキストを受け取る為の入力欄を作る要素である。

<input>要素にはtype属性を指定することができ、type属性にsubmitを指定すると入力欄ではなく送信ボタンにる。

ボタンに表示されるテキストは、日本語のブラウザではデフォルトで「送信」になる。

value属性に任意の値を指定することで、ボタンに表示されるテキストを変更することができる。

 

 

HaLucina

シェアする