プログラミング

プログラミングノート no.2

HTMLのタグについてまとめていきます!

頭<head>と身体<body>を包み込むHTML

HTMLの要素の中にはhead要素とbody要素が必ず含まれます。

head要素…文書に関する基本情報。コンピュータが見る(タイトル以外ユーザーの目には触れない)

body要素…本文。ユーザーが見る。

タグの種類を紹介する前にHTMLで使用する属性について確認!

属性…細かい指定を加える。属性名と属性値の総称。

この図(絵?)でいうと、<img>という画像を挿入するタグに対してsrcで「URLを指定します!」と宣言して、”images/logo.png”でURLを記載して「ここです!」と宣言するイメージです。

ページの基本情報を表すタグ

<meta> 文書に関する情報を指定

HTMLでは「この文字を使います!」という文字コードの指定が必要。昔はいろんな種類の文字コードが各業界やメーカーで独自開発されていて、互換性がなかった。しかしそれはややこしいので世界中の文字を括って登録しよう!ということになり、Unicodeという規格を作った。

日本語のWebサイトではUTF-8という文字コードが主流なので

<meta charset=”UTF-8″>

とheadに記述する。

<link> 文書を別の文書と関連付ける

属性 rel…リンク先のファイルとの関係性を表す

属性href…外部ファイルのURLを指定

主にCSSファイルを読み込ませるために使うことが多い。CSSファイルを読み込ませる場合はrel属性にstyleseetと入力して場所を指定する。例えば同じディレクトリにある「style.css」というファイルを読み込ませるなら

<link rel=”stylesheet” href=”style.css”>

と記述する。

<title></title> HTMLのタイトルを指定

このタイトルはhead要素の中で唯一ブックマークなどユーザーの目に触れます。

<style></style> 文字のスタイル(CSS)を記載する

別ファイルでCSSを記述せずに、HTMLに直接CSSを記述する場合に使用する。

<p> 段落

<p>この記事も一行ずつ<p>のタグで記述されています。</p>

<h1> ~ <h6> 見出し

1に近くなるほど、強調が強くなる。単純に大きい文字を使いたいから<h1>を使うのはNG。

ちなみにタグを説明してるこの「<h1>~<h6>見出し」の見出しはh3でできている。

<section><section/> 見出しを伴うまとまり

このタグの説明は<section>でまとめられてはいませんがまとめても良いでしょう。

<article></article> 切り出しても独立できる記事

例えるなら新聞。<article>の中に<section>の記事がたくさん入っているイメージ。

<nav></nav> ページのナビゲーションを指定

この中に箇条書きのタグ<ul></ul>や<li></li>を使うと昨日説明したグローバルナビゲーションやローカルナビゲーションが作成できる。

<aside></aside> サイドバーなどのナビゲーション

月別アーカイブやメインコンテンツから切り離せる補足情報を作成できる。

<div></div> まとめる(目印)

CSSを記述する時の目印になる。単にシカクで囲っているイメージ。「ここから下はロゴやでー!」「ここでロゴはおわりやでー!」みたいな。

<a></a> リンクをつける

属性href…外部ファイルのURLを指定

「前回の記事はこちらです」をコードで見ると

<p>z前回の記事は<a href=”https://kazepa.fun/202071-2/”>こちら</a>です</p>

となります。

<img> 画像の挿入

属性src…画像ファイルのURLを指定

属性alt…画像が利用できない環境の閲覧者のために画像の代わりのテキストを記述する。

例  <img src=”profile.jpg” alt=”プロフィール画像”>

<ul></ul> 順序関係ない箇条書き

タイトルの通り箇条書きができます。<li>を中で使うことでメニューを作成したりする。基本<li>とセット。できた箇条書きは黒ポチ(・)で表示される。

ちなみに<ul></ul>を<ol></ol>にすると黒ポチではなく番号になる。

<li> リストの項目

<ul></ul>か<ol></ol>に包まれる形でだいたい使われる。

<small> 細目や注釈

コピーライトを記述したり、そこまで重要ではない情報を述べる時に使う。

住所を教えるか道順を教えるか

ファイル同士をリンクしてつなぐことをパスと言うのですが、絶対パスと相対パスの2種類があります。

絶対パス…リンク先のURLを入力する

相対パス…今いる場所からのルートを伝える

私は!HTML5でコード書きまーす!!

必ず1行目(つまり<html>タグの上)に、<!DOCTYPE html>と記述することでHTMLの言語を使用しますと宣言します。これをDOCTYPE宣言といいます。

見やすくコメントを入れる

コードを記述していくと、後で修正したい箇所など目印を置いておきたい箇所が出てくると思います。そういうときはコメントを使います。

CSSでは入力が違うので画像で図にしてみました。

次回CSSへつづく

ABOUT ME
KAZEPA
1994年名古屋生まれ横浜育ち大阪在住。 3歳からダンスと共に育ち、中高バレーボール部、大学は東海大学体育学部で割とアクティブに過ごす。そして現在はエンターテイナー兼クリエイターとして人生を楽しんでいる。