HTML ,text 문단 관련 태그

이전에 블럭 레벨 요소와 인라인 레벨 요소를 알아야 한다.

 

블록 레벨(block-level) : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소. 이 한 줄을 차지한다는 의미는 너비가 100%라는 것을 뜻함. 따라서 다음 요소가 양 옆으로 붙을 공간이 없어서 자연스럽게 "줄넘김"이 됨.

블록 레벨 요소는 인라인 요소에 중첩될 수 없음.

그러나 블록 레벨 요소는 다른 블록 레벨 요소에 중첩될 수 있음.

 

인라인 레벨(inline-level) : 줄을 차지하지 않는 요소. 브라우저같은 화면에 표시되는 컨텐츠만큼 영역을 차지하고, 나머지 공간에 다른 요소가 올 수 있음.

 

---

 

웹 표준 유효성 검사 https://validator.w3.org

---

 

 

태그 작성 규칙

1> 모든 태그는 소문자로 작성하는 것이 원칙.

2> 연속된 white-space character(space ,tab , enter)는 하나만 인정

3> 웹페이지에 표시 하려는 특수문자는 "&"와 ";"사이에 예약어를 입력하여 표시

4> 웹표준은 HTML , CSS, Javascript 모두 분리되어 작성되어야함.

https://entitycode.com/ 특수 문자 기호 참조

 

<h1></h1> ... <h6></h6> 구획 제목 요소

 

총 6단계로 구성된 제목 요소. 문서 중요도에 따라 나눠짐.

h1이 가장 높고 h6이 가장 낮다

한 페이지에는 하나의 h1을 사용하는 것이 좋다

 

<p></p>  하나의 문단

 

paragraph 태그 : 문단과 문단을 구분할 때 사용되며 블럭 레벨 요소.

일반적으로 블럭 레벨 요소는 다른 블럭 레벨 요소를 포함할 수 있지만
p 태그의 경우 인라인 요소만 포함 가능함에 주의.

 

<pre></pre>

 

white-space character 입력한 그대로 표시 단 , 그 외 특수문자는 entitycode 형식 그대로 표현해야함을 주의

 

<hr> 수평선

 

끝 태그가 없는 수평 가로선을 나타냄.

 

<b></b> 굵은 글자.(지양할 것)

 

볼드(Bold) 태그 : 굵은 글자를 표현하며 인라인 레벨 요소.

 

<strong></strong> 굵은 글자 (지향할 것)

 

스트롱 태그 : 볼드 태그는 단순히 글자만 굵게 표시하여 강조를 하지만 스트롱 태그는 실제 웹 브라우저나 검색 엔진에 중요함을 전달하여 검색지수를 상향시킬 수 있으며, 음성합성기술 등을 통해 페이지를 해석할 때 악센트를 줄 수 있는 등의 부가적 기능을 포함. 따라서 최신 웹 표준은 스트롱 태그를 권장.스트롱 태그는 인라인 레벨 요소이며 중첩하여 스트롱 태그를 적용이 가능하여 중요도 레벨을 계층화 가능.

 

<i></i> 이탤릭체 (지양할 것)

 

이탤릭체를 표현하는 인라인 레벨 요소

 

<em></em> 이탤릭체 (지향할 것)

 

엠퍼사이즈(emphasize) 태그  : 표시되는 것은 이탤릭 태그와 동일하게 이탤릭체로 텍스트 강조를 표시를 하되, 스트롱 태그와 마찬가지로 부가적 기능 포함.

 

<abbr title = " "> </abbr>약어 태그 (dot 형식의 underline)

 

약어에 대한 full name 을 title 속성을 통해 명시함으로써 검색지수를 높일 수 있는 태그.
따라서 abbr 태그에 포함된 컨텐츠 뿐만아니라, title 속성에 명시된 개별 단어로도 검색이 가능.
title 속성은 컨텐트에 대한 툴팁(tooltip) 기능을 포함하며 dot 형식의 underline 형태로 표시.
    -->  <abbr title="Hypertext Markup Language">HTML</abbr> 

 

<dfn title=" "></dfn> 용어 설명 태그 (이탤릭 형태)

 

 - abbr 태그와 마찬가지로 title 속성을 통해 검색지수를 높일 수 있는 태그로써, 문서 내에서
최초로 사용되는 용어에 대한 정의를 할 때 사용.
단, dfn 태그의 부모 요소에는 해당 용어에 대한 정의나 설명이 반드시 포함되어야 함에 주의.
abbr 태그와 마찬가지로 컨텐트에 대한 툴팁(tooltip) 기능을 포함하며 이탤릭 형태로 표시.

  --> <dfn title="HyperText Transfer Protocol">HTTP</dfn>

<blockquote cite =" " > </blockquote> 인용문 기록.( 들여쓰기 형태)

 

독립적인 블럭 레벨 요소 형태의 인용문을 작성할 때 사용되며 기본적으로 블럭의 좌/우가 들여쓰기 형태로 표시.
cite 속성을 통해 인용문에 대한 출처를 명시.

 

<q cite= " " > </q> 인용문 기록 ("" 의 형태)

 

짧은 형식의 인용문을 작성할 때 사용되는 인라인 레벨 요소이며 쌍따옴표로 감싸진 형태로 웹 페이지에 표시.

 

<address> e-mail : 0000000@hanmail.net </address> 주소 연락처 상호명 (이탤릭체)

주소나 연락처 상호등을 표시하기 위한 태그로 이탤릭체가 디폴트로 설정.
굳이 address 태그를 별도로 사용하는 것은 검색엔진에 대한 검색 효율성을 보장하기 위함.