하이퍼텍스트(Hypertext)란 웹 페이지(HTML 문서)들이 서로 링크로 연결되는 방식을 의미합니다. 따라서 웹 페이지에서 다른 문서로 이동할 수 있게 해주는 링크를 하이퍼텍스트라고 부릅니다. 이름 그대로 HTML은 마크업 언어(Markup Language)로, 텍스트 문서에 태그를 붙여 웹 브라우저가 해당 문서를 어떻게 구조화하고 화면에 표시할지 지시하는 역할을 합니다. HTML은 'Hypertext Markup Language'의 약자로, 웹 페이지를 작성하는 데 가장 널리 사용되는 언어입니다.
HTML5는 HTML 4.01, XHTML 1.0, XHTML 1.1을 대체하는 차세대 HTML 표준입니다. HTML5는 월드 와이드 웹(WWW)에서 콘텐츠를 구조화하고 표현하기 위한 표준으로, 기존에는 Adobe Flash, Microsoft Silverlight, Google Gears 같은 서드파티 브라우저 플러그인에 의존하던 동영상 재생, 드래그 앤 드롭 등의 기능을 표준 자체에서 지원한다는 점이 큰 특징입니다.
HTML Doctype(문서 타입)
HTML 문서를 작성할 때 가장 먼저 선언해야 하는 것이 바로 doctype입니다. doctype은 이 문서가 어떤 버전의 HTML로 작성되었는지 웹 브라우저에 알려주는 역할을 하며, 대소문자는 구분하지 않습니다.
HTML5 doctype 선언 방법은 다음과 같습니다.
<!DOCTYPE html>
HTML 문자 인코딩(Character Encoding)
HTML에서 charset 속성은 <meta> 태그와 함께 사용되어 문서의 문자 인코딩 방식을 지정합니다.
기본 문법은 다음과 같습니다.
<meta charset="char_set">
여기서 char_set은 HTML 문서의 문자 인코딩을 지정하는 문자 집합을 의미합니다.
다음은 문자 인코딩을 지정하는 실제 예제입니다.
예제
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> </head> <body> <h2>Example</h2> <p>We have added demo text:<p> <textarea rows = "4" cols = "50"> Here, we are mentioned the demo content. This is just to display an example of charset in an HTML document. </textarea><br> <button type = "button">Previous</button> <button type = "button">Next</button> </body> </html>
실행 결과
HTML 제목 태그(Headings)
모든 문서는 제목으로 시작합니다. HTML에서는 제목 크기를 단계별로 조절할 수 있으며, 총 6단계의 제목 요소인 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>를 제공합니다. 제목을 화면에 표시할 때 브라우저는 제목 앞뒤로 한 줄씩 여백을 자동으로 추가합니다.
HTML 요소(Elements)
HTML 요소는 시작 태그로 정의됩니다. 요소가 다른 콘텐츠를 포함하는 경우, 요소 이름 앞에 슬래시(/)가 붙은 종료 태그로 마무리됩니다.
HTML 속성(Attributes)
속성(attribute)은 HTML 요소의 특성을 정의하는 데 사용되며, 요소의 시작 태그 안에 위치합니다. 모든 속성은 이름(name)과 값(value), 두 부분으로 구성됩니다. 예를 들면 다음과 같습니다.
<canvas id="newCanvas" width="400" height="300">
그 외의 예시는 다음과 같습니다.
<img alt="alternate text">
HTML5 표준에 따르면 속성 값을 따옴표로 감싸는 것이 필수는 아니지만, 코드의 일관성과 안정성을 위해 항상 따옴표를 사용하는 것이 좋은 습관입니다.
HTML 텍스트 서식(Formatting)
서식 지정이란 HTML에서 웹 페이지의 텍스트를 꾸미는 방법을 의미합니다. 굵은 글씨, 기울임 글씨, 취소선, 형광펜 강조 효과 등이 여기에 포함됩니다. 다음 예제를 통해 확인해 보겠습니다.
예제
<!DOCTYPE html> <html> <body> <h2>Tags for formatting text in HTML</h2> <strong>Strong text</strong><br> <b>Bold text</b><br> <em>Emphasized text</em><br> <i>Italic Text</i><br> <mark>Highlighted text</mark> </body> </html>
실행 결과
HTML 주석(Comments)
HTML 주석은 <!-- ... --> 태그 사이에 작성합니다. 이 태그 안에 포함된 모든 내용은 주석으로 처리되며, 브라우저는 이를 완전히 무시하고 화면에 표시하지 않습니다. 주석은 코드에 설명을 덧붙이거나 임시로 특정 코드를 비활성화할 때 유용하게 활용됩니다.