| English | 의미 |
|---|---|
| HTML/ˌeɪtʃ tiː em ˈel/ | HTML |
| attribute/ˈætrɪbjuːt/ | 속성 |
| element/ˈelɪmənt/ | 요소 |
| semantic elements/səˈmæntɪk ˈelɪmənts/ | 의미화 요소 |
링크처럼 보이지만 Tab 단추에서는 건너뛰어짐
- “가입”이라고 표시된 스타일링된 사각형이 자동으로 작동하는 링크가 되는 것은 아닙니다. 목적지를 가진 실제 앵커는 스타일링만으로는 제공되지 않는 브라우저 동작을 가집니다.
- HTML은 콘텐츠 구조와 의미를 제공합니다. CSS는 표현을 제어하며, 의미 있는 HTML을 선택하는 것은 키보드 및 보조 기술 사용에도 기여합니다.
페이지 제목에 실제 제목 요소를 사용하는 이유는 무엇입니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
제목은 문서 구조를 설명하며, 외관은 CSS를 통해 제어할 수 있습니다.
태그와 속성을 읽기
- 요소는 보통 시작 태그, 콘텐츠, 끝 태그를 포함합니다:
<p>Meet on Thursday.</p>. 속성은 시작 태그에 정보를 제공합니다:<a href="join.html">Join</a>. img와 같은 HTML 비공유 요소는 끝 태그나 자식 콘텐츠가 없습니다. 스스로 ‘닫히지’ 않으며, HTML에서 trailing slash(마지막 슬래시)는 불필요합니다. 짝 지워진 태그는 교차하지 않게 중첩하십시오.
어떤 속성이 앵커의 내비게이션 목적지를 지정합니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
How to join와 같은 앵커는 href를 사용합니다.
목적에 따라 페이지 영역 표시하기
- 의미론적 요소로는 주요 네비게이션용
nav와 페이지의 주요 콘텐츠용main가 포함됩니다. 섹션을 설명하기 위해 제목을 사용하고, 더 구체적인 요소가 맞지 않을 때 일반적인 그룹화용div를 사용하십시오. a로 생성된 내비게이션을href가 탐색하고,button가 동작을 수행합니다. 의미론적 마크업이 도움이 되지만, 레이블, 동작 및 포커스는 여전히 테스트해야 합니다.
다음 HTML 요소들이 가진 구체적인 의미는 무엇입니까? 모든 해당하는 것을 선택하십시오.
난이도 2/5 · 140 코인 + 오늘 첫 완료 시 소액 보너스
div는 범용입니다. 정의된 용도가 적합할 때는 더 구체적인 요소를 사용하십시오.
목적에 맞는 적절한 네이티브 요소를 매칭하십시오.
난이도 2/5 · 140 코인 + 오늘 첫 완료 시 소액 보너스
네이티브 요소는 의미와 기본 동작을 제공하지만, 여전히 사용 가능한 레이블과 테스트가 필요합니다.
작은 완전한 페이지 만들기
- 将此示例保存为
index.html，旁边放一个真实的join.html。在浏览器中打开它，并使用 Tab 和 Enter 键跟随链接。 lang는 페이지 언어를 식별하고,title는 브라우저 탭의 이름을 지정합니다. 뷰포트 설정은 반응형 스타일이 장치 너비를 사용할 수 있게 합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Robotics club</title>
</head>
<body>
<nav aria-label="Main"><a href="join.html">How to join</a></nav>
<main>
<h1>Robotics club</h1>
<p>Meet Thursday at 4 pm in room 12.</p>
</main>
</body>
</html>
<a href="join.html">How to join</a>는 목적지와 유용한 레이블을 결합합니다. <div class="link">Click here</div>는 내비게이션이나 목적지를 제공하지 않습니다.
이미지의 용도에 따라 대안 선택하기
- 정보 전달용 이미지에는 관련 의미를 전달하는 대안이 필요합니다. 순수 장식용 이미지는 일반적으로
alt=""를 사용하여 보조 기술이 건너뛰도록 합니다. - 링크로 사용되는 이미지인 경우, 다른 방식으로 제공되지 않는则该 링크의 기능을 설명해야 합니다. 복잡한 차트도 중요한 데이터를 텍스트로 설명해야 합니다.
단순히 텍스트 크기를 늘리기 위해 제목을 사용하거나, 모든 대안에 '이미지'라는 단어를 반복해서는 안 됩니다. 또한 장식용 이미지에 긴 설명을 붙여 페이지 흐름을 끊어서는 안 됩니다.
alt="image"은 정보성 차트에 유용한 대체 텍스트입니다.
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
대체 텍스트는 관련 정보를 전달해야 합니다. 복잡한 차트는 중요한 데이터도 텍스트로 포함해야 합니다.
클럽 뉴스 기사가 학교 마당에서 학생들이 나무를 심는 사진을 사용하여 보여줍니다. 유용한 alt 텍스트를 작성하십시오.
난이도 3/5 · 200 코인 + 오늘 첫 완료 시 소액 보너스
예시: “학교 마당에서 나무를 심는 학생들.” 제공되지 않은 수치는 추가하지 마십시오.
제목 옆에 있는 작은 장식이 정보를 추가하지 않습니다. 어떤 이미지 대체 텍스트가 일반적으로 적합합니까?
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
빈 대체 텍스트는 보조 기술이 순수 장식용 이미지를 건너뛰도록 합니다.
구조와 동작 확인하기
- 제목 순서, 유의미한 링크 레이블, 키보드 사용 및 이미지 대안을 확인하세요. HTML 검증 도구는 마크업 오류를 감지할 수 있지만, 작성한 문구가 유용한지 판단할 수는 없습니다.
- 스타일을 끄고도 미팅 페이지를 사용할 수 있도록 하세요. 그 다음 제목을 외관만 위한 단축어로 변형시키지 않고 콘텐츠를 스타일링하세요.
용도에 맞는 HTML을 택하세요. 내비게이션 링크와 버튼을 사용하고, 유효한 중첩과 이미지의 역할에 맞는 대안을 적용하세요.
출처: HTML 구문 및 W3C 장식용 이미지.
HTML에서 img는 비공요소(void element)이며, 종단 태그(end tag)가 없어야 합니다.
난이도 1/5 · 100 코인 + 오늘 첫 완료 시 소액 보너스
비공요소는 자식 콘텐츠나 종단 태그를 가지지 않습니다.HOST trailing slash(후행 슬래시)는 불필요하며, 이는 HTML 요소에 self-closing(자신만 닫는) 동작을 부여하지 않습니다.