웹 사이트에 정보를 담을 때에는, 그 정보의 성격에 맞는 적절한 태그를 이용하는 것이 중요하다. 글로 이루어진 정보를 나타낼 때에는, 글의 제목과 소제목 그리고 글의 내용을 구분해 주는 태그를 적절하게 사용한다.
Heading | title
<h1> heading & paragraph </h1>
<h2> heading | title </h2>
<h3> h3 </h3>
<h4> h4 </h4>
<h5> h5 </h5>
<h6> h6 </h6>
Paragraph | contents
<p> 웹 사이트의 정보를 담을 때에는... </br> 줄 바꿈을 하고 싶을 때에는... </p>
+) br | break
+) span | The <span> HTML element is a generic inline container for phrasing content, which does inherently represent anything.
Emphasis
문단에 담는 텍스트 중에서도, 강조하고 싶은, 중요한 정보가 있다. 우리가 굵은 글씨로 표현하거나, 다른 색깔로 표현함으로써 정보를 강조하는 것과 같다. html에서는 강조하고 싶은 텍스트 정보를 em이나 strong으로 감싸서 표기할 수 있다.
<p> I knew you were <em>trouble</em> when you walked in. </p>
<p> I knew you were <strong>trouble</strong> when you walked in. </p>
<p> I knew you were <i>trouble</i> when you walked in. </p>
<p> I knew you were <b>trouble</b> when you walked in. </p>
em 태그로 감싼 부분은 화면에 italic체로 표기되고, stong 태그로 감싼 부분은 bold체로 표기된다. 하지만 em과 strong 태그로 감싼 텍스트가 "중요한 정보"라는 의미에는 차이가 없다. 만약 중요한 정보라는 의미는 빼고, 단순한 텍스트 스타일링을 하고 싶다면 i와 b 태그나 css를 이용할 수 있다.
Quotations
paragraph에 인용문이 포함되어 있을 때에는 q 태그를, 하나의 문단 전체를 블럭으로 인용할 때에는 blockquote 태그를 이용할 수 있다. cite 태그(누가 한 말인지)나, cite 속성(url)을 이용하면 출처를 나타낼 수 있다.
html entity(escape) code
<p>
A semantic element clearly describes its meaning to both the browser and
the developer. Examples of non-semantic elements: <div> and <span> - Tells
nothing ...
</p>
<p>
A semantic element clearly describes its meaning to both the browser and
the developer. Examples of non-semantic elements: <div> and <span> - Tells
nothing ...
</p>
첫번째 p 태그 내부에 텍스트로 쓰여진 <div>와 <span>이 텍스트가 아니라, 태그처럼 인식되고 있다. html 문서 안에서 <와 >은 reserved cahracter(예약어)로, 텍스트가 아니라 코드로서 태그를 여닫는 역할을 하기 때문이다. 따라서 첫번째 p 태그의 <div>와 <span>은 텍스트가 아니라, closing 태그를 사용하지 않은 불완전한 태그로 인식된다.
html 문서 안에서 &, <, >와 같은 특수 문자를 처리하기 위해서 사용되는 것이 escape code이다. escape code는 " &(ampersand) 문자 코드 ;(semicolon) " 의 조합으로 나타내며 두번째 p태그에서는 <와 >를 사용한 예시를 나타내고 있다.
lt | less than <
gt | greater than >