개발자 도구 · HTML WYSIWYG 편집기
Strong vs b 및 em vs i: 편집자에게 시맨틱 인라인 HTML이 중요한 이유
· 그것이 중요한 이유
HTML 접근성 내용 편집 가능
의미론적 인라인 요소와 표현형 인라인 요소 간의 실질적인 차이점, 보조 기술 및 검색 엔진이 이를 사용하여 수행하는 작업, 편집기에서 내보내는 내용을 확인하는 방법을 설명합니다.
굵은 글씨가 항상 중요한 것은 아닙니다. 표시되기 전에 의미를 선택하세요.
제품 코드는 독자가 빠르게 찾을 수 있도록 굵게 표시할 수 있습니다. 경고는 그 중요성이 문장의 의미에 속하기 때문에 강력할 수 있습니다. 이 두 가지 의도는 기본 스타일시트에서 유사하게 보일 수 있습니다. 모양만 선택하면 CSS가 변경되거나 다른 독자가 구조를 사용할 때 마크업이 모호해집니다.
ToolAcre의 도구 모음은 해당 작업에 굵게 및 기울임꼴로 레이블을 지정하는 반면, 새니타이저는 기존 b 및 i 요소를 Strong 및 em으로 정규화합니다. 이는 강조된 산문에 유용한 기본값이지만, 편집자는 선택한 단어가 장식보다는 진정으로 중요성이나 강세를 전달하는지 여부를 결정해야 합니다.
오늘날 HTML 사양에 나와 있는 내용 — Strong, em, b 및 i의 현재 의미를 요약합니다.
강함은 매우 중요함, 심각성 또는 긴급성을 나타냅니다. em은 배치가 해석에 영향을 미칠 수 있는 강세 강조를 나타냅니다. b 요소는 중요성을 추가하지 않고도 주의를 끌 수 있는 반면 i는 강조를 주장하지 않고 용어, 음성 또는 관례와 같은 주변 산문과의 텍스트 오프셋을 표시할 수 있습니다.
실용적인 교훈은 두 개의 태그가 금지된다는 것이 아닙니다. 시각적 동일성이 의미적 차이를 없애지는 않는다는 것입니다. ToolAcre의 좁은 출력은 강력함과 em을 선택하므로 단순히 스타일 오프셋이 필요한 콘텐츠는 검토가 필요할 수도 있고 고안된 도구 모음 기능이 아닌 다른 대상 워크플로가 필요할 수도 있습니다.
보조 기술은 의미를 다르게 노출할 수 있습니다. 이 저장소는 발표가 없음을 증명합니다
보조 기술은 요소 의미 체계를 사용할 수 있지만 정확한 음성 처리는 제품, 모드 및 사용자 구성에 따라 다릅니다. 저장소에는 화면 판독기 호환성 제품군이 포함되어 있지 않으므로 이 문서에서는 Strong이 항상 특정 음성으로 발표되거나 b가 항상 침묵할 것이라고 약속하지 않습니다.
구조는 스타일이 지정된 범위에 부족한 소프트웨어 정보를 제공하므로 여전히 중요합니다. 지원 정책의 보조 기술을 사용하여 대표 페이지를 테스트하세요. 의미론적 요소는 의미 있는 해석의 기회를 만듭니다. 모든 환경에서 하나의 보편적인 가청 효과를 보장하지는 않습니다.
검색 효과는 이 편집자의 증거를 벗어납니다. 의미론은 여전히 문서 구조를 개선합니다.
검색 엔진은 문서 구조를 구문 분석할 수 있지만 b를 Strong으로 교체하여 순위가 변경되었음을 입증하는 로컬 소스는 없습니다. 의미론적 HTML을 SEO 공식으로 바꾸지 마세요. 검색 가시성은 콘텐츠, 링크, 기술적 접근성 및 이 편집기 외부의 많은 시스템에 따라 달라집니다.
의미론을 사용하는 방어적인 이유는 명확성과 상호 운용성입니다. 작성자, 브라우저 및 다운스트림 변환은 스타일 선언을 리버스 엔지니어링하지 않고도 의도한 중요성이나 강조점을 식별할 수 있습니다. 모든 검색 결과는 관련 플랫폼의 증거로만 설명되어야 하며 로컬 형식 지정 버튼에서 추론되어서는 안 됩니다.
실제 목록인 목록 — 대시 및 수동 번호 지정에 비해 인수를 <ul> 및 <ol>로 확장합니다.
동일한 원칙이 목록에도 적용됩니다. 하이픈으로 시작하는 세 줄은 일반 텍스트이고, ul과 li는 피어 항목 모음을 나타냅니다. 단락 앞에 입력된 숫자 문자는 순서와 선택적 시작 값이 구조의 일부인 ol과 동일하지 않습니다.
ToolAcre는 글머리 기호 및 번호가 매겨진 목록 명령을 노출하고 해당 필터를 통해 ul, ol 및 li를 허용합니다. 브라우저 명령 동작은 특히 중첩의 경우 다양할 수 있으므로 목록을 작성한 후 소스를 검사하십시오. 올바른 목록 의미론은 누락된 레이블, 혼란스러운 순서 또는 대상의 지원되지 않는 깊이를 변명하지 않습니다.
작동 예: ToolAcre는 필터링 중에 b를 Strong으로 매핑하고 i를 em으로 매핑합니다.
"스키마를 변경하기 전에 배포 중지"를 입력하고 "배포 중지"를 선택한 후 굵게 누릅니다. 브라우저 명령은 처음에 b를 생성할 수 있지만 새니타이저의 앨리어스 맵은 강한 신호를 방출합니다. 기울임꼴은 i에서 em까지 동일한 패턴을 따릅니다. 소스 모드에서는 정규화된 결과를 보여줍니다.
이제 시각적으로만 강조표시되는 제품 라벨을 선택하세요. ToolAcre에는 b 전용 또는 클래스 기반 주의 제어 기능이 없으며 마크는 도구 모음 청구가 아닌 직접 소스 편집을 통해서만 허용 목록에 추가됩니다. 강한 것이 정확한지 결정하십시오. 그렇지 않은 경우 이 제한된 작업 흐름 외부에서 대상별 스타일을 사용하세요.
여기서 다루지 않는 내용 — 별도로 다루는 ARIA 속성, 전체 접근성 감사 또는 제목 구조
이 문서에서는 ARIA, 전체 접근성 감사, 제목 계층 구조 또는 정확한 검색 엔진 동작을 다루지 않습니다. 또한 허용 목록에 있는 모든 인라인 요소에 도구 모음 컨트롤이 있다고 주장하지도 않습니다. 소스 모드는 유효한 경우 u, s, sub, sup, mark, small, code, kbd, samp, var 및 abbr을 유지할 수 있지만 시각적 명령은 더 적은 선택 사항을 제공합니다.
시맨틱 태그 필터링은 게시를 위해 임의의 적대적인 HTML을 삭제하지 않습니다. ToolAcre의 토크나이저에는 명시적인 파서 차등 제한이 있습니다. 신뢰할 수 없는 제출을 렌더링하는 서버에는 적절한 파서 기반 새니타이저와 정책이 필요하며, 접근성 검토는 이 격리된 미리 보기보다는 최종 대상을 검사해야 합니다.
요약: 의미 형식을 확인한 후 확인 — 습관을 요약하고 ToolAcre의 HTML WYSIWYG 편집기가 생성된 정확한 요소를 노출하는 방법을 설명합니다.
의미 형식을 확인한 다음 검사하세요. Strong과 em은 산문이 진정으로 중요성과 강조점을 담고 있을 때 가치가 있습니다. 모든 굵은 글씨나 이탤릭체 시각적 개체를 대체할 수 있는 보편적인 것은 아닙니다. ToolAcre는 각 작업 후에 필터링된 HTML을 노출하여 선택 사항을 표시합니다.
초안 작성에는 시각적 컨트롤, 확인에는 소스 모드, 모양에는 대상 CSS를 사용합니다. 원하는 표현에 정확한 의미적 요소가 없을 때 단지 디자인과 유사하다는 이유로 오해의 소지가 있는 태그를 강요하지 마십시오. 작가의 의도를 표현할 수 있는 시스템으로 보존하세요.