Group of business partners listening to colleague at meeting
HTMLとはなにかと、HTMLの基本的なことについて、プログラミング初心者に向けて説明します。
この記事は、オンラインプログラミング学習講座「Webエンジニア入門総合コース」サポート記事です。
目次
HTML （エイチ・ティー・エム・エル / HyperText Markup Language）は、Webページの内容を記述するためのマークアップ言語と呼ばれるです。
コンテンツのはじめと終わりに「タグ」と呼ばれる印をつけて、意味付けをしていくことです。
<h1>見出し</h1>
1989年 スイス・ジュネーブにあるCERN(欧州原子核研究機構) ティム・バーナーズ・リー博士によって開発されました。
研究の情報や進行状況を共有するという課題の解決のために作られた。
1991年 世界で初めてのWebサイトがティム・バーナーズ・リー博士によって公開
復刻版ですが、世界で初めてのWebサイトを見ることができます。
主なHTMLのバージョンは下記になります。
HTML 4.01 やXHTML 1.0 が、10年以上使われていたのですが、今は、新規のプロジェクトに関しては、HTML5一択の状況です。HTML5.1など新しいバージョンも徐々に利用が進ものと考えられます。
補足として用語の解説をいくつかします。
フォームに使える部品や、スマートフォン向けの機能など大幅にアップグレード。
ビデオをページに埋め込むことも可能になりました。
HTML5はHTML4の良い部分を残しつつ、新しいニーズにあった機能を追加しています。
World Wide Web Consortium（ワールド・ワイド・ウェブ・コンソーシアム）は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体です。
開始タグ、終了タグで挟む形で、コンテンツがあります。
開始タグ+内容+終了タグ を要素と言います。
これがHTMLを学ぶ上で、一番重要なルールになるので、必ず覚えておきましょう。
タグで何かしらのコンテンツを挟む形になります。
終了タグには、スラッシュがつくところも、重要です。
具体例は、このようになります。
HTMLの文章の基本的な構造は、
まず、html要素が始まる前の文章の先頭にDOCTYPE宣言と呼ばれる
使用するHTMLの種類を宣言を行います。
続いて、html要素を記述します。
HTML要素はHTML文章の最上位要素です。
html要素の中には、 head要素と、body要素を記述します。
次にhead要素を記述します。
head要素には、文章タイトル、文字コード、キーワード、説明文、関連ファイルなどの文章の基本情報を記述します。
head要素に記述されたものは、ブラウザには表示されません。
次に、body要素を記述します。
Body要素は、コンテンツを記述する部分です。
ここに記述した内容が、ブラウザの画面に表示されます。利用するユーザーから見える部分です。
最小構成のHTML文章（Webページ）の、コードは下記のようになります。
見出し文字列「はじめてのHTML見出し」を表示するだけです。
<h2>はじめてのHTML見出し</h2>
Webブラウザ Google Chromeで表示すると、この用に表示されます。
HTMLに関するドキュメントを参照したい時は、
Mozilla Foundationが運営している、MDN(エムディーエヌ・Mozilla Developer Center)が、便利です。
HTML、CSS、API を含むオープンウェブ技術に関する情報が掲載されています。
若干初心者には取っ付きにくいのですが、網羅性と正確性が高く、実務でも利用機会があります。
必要に応じて参照するとよいでしょう。
htmlファイルには書いあるが、ブラウザで表示されなくする
注意書きと書いたり、一時的に無効にしたい時に使用します。
文書（の一部）をコメントにすることをコメントアウトという
<!-- この文字列は表示されません。 -->
このようにコメントにしたい文字列を記号で囲います。
コメントは入れ子にしないでください。
言いかえると、コメントの中にコメントはかけません。
Atomでコメントを簡単なに、ON/OFFできるショートカットについてです。
Macの方は、commandキー + スラッシュキー、
Windowsの方はコントロールキー + スラッシュキーです。
ON/OFFが簡単にできるので、便利です。
HTMLの基本的な要素 (タグ)は、MDNに記載があります。
mdn htmle element reference
100個くらいあるが、よく使うのは、10-15個。
全部覚えなくても良いです。
必要になったら、MDNなどで、調べてください。
h1は、見出し要素と言います。文書中の見出しを示す為の要素です。
見出し要素は、6段階、h1〜h6までがあります。
h1が最上位で h6が最も低いレベルです。
<h1>見出し h1</h1> <h2>見出し h2</h2> <h3>見出し h3</h3> <h4>見出し h4</h4> <h5>見出し h5</h5> <h6>見出し h6</h6>
このように、スタイルを当てていない状態だと、hの数字が小さいほど、重要な見出しとして、文字サイズが大きくなることがわかります。
文章（Webページ）のタイトルをつけることができる要素です。
例えば、head内のtitleタグに、次のように記述します。
<head> <title>はじめてのタイトル</title> </head>
重要なテキストは、strong要素で囲います
はじめての<strong>HTML</strong>入門
strong要素で囲ったところが、太文字で強調して表示されます。
<ul> <li>りんご</li> <li>みかん</li> <li>ぶどう</li> </ul>
ulタグで囲った中に、箇条書きしたい項目をliタグで並べます。
liタグは、listの略です。
ul は、Unordered List（アンオーダード）の略で、順序のないリストを記述する時に、使います。
ulタグを、olタグに書き換えましょう
<ol> <li>りんご</li> <li>みかん</li> <li>ぶどう</li> </ol>
olは、Ordered Listの略で、順序のあるリストを記述する時に使います。
ネストは入れ子構造とも言います。
例えば、りんごの下に、りんごの品種をリスト表示したいと思います。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>ぶどう</li>
</ul>
<ol>
<li>りんご
<ul>
<li>ふじ</li>
<li>つがる</li>
<li>王林</li>
</ul>
<li>みかん</li>
<li>ぶどう</li>
</ol>
vは、span どちらも、 任意の範囲をグループ化するのに使います
タグ自身は意味を持たない
スタイル(CSS)を当てるときに使います。
displayというCSSのプロパティの値の違い
div→display: block
span→display: inline
まだ、CSSを学習していないので、さわりだけ簡単に説明します。
幅と高さを指定できるかどうか
div できる、span はできない。
前後に改行が入るかどうか
div 入る spanは、入らない。
spanの中にdivは入れない。
これはいいのですが、
<div>私はWebエンジニアを目指しています。</div>
これは基本やらないです。
私は <div>Webエンジニア</div> を目指しています。
もう少しきちんと説明すると、
inlineの要素（spanなど）の中には、blockの要素（divなど）は入れません。
ブロック要素、インライン要素に何があるか詳しく知りたい方は、MDN参照してください。
– ブロックレベル要素 | MDN
– インライン要素 – MDN
タグに何かしらの設定をできるもの（オプションをつけられる）
開始タグの中には、属性名と属性値があります。
属性名と属性値を合わせて、属性と言います。英語でいうと、attributeです。
MDNのHTML attribute reference に乗っているので、リファレンスとしてつかえます。
ただし、これの８割型使われないので、全部覚えなくても大丈夫です。
画像を表示するする時にタグです。
イメージタグにはsrc属性があり、画像のパスを指定します。
<img title="imgタグ.jpeg" src="https://programmingnavi.com/wp-content/uploads/2018/04/imgタグ.jpeg" alt="Imgタグ" width="599" height="337" border="0" />
※ htmlファイルと同じフォルダに、画像を置いた時の例。
a要素は、リンクを貼る時に使います。
<a href="https://programmingnavi.com">プログラミング入門ナビ</a>
リンク先の種類には次のものがあります。
フォルダ名とか、ファイル名は、英数字とハイフン、アンダースコアくらいの範囲を使ってください。
フォルダ名、ファイル名に日本語がまじっていても、動くかもしれませんが、トラブルのもとなので実務上は使いません。
この記事では、HTMLとはなにかについてプログラミング初心者向けに説明しました。
「Webエンジニア入門総合コース」では、HTMLの基礎はもちろんのこと、プログラミミング初心者向けに、HTML5, CSS3, JavaScript, Bootstrap, SQL, Ruby, Ruby on Rails, Cloud9, Git, GitHubなどを動画をつかって学習できます。
動画は文字情報の5,000倍と言われることもあります。動画で学習すると、手順が目に見えて理解できるので、学習がはかどりますよ。
264レクチャー・18時間の大型コースとなっています。 内容をしっかり確認できるように、無料プレビュー60分を公開していますので、ぜひご覧ください！
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する