블록레벨 요소와 인라인 요소

HTML 문서에는 블록레벨(black level) 요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다.

• 블록레벨 요소
  

<div>나 <p>, <h1>과 같은 요소들은 블록레벨 요소이다. 블록레벨 요소의 특징은 줄 바꿈 태그인 <br>과 같은 요소를 쓰지 않아도 스스로 줄 바꿈이 된다는 데 있다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐른다. 그리고 주변에 일정량의 공간을 만든다. 또한 너비를 지정해 주지 않으면 풀사이즈가 되어 가로로 가득 찬다. CSS를 적용하지 않고 이 요소들을 보면 세로로 쭉 나열되는 것을 볼 수 있다. 블록레벨 요소는 가로, 세로 일정량의 여백을 가지고 있는데 이것은 브라우저마다 조금씩 다르다.

• 인라인 요소
  

<img>, <span>, <strong>과 같은 요소들은 인라인 요소이다. 이 요소들의 특징은 줄 바꿈 태그를 사용하지 않거나 블록레벨 태그 안에 단독으로 포함되지 않는 한 가로로 쭉 나열된다는 데 있다. 그리고 이 요소들의 주변에는 공간이 생기지 않는다.
블록레벨 요소 안에 인라인 요소가 포함되도록 마크업해야 문법을 바르게 준수할 수 있게 된다.

(마크업 : 직접적으로 화면에서 나타나게되는 정보는 아니지만. 화면상에 나타나게 되는 방법을 작성한 태그
마크업 언어 : 문서에 포함된 문장, 표, 소리 등과 같은 문서의 내용에 대한 정보가 아니라  그 문장과 그림, 표가 어떻게 배치되고 글자는 어떤 크기와 모양을 가지며 , 들여쓰기와 줄간격, 여백은 어느정도인지에 대한 정보를 의미.마크업이라는 말자체가 글이나 책다위에서 표시를 하거나 한다는 뜻이다.)

- 특정 단어를 강조하고 싶을때는 <b> 태그보다 <strong> 태그를 사용하는 것이 좋다. 외관상으로는 두 태그 모두 텍스트를 굵게 보이게 하여 강조해 주지만, <b> 태그는 단지 굵게 만들어 줄 뿐 강조하는 아무 의미가 없는 태그이다. 반면에 <strong> 태그는 외형적으로 텍스트를 굵게 해 주고 실제로 의미 있는 텍스트라고 강조해 주는 역할도 한다.

- 웹사이트의 메뉴나 목록 형태의 컨텐츠를 만들때는 <ul>과 <li> 태그를 조합한다. 만약에 사이트의 이용약관과 같이 목록 앞에 일정한 숫자를 순차적으로 붙이고 싶을 때는 <ol>, <li>를 이용하면 관리하기도 쉬운 훨씬 의미 있는 마크업이 된다.

- <span>이나 <mark>와 같은 태그는 특정한 부분에 의미를 부여하지 않아도 시각적으로 무언가 효과를 주고 싶을 때 사용.