텍스트와 관련된 태그

제목 태그, 본문 태그, 글자 관련 태그

Featured image

텍스트와 관련된 태그


콘텐츠

영상이나 이미지 ? 실질적으로 콘텐츠에서 큰 비중을 차지하는 것은 “텍스트”

텍스트 관련 태그 종류

제목 태그


heading의 약자로 제목을 나타내고 싶을 때 사용 h1이 가장 중요하며 숫자가 커질수록 중요도가 떨어짐. 중요도에 따라 1~6까지 씀 ex) 대제목 : h1, 부제목 : h2 나 h3 사용

제목 태그



제목 태그 예제

“이것은 내용입니다.” 부분에 태그가 존재하지 않음

태그를 감싸지 않고 바디 태그 안에 작성한 텍스트는 모두 일반적인 태그로 감싼 텍스트와 같이 작동 즉, 브라우저 화면에서 태그가 있는 것처럼 작동함. 나중에 css로 스타일 적용할 때 불편하므로 특별한 경우가 아니면 반드시 태그로 감싸는 것을 권장


본문 태그


<p> : paragraphs의 약자로 단락, 문단이라는 뜻을 가짐

p 태그 p 태그 실행 결과

html에서는 Enter키를 치더라도 스페이스바 하나로 인식함
다른 방법 필요 !


<br> : break 부수다, 찢다 의 약자로 엔터와 동일한 기능. 줄바꿈을 해줌

br태그 br태그 실행 결과

br 태그는 종료 태그를 쓰지 않음

종료 태그를 쓰지 않는 요소들을 빈 요소라고 함. 태그 사이가 비어 있기 때문 빈요소 그림 설명 빈요소 태그


<pre>: preformatted 형식화된 의 약자로 적은 내용 그대로 브라우저에 출력

pre태그 pre태그 실행 결과

적은 그대로 출력되는 게 좋은 것만이 아니어서 p태그를 더 많이 씀



글자와 관련된 태그


<strong> : strong 강한 의 약자로 태그로 감싼 단어 혹은 문장을 볼드체로 바꿔주고 중요하다는 의미 부여함

<em> : emphasized 강조된 의 약자로 태그로 감싼 단어 혹은 문장을 이탤릭체로 바꿔주고 중요하다는 의미 부여함

strong태그, em태그 strong태그, em태그 실행결과


<sub> : subscripted 아래에 기입한 의 약자로 태그로 감싼 단어나 문장을 일반 위치보다 위로 올림

<sup> : subscripted 위에 기입한 의 약자로 태그로 감싼 단어나 문장을 일반 위치보다 아래로 올림

sub태그, sup태그 sub태그, sup태그 실행결과


<ins> : inserted 끼워 넣은 의 약자로 태그로 감싼 단어나 문장 아래 밑줄 추가

<del> : deleted 삭제된 의 약자로 태그로 감싼 단어나 문장에 취소선을 추가

ins태그, del태그 ins태그, del태그 실행결과