html) <ul> vs <ol> // <b> vs <strong> // <div> vs <span> // <a href>

<ul> vs <ol>

닷 형태가 ul이고 숫자로 순차적으로 나오는 것(1, 2, 3..) ol이다. 약자를 보면 쉽다. 내가 막써오던 ul은 unordered list 였다. 정렬되지 않은 리스트이므로 닷 으로 구분되는 것이었다. 반면 ol은 ordered list로 정렬된 리스트이기 때문에 숫자로 구분되는 것이다.

<b> vs <strong>

HTML문서를 작성할 때 가장 많이 표현하게 되는 양식이 글자를 굵게하는 것입니다. 그리고 이 문제를 해결하기 위해서 <b> 요소를 너무나 당연하게, 그리고 쉽게 사용합니다. 하지만 웹접근성을 높이고자 한다면, 웹표준을 이해하고 준수하고자 한다면 <b>요소보다는 <strong>요소가 좋습니다.

<strong>요소는 의미적으로 강조를 가리킵니다. 반면에 <b>요소는 문자열을 단순히 굵게 표시하여 표현하는데 목적을 둡니다. 표현상으로 두 요소의 차이는 없지만, 스크린리더와 같이 요소 의미를 해석해서 내용을 읽어주는 경우 <strong>요소가 적용된 텍스트를 강조해서 읽어줄 수 있습니다.

더불어 강조된 글자 표현을 위해서 스타일을 이용하는 경우가 많은데, 이럴 경우 스크린리더에서는 display, visibility등 몇 몇 경우를 제외하고는 스타일을 참조하지 않으므로 강조의 의미를 살릴 수 가 없습니다. 특별히 의미를 고려해서 텍스트를 강조해야만 한다면 <strong>요소를 이용하는 것이 좋을것 같습니다. 그런데 <b> 요소를 <strong>요소로 교체해야한다는 논리 때문에 무수하게 많이 사용된 모든 <b>요소를 <strong>요소로 바꾼다면 오히려 문제가 생기지 않을까 싶습니다. 첫째로 글자수가 늘어나 시간이 늘고, 용량이 늘어나게 됩니다. 둘째로 습관적인 굵은 글씨가 모두 의미적으로 “강조”였는가 하는 것입니다. 무분별하게 <strong>요소를 사용한다면 정말로 중요한 것과 우선순위를 낮출수 있는 것들과의 구분이 모호해질 수 있게 됩니다. 따라서, <b>와 <strong>요소를 사용할 곳을 잘 판단하여야 할 것이고, <strong>과 같이 강조 의미를 가지고 있는 <em>요소를 지정한 후에 스타일을 이용해서 기본 스타일속성을 없애고, <strong>과 같이 굴게 표시(이 경우 본래의 em 속성을 사용할 일이 없어야 한다)하는 스타일을 지정해 볼 수도 있을것 같습니다.

출처: http://www.clearboth.org/b_strong_differnt/

-> 시맨틱 웹과 관련하여 스크린 리더가 읽어 들일때 <b>보다는 <strong>에 집중한다는 의미이다. <b>는 단순히 눈에 보이는 글씨를 굵게 해주는 것이고 <strong>은 시맨틱 웹의 관점에서 볼 때에 컴퓨터에게 맥락상 이것이 중요하다고 알려주는 것과 같은 의미이다. 따라서 <b>보다는 <strong>을 쓰는 것이 적절해 보인다. 물론 <strong>을 남발하는 단점에 관해서도 다시 한 번 읽어보도록 하자

<div> vs <span>

둘다 묶거나 담는 container의 역할을 하는 태그이지만 기능이 약간씩 다르다.

참고 : http://mainia.tistory.com/3289

<div> 특징

1. block-level element

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

2. 주로 html 태그들의 container로 사용

The <div> element is often used as a container for other HTML elements.

3. 크기 설정 가능(width, height), 가로폭 모두 차지함으로써 줄바꿈이 강제됨

<span> 특징

1. inline element

An inline element does not start on a new line and only takes up as much width as necessary.

2. 주로 text들을 감싸는 container로 사용

The <span> element is often used as a container for some text.

3. 크기 설정 불가능, 줄바꿈 없음

<a href="#"></a>

href 는 Hypertext Reference의 약자이다. 추가적으로 숙지할 것은 http:// 없이 www.~ 로 주소를 넣으면 제대로 링크가 걸리지 않는다는 것과 주소 말고 동일한 폴더 내의 .html파일을 가리켜도 해당 페이지를 불러온다는 것이다