[HTML] HTML 알아보기

💡 HTML(Hyper Text Markup Language) 이란?

웹 페이지를 만들기 위한 표준 마크업 언어로, 웹 페이지의 구조를 설명한다.

💡 HTML 구조

<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
</head>
<body>
...
</body>
</html>

<!DOCTYPE html> : 이 문서는 HTML5 라는 것을 정의
<html> : HTML 의 루트 요소
<head> : HTML 페이지에 대한 메타 정보를 포함
<body> : 문서의 본문, 모든 가시적인 컨텐츠에 대한 컨테이너

💡 HTML 에서 요소란?

<h1>요소</h1>

시작 태그에서 종료 태그까지의 모든 것
태그 안에 있는 내용

태그는 대소문자를 구분하지 않으나, 소문자로 작성할 것을 권장한다.

<h1>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<hr>
<h3>This is heading 3</h3>
<h4>This is heading 3</h4>
<h5>This is heading 3</h5>
<hr>
<h6>This is heading 3</h6>

<h1> ~ <h6> 은 제목을 정의한다.
<h1> 이 가장 큰 제목이다.
<hr> 은 컨텐츠를 분리하는 divide line 이다.

<p>

<p>This is another paragraph.</p>
<p>This is a <br> paragraph with a line break.</p>

<p> 는 문단을 정의하고, <p> 태그 내에서 띄어쓰기 및 줄바꿈을 하지 못한다.
<br> 은 줄 바꿈을 의미하고, 닫는 태그가 없는 요소이다.

<a>

<a href="https://www.w3schools.com">This is a link</a>

<a> 는 하이퍼링크를 정의한다.
<a> 는 href 속성을 갖는다. href 은 이동할 페이지의 url 을 지정한다.

<img>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

src 속성 : URL 을 지정하는 방법은 두 가지가 있다.
절대 URL 과 상대 URL 을 지정하는 것인데 절대 URL 은 도메인 이름을 포함하고 있기 때문에 언제 변경되거나 사라질지 모른다. 반면 상대 URL 은 도메인 이름을 포함하지 않고 URL 경로가 src="/images/img_girl.jpg" 와 같기 때문에 도메인이 변경되어도 깨지지 않는다. 때문에 상대 URL 을 사용하는 것이 좋다.
alt 속성 : 이미지에 대한 대체 텍스트를 지정하는 것이다.

style

<p style="color:red;">This is a red paragraph.</p>

style 속성은 색상, 폰트, 크기 등의 요소에 스타일을 추가하는 데 사용된다.
속성에 대한 값은 css 값이다.

title

<p title="I'm a tooltip">This is a paragraph.</p>

요소에 대한 몇 가지 추가 정보를 정의한다.
요소 위에 마우스 올리면 툴팁으로 표시된다.

💡 Semantic Web (의미론적 웹)이란?

Semantic Web(HTML) 은 직역하면 웹을 의미있게 만드는 것을 말한다.

웹을 의미있게 만든다는 것이 무엇일까? 그것은 개발자가 의도하는 바가 웹에서 잘 드러날 수 있도록 구현하는 것을 말한다. 웹 검색엔진 또는 스크린 리더는 HTML 의 태그와 요소에 따라서 같은 컨텐츠도 다르게 해석할 수 있기 때문에 개발자는 전달하고자 하는 컨텐츠를 태그 및 요소를 통해 더욱 명확하게 명시할 필요가 있다. 예를 들어 <div class="main"></div> 로 작성하던 것을 <main> 으로 작성하면 해당 컨텐츠가 메인 컨텐츠라는 의미를 더욱 명확하게 전달할 수 있다. 그 외에 <nav>, <section>, <article> 와 같은 태그의 사용에 있어서도 그러하다.