상세 컨텐츠

본문 제목

2일차 - 중요 HTML 태그 속성

본문

<br> 태그는 열린 태그만 존재하는 줄바꿈 태그이다.

<p> 태그는 <br>태그와 다르게 닫힌 태그가 존재하지만, <br>태그와 같이 줄바꿈이 된다.

 

두 태그의 줄바꿈은 같아도, 사용하는 맥락이 다르다.

<br> 태그는 단지 줄바꿈일 뿐이다.

<p></p> 태그는 paragraph의 줄임말로 사용되어 문단을 분류할때 정보로써 더 가치있어 진다.

 

하지만 <p>태그는 정해진 여백만큼 벌어지기 때문에 시각적으로 자유도가 떨어진다. (CSS를 사용하지 않을경우)

 

이렇게 결과는 같아도, 의미상 혹은 문맥상으로 사용되는 경우를 잘 분류해서 사용해야한다.

 

 

제목을 작성하는 두가지 방식이 있다.

첫번째 방식은 일반인이 제목을 작성하는 방식이고,

두번째 방식은 지식인이 제목을 작성하는 방식이다.

<!-- 첫번째 방식 -->
<span style="font-size:24px">
	coding
</span>

<!-- 두번째 방식 -->
<h3>coding</h3>

 

검색엔진은 웹 페이지에 담긴 HTML 코드를 분석하고 태그에 근거해서 정리한다.

시각적으로 제목이 "coding"처럼 보이는 사이트와 제목이 "coding"인 사이트를 비교하는것과 같은 예시이다.

정보를 가진 사이트는 제목이 "coding"인 사이트의 편을 들어 줄 것이다.

 

이미지로 글을 쓰는 경우가 많은데,

검색 엔진에게는 존재하지 않는 페이지가 되기 때문에 HTML의 의미에 맞게 정확하게 사용해야한다.

이런것을 개방성 또는 접근성(accessibility)라고 한다.

 

태그의 정확한 의미를 알고 사용하자.

 

 

이미지를 웹 페이지에 포함시킬 때 사용하는 태그의 이름은 <img>이다.

<img src ="" width="100%">

src 속성은 이미지의 주소

width, height 속성을 통해 이미지 크기를 조절 할 수 있다.

 

 

 

'책 리뷰 > 생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글

6일차 - CSS 기초문법  (1) 2024.01.03
5일차 - HTML 마무리  (0) 2024.01.02
4일차 - 웹  (0) 2023.12.27
3일차 - 목록, 앵커 태그  (1) 2023.12.26
1일차 - HTML 기초  (0) 2023.12.21

관련글 더보기

댓글 영역