LECTURE/HTML5

HTML5 - 글자 관련 태그

heywoo 2023. 2. 2. 21:41

 

<!DOCTYPE html>
<!-- HTML5 문서 형식 선언 -->
<html lang="ko">
<!-- <html> : html 문서의 내용을 정의 -->
<!-- lang 속성 : 페이지가 어떤 언어로 되어 있나를 표시 (검색 엔진 참조) -->    
    <head>
    <!-- <head> : 문서 제목과 스크립트, 스타일 시트의 링크 또는 선언을 포함하는 
        문서의 일반적인 정보(메타데이터)를 정의 -->
        <title>1_글자관련태그</title>
        <!-- <title> : 브라우저의 제목 표시줄이나 페이지 탭에 보여지는 문서의 제목 정의 -->
        <meta charset="UTF-8">
        <!-- 문자 인코딩 선언 -->
    </head>

 

&lt;  :  <

&gt;  : >

h1이 가장 크고 h6이 가장 작다.

<body>
    <!-- <body> : html 문서의 내용(content)을 정의 -->
        <h3>&lt;hn&gt; : 제목을 입력할 때 사용하는 태그</h3>
        <h1>h1 태그입니다.</h1>

 

<hr/>  :  줄 바꾸면서 수평선 넣는 태그

<br/>  : 줄 바꿈 태그

<p> </p> :  단락을 구분하는 태그, 하나의 공백만 표시하며 줄 바꿈 입력을 별도의 태그로 지정해야 한다.

<pre> </pre> : 여러칸 띄우기, 혹은 줄 바꿈 등을 포함하여 입력한 내용 그대로 표현하는 태그

 

<b></b> : 글자 굵게 표시하는 태그

<strong></strong> : 글자 굵게 표시하는 태그 -> 웹 접근성 - 스크린 리더 실행 시 강조된다.

<i></i> : 글자를 기울이는 태그

<em></em> :글자를 기울이는 태그 -> 웹 접근성

 

<mark></mark> : 형광펜 효과를 나타내는 태그

<u></u> : 글자에 밑줄을 긋는 태그

<small></small> : 글자를 작게 표시하는 태그

<sub></sub> : 아래 첨자

<sup></sup> : 위 첨자

<s></s> : 글자에 취소선을 넣는 태그

 

<blockquote cite="https://www.naver.com"></blockquote>

blockquote : 인용 문구를 나타내는 문구

cite 속성 : 인용된 사이트 주소를 작성, 직접 표시되지는 않지마나 검색 엔진에는 노출된다.

<q></q> : 인용 문구를 나타내는 태그

<cite>웹주소</cite> : 참고한 웹 문서를 이텔릭체로 나타내는 태그

<abbr title="Internet of Things">IoT</abbr>  : IoT에 마우스 오버하면 툴팁이라는 공간에 title 정보가 나타난다.

저작자표시 비영리 (새창열림)