HTML 문서는 소위 태그라고 불리는 요소로 구성됩니다. 태그는 꺾쇠 괄호로 인식할 수 있습니다. 거의 모든 HTML 요소에는 도입 태그와 종료 태그가 있습니다. 그 사이에 있는 것을 범위라고 합니다.
예를 들어 보겠습니다:
<h1>PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1>
이 구문은 문서에서 첫 번째 순서 제목을 작성하는 데 사용됩니다. 도입부 <h1> 태그는 브라우저에 이러한 제목임을 알려줍니다. 닫는 <h1> 태그는 제목을 끝냅니다. 닫는 태그는 여는 꺾쇠 괄호 뒤에 슬래시 </>로 인식할 수 있습니다.
요소 이름의 철자에 관한 질문이 있습니다: 실제로 대문자와 소문자를 어떻게 구분할 수 있을까요? 이미 설명했듯이 이 시리즈의 초점은 HTML5에 있습니다. 여기에서는 실제로 대문자와 소문자 중에서 선택할 수 있습니다. 하지만 개인적으로 저는 소문자를 일관되게 사용하는 것을 선호하며 이 시리즈에서도 계속 그렇게 할 것입니다. HTML5에 따르면 원칙적으로 다음과 같은 것이 맞습니다:
<h1>PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1> <H1>PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1> <H1>PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1> <h1>PSD-Tutorials.de - 귀하의 그래픽, 웹 및 학습 포털</h1>
연 요소는 다시 닫아야 합니다. 따라서 <h1>을 설정한 경우 제목 정의 <h1>이 끝난 후에도 다시 닫아야 합니다. HTML5에서는 목록 항목 및 단락과 같은 예외가 있지만 이에 대해서는 나중에 자세히 설명합니다.
HTML에는 소위 독립형 태그도 있습니다. 이러한 태그는 시작 태그와 끝 태그가 아닌 하나의 태그로만 구성됩니다. 대표적인 예가 <br /> 입니다.
이것은 한 줄입니다.<br /> 이것은 또 다른 줄입니다.
이 <br />은 줄 바꿈을 정의합니다.
이러한 빈 태그는 HTML5에서 반드시 필요하지 않더라도 일반적으로 슬래시로 닫힙니다. 여기에서도 다음과 같이 사용할 수 있습니다:
<br>
이 시리즈를 진행하면서 이러한 독립형 태그에 대해 더 많이 알게 될 것입니다.
요소 중첩
HTML 요소도 중첩할 수 있습니다. 제목 내의 구절을 이탤릭체로 표시하고 싶다고 가정해 보겠습니다. i 요소는 이탤릭체로 사용됩니다.
<h1>PSD-Tutorials.de - <i>그래픽, 웹 및 학습 포털</i></h1>
중첩할 때 올바른 순서에 주의하세요. 마지막으로 닫을 요소는 먼저 열린 요소입니다. 이 경우 h1 요소입니다.
속성 사용
열기 태그 또는 독립형 태그 내에서 소위 속성을 정의할 수 있습니다. 이러한 속성은 요소에 추가 속성을 할당할 수 있습니다. 이전 HTML 시대에는 요소에 비교적 많은 수의 속성이 할당되었습니다. 이는 단순히 구조와 디자인이 혼동되었기 때문이었습니다. 예를 들어, 색상 정의는 해당 속성을 통해 HTML 요소로 직접 전송되었습니다. 그 동안 디자인과 구조의 엄격한 분리가 가능해진 것은 물론 CSS 덕분이며, 이를 준수해야 합니다. 그 결과 여전히 사용되는 속성은 비교적 적습니다.
한 가지 중요한 속성은 ID입니다. 이 속성은 HTML 요소에 고유한 이름을 할당하는 데 사용할 수 있으며, 예를 들어 CSS 또는 JavaScript를 통해 주소를 지정하는 데 사용할 수 있습니다.
<h1 id="head">PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1>
속성을 지정하려면 h1 뒤에 공백을 삽입합니다. 그 뒤에 일반적으로 소문자로 작성되는 속성 이름을 입력합니다. 속성 이름 뒤에는 등호 기호를 넣습니다. 그런 다음 속성 값을 반전 쉼표 안에 넣습니다.
또한 요소에 여러 개의 속성을 할당할 수도 있습니다. 예를 들어, 요소에 소위 클래스와 ID를 정의하는 것은 매우 일반적입니다. 다음은 또 다른 예입니다: 제목은 ID를 통해 고유하게 식별됩니다. 반면 클래스는 제목을 분류하는 데 사용됩니다. 이러한 방식으로 파란색 클래스가 할당된 모든 요소가 파란색으로 표시되도록 지정할 수 있습니다. (물론 이 CSS 및 색상 주제에 대한 자세한 내용은 나중에 설명합니다).
<h1 id="head" class="blue">PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1>
이 경우 속성은 공백으로 구분됩니다.
코드 유효성 검사
이제 몇 가지 기본 구문 규칙을 배웠습니다. 특히 HTML을 처음 배울 때는 이러한 규칙을 잘 지키는 것이 중요합니다. 한 번 잘못된 습관을 들이면 머릿속에서 벗어나기 어렵습니다. 따라서 항상 HTML 코드가 올바른지 확인하거나 유효성 검사를 받아야 합니다. 물론 이 작업을 직접 할 필요는 없습니다. 이를 위한 적절한 온라인 도구가 있습니다. 예를 들어 http://validator.w3.org/ 에서 소위 유효성 검사기를 찾을 수 있습니다.
직접 입력으로 유효성 검사 탭으로 바로 전환하는 것이 가장 좋습니다. 여기에서 확인할 HTML 코드를 직접 복사하여 붙여넣을 수 있습니다. DOCTYPE 사양을 포함하여 파일의 전체 코드를 삽입해야 합니다.
유효성 검사기를 테스트하려면 다음을 텍스트 필드에 붙여넣고 유효성 검사 버튼을 클릭합니다.
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> <h1>PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1> </body> </html>
결과는 다음과 같아야 합니다:
이제 모든 것이 정상입니다. (이 경우 두 개의 경고에 대해 걱정할 필요가 없습니다). 이 문서는 HTML5로 성공적으로 검사되었습니다! 라는 메시지가 표시되면 모든 것이 정상입니다. 하지만 오류가 발생하면 어떻게 될까요? 구문에 일부러 오류를 삽입하면 됩니다.
<h1 id=head">PSD-Tutorials.de - 그래픽, 웹 및 학습 포털</h1>
여기서 head의 도입부 쉼표가 잊혀졌습니다. 이제 구문의 유효성을 다시 검사하면 오류가 인식됩니다.
그러면 유효성 검사기가 해당 메시지를 표시합니다. 창의 아래쪽 섹션에서 정확히 무엇이 잘못되었는지 확인할 수 있습니다.
여기에도 오류가 명확하게 설명되어 있습니다.
8번째 줄, 12번째 열: 인용되지 않은 속성 값에 "가 있습니다. 가능한 원인: 함께 실행되는 속성 또는 따옴표로 묶지 않은 속성 값에 URL 쿼리 문자열이 있습니다.
<h1 id=head" >PSD-Tutorials.de</h1>
따라서 어느 줄에 잘못된 입력이 있었는지 직접 확인하고 수정할 수 있습니다. 따라서 유효성 검사기는 깔끔한 HTML 코드를 작성하는 데 도움이 됩니다. 항상 코드의 유효성을 검사해야 합니다. 브라우저는 구문이 잘못된 경우에도 HTML 코드를 올바르게 표시하는 경우가 많기 때문입니다. 그러나 페이지를 테스트하지 않는 다른 브라우저에서는 완전히 다르게 보일 수 있습니다.
