HTML은 HyperText Markup Landuage의 약자로 웹 사이트의 기본 구조를 정의할 때 사용한다. HyperText는 서로 다른 웹페이지를 연결한다는 의미를 갖고 있으며 Markup은 웹페이지의 컨텐츠들을 구조화할 때 사용하는 여러가지 태그들을 의미한다. 또 다른 Markup 언어로는 XML(extensible markup language), GML(generalised markup language) 등이 있다.
HTML 요소들은 'tag'라고 부르며 "<"과 ">"을 태그 이름으로 감싼 형태이다. 이 때, 태그의 이름은 대문자/소문자 혹은 대,소문자가 섞인 형태로도 쓰여질 수 있다. 기본은 소문자 형태를 사용한다.
<!DOCTYPE html>
: html5의 선언문으로 버전별로 차이가 있다. html 구조를 잡을때는 버전을 미리 선언해서 내용을 올바르게 표시할 수 있도록 해야하며 html 태그 앞, 문서의 가장 최상단에 위치한다.
<head>
: 메타 데이터의 집합을 정의할 때 사용한다. head에 입력된 요소들은 화면에 표시되지 않는다. 메타 데이터는 일반 사용자는 읽을 수 없지만 컴퓨터가 처리해야하는 html 문서와 관련된 정보들이 담겨 있다. <title>, <style>, <link>, <meta>, etc.
<body>
: html 화면을 구성할 때 사용하며 text, image, video 등의 여러가지 종류의 구성 요소들을 감싸며 HTML 문서에는 단 하나의 body 요소만이 존재할 수 있다.
<title>
: 웹페이지의 이름을 정의할 때 사용하며 제목 표시줄 혹은 페이지 탭의 제목으로 노출된다.
<!--text-->
: 코드 작성시 주석 입력의 용도로 사용하거나 코드를 주석처럼 변경할 때 사용한다. test로 코드 변경시 예전 코드를 훼손하지 않고 비활성화할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="여기는 사이트에 대한 설명을 적는 위치입니다."></meta>
<!--이렇게 적은 설명은 사이트 검색시 링크 아래의 설명 형태로 노출됩니다.-->
</head>
<title>Study</title>
<!-- 주석 내용 -->
<body></body>
</html>
<div>
, <span>
: 어떠한 기능도 의미도 없이 특정 영역을 CSS로 꾸미는 기능을 주고 싶을때 사용한다.<h1> ~ <h6>:
h는 heading을 의미하며 기사의 헤드라인 혹은 text의 제목을 강조할 때 사용한다.
<p>
: p는 paragraph을 의미하며 줄 글의 형태의 text 정보를 입력할 때 사용한다.
<br>
: br은 break를 의미하며 단락을 줄바꿈할 때 사용되며 클로징 태그가 없다.
\n
: escape character(문자열 내에서 특수한 기능을 사용하는 문자)로 br과 동일하게 단락을 줄바꿈하는 기능으로 사용할 수 있다.
 (non-breaking space)
