本記事はこんな方にオススメ
「Wordpress等でブログやサイトを運営していて、HTMLについて学んでみたい方」
「HTMLを学んでみたいが、難しそうでなかなか手を伸ばせない方」
「HTMLは複雑そうで、理解できそうにないと諦めかけている方」
本記事の内容
サイトやブログの運営をしている方なら、一度はHTMLをいう言葉を目にしたことがあるのではないでしょうか？
私自身、このブログを運営する際に何度もHTMLやCSSを目にしては、その度に学ばねばと思いつつも断念..を繰り返していました。
ですがwebデザインの学校に入学し学生となった今、改めてHTMLを学んでみると、
「HTMLは難しそうだから私にはきっと無理だろう」と諦めすぎていた自分に気づきました。
学び始めてみると想像していたよりもはるかに、難易度は高くなかったのです。
そんな経験をもとに、Web初心者目線がまだ残っている私の今の状況を生かして、
かつての私のような方に、HTML学習の最初の壁を乗り越えるお手伝いができればと思い、この記事にHTMLの基礎をまとめました。
微力ながら皆様のお役に立てればと思います。
[初心者目線で解説] HTMLを読む為にこれだけは知っておこう（HTML基礎編）
HTMLには具体的に何が書かれているのか
HTMLがどんな意味を持つのかを何となく想像できたという方は、具体的にHTMLとはどんな事が書かれてあるのか、という構造を見ていきましょう。
HTMLがどんな意味を持つのか、もう一度復習したい方はこちらの記事でご確認ください。
一例として、このような基本的なHTML文書の構造をご紹介します。
<a herf=”http://jazziblog.com”>jazziの時間。</a>
このHTML文書はいわゆるリンクを飛ばすものです。
上のようにHTMLとして入力すると、本来このようなリンクを貼る事ができます。
では、この一例のHTML文書の構造から、HTMLを読む為にしておくべき３つ要素をご紹介していきます。
このまま読み進めていただくと、なぜ上のHTML文書がリンクを貼ることを示しているのか分かるようになるはずです！
タグ（開始タグと終了タグ）
HTMLの構造は主に、タグと要素内容と属性の３つで出来ています。
その中でもまずはタグからご紹介していきます。
簡単に言えば、意味づけをする際にタグは使われると思ってください。
具体的に先ほどのリンクの一例で言えば、タグは２つあります。
先ほどのHTML文書の一例はこのようなものでした。
<a herf=”http://jazziblog.com”>jazziの時間。</a>の
この場合１つ目のタグは、はじめの<a herf=”http://jazziblog.com”>の部分です。
そして２つ目のタグは終わりの</a>の部分です。
このようにタグはHTML文書のはじめと終わりに位置する場合がほとんどです。
特に、このようにタグが２つある場合は初めの<a herf=”http://jazziblog.com”>の部分を開始タグと呼びます。
一方、終わりの</a>の部分は終了タグと呼ばれます。
ただ中には開始タグのみで、終了タグのないHTMLもあるので、注意が必要です。
タグはHTMLの始まりと終わりを示す目印にもなるので、まず頭に入れておくと今後の理解がスムーズに進むはずです。
要素内容
HTMLの構造は主に、タグと要素内容と属性の３つで出来ているとお話ししました。
次は２つ目の要素内容をご紹介していきます。
要素内容は先ほどの一例：<a herf=”http://jazziblog.com”>jazziの時間。</a>でいうと、
jazziの時間。の部分のことを指します。
基本的には要素内容は、先ほどご紹介したタグで意味付けされるものと考えてください。
今回の一例でいうと、開始タグと終了タグの間に要素内容が挟まれているということになります。
なので「jazziの時間。」という要素内容が、
<a herf=”http://jazziblog.com”>で示された開始タグと
</a>で示された終了タグで
意味付け（マークアップ）されているということです。
属性
HTMLのタグと要素内容が理解できたところで、残るは最後の属性についてです。
先ほどのHTMLの一例であれば「jazziの時間。」という要素内容に、リンクを貼るという役割の属性をタグでマークアップしたと言えます。
具体的に属性は、開始タグの要素名の後に半角スペースを入れ、「属性名＝”値”」の形で書かれます。
ちなみに要素名のご紹介が遅れたので、ここでご紹介します。
先ほどのリンクの一例：<a herf=”http://jazziblog.com”>jazziの時間。</a>で見てみましょう。
実は、開始タグ：<a herf=”http://jazziblog.com”>中の「a」の部分が要素名と呼ばれます。
そして本題の属性は、開始タグ中の要素名：a 以降の部分を指します。
要するに、属性はherf=”http://jazziblog.com”の部分です。
そして属性は「属性名＝”値”」の形で書かれるので、今回の一例の場合は…
属性名：herf
値：”http://jazziblog.com”
ということになります。
まとめ
先ほどのリンクの一例をもとに今回のまとめです。
開始タグ：<a herf=”http://jazziblog.com”>
要素名：a
要素 属性名：herf
値：”http://jazziblog.com”
終了タグ：</a>
今回のご紹介したHTMLのタグや要素等の基礎知識を、実際に使っていく流れを次の記事ではご紹介しています。
HTML初心者の方はぜひ今回の内容の復習編としてご活用いただければと思います。
具体的には次の記事では、HTMLでのリンクの貼り方を公式化して説明していて、ここでご紹介した知識も多く出てきます。
もし次の記事でつまずく部分があれば、再度この記事に戻って照らし合わせながら確認していけば、HTMLの実際の使い方や流れが掴めてくるはずです。
サイトやブログの運営等の際、HTMLは難しいものとして倦厭されがちですが、
一旦勉強をはじめてみると、難易度は格段に下がることを私自身、とても実感しています。
きっと勉強して慣れた者勝ちなのだと思います。
今回の記事を書き進める中で、日々の記事だけではなく、HTMLやCSS等でのより素敵なサイト創りを通して、
皆様にもっと素敵な時間を過ごせて頂けるように、サイトの充実化を進めていこうと思いました！
何かご要望やご意見等ございましたら、ぜひ気軽にコメント欄にご記入お待ちしております♩
以上、jazziでした！
コメント
[…] […]
[…] […]