Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
요소(element)는 웹 페이지를 구성한다. XML과 HTML에서, 데이터 항목, 텍스트 한 묶음, 이미지를 담을 수 있고, 아무것도 담지 않을 수도 있다. 일반적인 요소는 여는 태그와 몇 가지 특성, 내부의 텍스트 콘텐츠, 닫는 태그로 구성됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>This is a title</title>
</head>
<body>
</body>
</html>
HTML 문서는 문서 형식 선언 (비공식적으로, "doctype")으로 시작해야 한다. 브라우저에서 doctype의 기능은 렌더링 모드를 지시하는 것이며, 부분적으로는 쿼크 모드를 피하기 위한 목적도 있다.
doctype의 원래의 목적은 문서 형식 정의 (DTD)에 기반한 SGML 도구를 통하여 HTML 문서의 파싱과 유효 여부 확인을 가능하게 하려는 것이었다. DOCTYPE에 대한 DTD는 DTD에 순응하는 문서를 가진 허용 또는 금지된 내용을 지정하고 기계가 읽을 수 있는 문법을 포함하도록 지시한다. 반면 브라우저는 HTML을 SGML의 애플리케이션으로 수행하지 않으며, 결과적으로 DTD를 읽지 않는다. HTML 5는 기술적인 제한으로 인해 DTD를 정의하지 않는다. 그래서 HTML5에서 doctype 선언 는 DTD를 참조하지 않는다.
태그는 보통 클로징 태그가 꼭 필요하다.
<body>
<!--화면에 보여질 내용-->
<h1>heading</h1>
<p>paragraph</p>
</body>
페이지 상에 보이는 부분은 위와 같이 <body></body>
태그 사이에 들어가야 한다.
<b>boldface</b>
<i>Italic</i>
<strong>strong text</strong>
<em>emphasized text</em>
위의 결과물은 다음과 같다.
boldface
Italic
strong text
emphasized text
<b>
와 <em>
둘 다 폰트에 기울임 효과를 준다. 하지만, 둘 사이에는 웹 접근성에 기여하는 분명한 차이점이 존재한다.
스크린 리더(Screen Reader)를 사용하는 경우 음성 합성(Speech Synthersizer)도구가 페이지를 읽고 해석할 때 억양을 강조해서 읽어준다.
즉, 화면에서만 강조하고 싶다면 <b>
와 <i>
를 사용하면 되고 스크린 리더에 영향을 주게 실질적으로 강조를 하려면 <strong>
과 <em>
를 사용하면 된다.
(Velog에서는 왜인지 <b>
는 기능을 안하는것 같다..?!)
<a href="URL">'a' stands for anchor and 'href' stands for hyper-reference</a>
URL 부분에는 웹 주소 말고도 id 속성을 추가하여 내부에서 이동이 가능하게 링크를 걸어줄 수도 있다.
<h1 id="firstheading">What is HTML</h1>
<a href="#firstheading">Click to Go!</a>
Click to Go!
위 링크를 클릭하면 첫번째 헤딩으로 이동한다.
<a><!--링크 대상--></a>
에서, <!--링크 대상-->
은 텍스트가 될 수도, 이미지가 될 수도, 백그라운드 화면 전체가 될 수도 있다.
<a target="_blank" href="https://en.wikipedia.org/wiki/HTML"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1920px-HTML5_logo_and_wordmark.svg.png" width="100" alt="HTML logo" align="right"></a>
🗝Key points
<table>
<thead> <!--Table header area-->
<tr> <!--Table Row-->
<th>Name</th> <!--Table Heading - header cells (columns)-->
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody> <!--Table body area-->
<tr>
<td>Ddeokbokki</td> <!--tabular data-->
<td>14</td>
<td>Male</td>
</tr>
<tr>
<td>Samgyupsal</td>
<td>76</td>
<td>Femal</td>
</tr>
</tbody>
</table>
Name Age Gender Ddeokbokki 14 Male Samgyupsal 76 Femal
색깔, 테두리 등은 CSS에서 다뤄보자!