: 문자열 내에서 띄어쓰기의 기능을 수행
<body>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>
The brown bear (<em>Ursus arctos</em>) is native to parts of northern
Eurasia and North America. Its conservation status is currently
<strong>Least Concern.</strong><br /><br />
There are many subspecies within the brown bear species, including the
Atlas bear and the Himalayan brown bear.
</p>
<h3>Species</h3>
<h3>Features</h3>
</div>
</body>
Q. html에 비슷한 기능을 하는 태그가 있을 경우
, 무엇을 쓰는 것이 좋을까?
정답은 없다. 하지만 html 언어의 목적이 웹사이트의 구조를 정의할 때 사용하는 언어이기 때문에 스타일 적인 요소보다는 강조의 의미가 있는 태그를 사용하는 것이 html이라는 언어의 특성을 생각했을 때 더 좋은 선택이지 않을까 싶다.
<i>
: text를 italic 스타일로 입력할 때 사용한다.<em>
: em은 emphasis를 의미하며 문장을 italic 스타일로 강조할 때 사용한다.<b>
: 문장을 Bold 스타일로 입력할 때 사용한다. <strong>
: 문장을 Bold 스타일로 강조할 때 사용된다.<ul>
: ul은 unordered list를 의미하며 별도의 순서가 없는 리스트를 의미한다. 순서가 없기때문에 기본 스타일로 list 앞에 숫자가 아닌 글머리 기호가 붙는다.
<ol>
: ol은 ordered list를 의미하며 별도의 순서가 있는 리스트를 의미한다. 순서가 있기 때문에 기본 스타일로 list 앞에 숫자 형태의 기호가 붙는다.
<li>
: li는 list를 의미하며 ul과 ol로 구분된 리스트 아이템을 표현할 때 사용한다.
<body>
<div>
<h3>Species</h3>
<ul>
<li>Arctos</li>
<li>Collarus</li>
</ul>
<h3>Countries with Large Brown Bear Populations</h3>
<ol>
<li>Russia</li>
<li>United States</li>
</ol>
</div>
</body>
<img />
: img는 image를 의미하며 일반적인 태그들과 다르게 self-closing 형태이다. 이미지 타입의 데이터를 표현할 때 사용하며 태그 안의 여러가지 attribute를 사용하여 이미지의 속성을 정의할 수 있다.
src
: image의 source attribute를 의미하며 나타낼 이미지의 주소를 정의하는 위치이다.
alt
: alternative text를 의미하며 image에 대한 정보 설명시 사용한다. 이미지를 음성언어로 전환시 해당 정보를 대신 읽을 수 있는 장점(SEO: Search Engine Optimization)이 있고 관련 이미지 조회시 검색어와 일치할 경우, 해당 정보로 웹브라우저 상위에 랭크 될 수 있다.
<video>
: 동영상 타입의 데이터를 표현할 때 사용한다.
width
, height
: 동영상 데이터의 사이즈를 정의할 때 사용하는 attribute로 video tag 안에 재생될 동영상 크기를 반드시 지정해줘야 한다.control
: 동영상 데이터의 pause, play, skip 등의 기능을 재공한다.text
: video tag 사이에 입력된 text는 동영상이 재생되지 않을 때 안내 문구를 정의할 때 사용한다.<source>
: video 태그 안에서 여러 형태의 동영상 타입(.mp4, ogg, etc.) src를 정의할 때 사용한다. 브라우저는 여러 소스 포맷중에 해당 브라우저에서 지원하는 첫번째 소스를 보여준다.
<!--video tag에 직접 src를 정의할 수 있지만 권장하지는 않는다.-->
<div id="media">
<h2>Media</h2>
<img src="https://via.placeholder.com/150" alt="Media" />
<video src="video-url.mp4" width="320" height="240" controls>
Video not supported
</video>
</div>
<!--모든 브라우저에서 동일한 UX를 주기 위해 여러가지 타입을 정의하는 것이 좋다.-->
<video controls width="250">
<source src="/media/cc0-videos/flower.webm" type="video/webm" />
<source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
<a>
: a는 anchor를 의미하며 web page 간 혹은 web page 내 화면을 연결할 때 사용한다. anchor 사이의 문자는 Hyperlink의 이름이며 anchor 사이에 img tag를 사용하면 text 형태가 아닌 image 형태의 hyperlink를 사용할 수 있다.
href
: href는 hyperlink reference를 의미하며 anchor와 같이 사용하여 연결하고자 하는 경로를 활성화할 때 사용하는 attribute이다. href 입력시 각각의 페이지가 같은 폴더에 있다면 relative path로 대체해서 사용이 가능하다. (href="./name.html)
id
: div와 함께 사용하여 구역별 정보를 제공하는 용도로 사용한다. a tag와 함께 사용하면 같은 화면에서 원하는 단락으로 이동할 수 있다. (href="#id")
target
: link로 연결된 웹브라우저를 어떤 형태로 열 것인지 정의한다.
(새탭 혹은 새창으로 열기: *_balnk : 새창으로 열기)
<html>
<head>
<title>Brown Bears</title>
</head>
<body>
<ul>
<li>
<a href="#introduction">Introduction</a>
</li>
</ul>
<a href="./index.html" target="_blank">
<img src="https://en.wikipedia.org/wiki/Brown_bear" />
</a>
<a href="./aboutme.html">About Me</a>
<h1>The Brown Bear</h1>
<div id="introduction">
<h2>About Brown Bears</h2>
<p>
The brown bear (<em>Ursus arctos</em>) is native to parts of northern
Eurasia and North America. Its conservation status is currently
<strong>Least Concern</strong>.<br /><br />
There are many subspecies within the brown bear species, including the
Atlas bear and the Himalayan brown bear.
</p>
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank"
>Learn More</a
>
</div>
</body>
</html>
출처: Codecademy, MDN