10 제대로 활용되지 않거나 잘못 이해되는 HTML 태그_HTML/Xhtml_웹 디자인

활용률이 낮거나 잘못 이해되는 HTML 태그 10개는 다음과 같습니다. 널리 알려지지 않았을 수도 있지만 특정 상황에서는 매우 유용할 수 있습니다.
웹 개발자는 종종 여러 언어를 알고 마스터하고 싶어하기 때문에 언어의 모든 내용을 배우는 것이 까다로울 수 있지만 특별하지만 유용한 태그를 최대한 활용하지 못하고 있다는 것을 쉽게 알 수 있습니다. .
번역 출처: TutsPlus
안타깝게도 우리는 아직 이러한 모호한 HTML 태그의 잠재력을 최대한 활용하지 못했습니다. 그러나 해당 분야에 다시 진입하고 아직 개발되지 않은 라벨의 힘을 활용하기 위한 코드 작성을 시작하는 것은 결코 늦지 않습니다.
다음은 충분히 활용되지 않거나 잘못 이해되는 HTML 태그 10개입니다. 널리 알려지지 않았을 수도 있지만 특정 상황에서는 매우 유용할 수 있습니다.
1.

태그는 다들 익숙하실 것 같은데,

의 남동생 을 아시나요? 을 사용하면 요소 내의 텍스트를 참조로 정의할 수 있습니다. 일반적으로 브라우저는 태그 내의 텍스트를 기울임꼴로 표시하지만 약간의 CSS를 사용하여 변경할 수 있습니다.
태그는 디렉터리나 다른 웹사이트에서 참고 자료를 인용하는 데 유용합니다. 다음은 단락에서 cite 태그를 사용하는 예입니다.
David Allen의 획기적인 정리서 Get Your Work Done은 잊어버리게 만듭니다. 2.
태그는 선택 태그 내에서 옵션 그룹을 정의하는 좋은 방법입니다. 예를 들어, 영화 목록을 시간별로 그룹화해야 한다면 다음과 같이 할 수 있습니다.
1 2
레이블 for="상영 시간">상영 시간/ 라벨> 선택 ID="상영시간" 이름= "상영 시간"> 선택 그룹 레이블="One PM">/ optgroup> 옵션 값="타이타닉">타이타닉/옵션> 옵션 값= "nd">슬럼독 밀리어네어/옵션> 옵션 값="wab">슈렉/옵션> optgroup label="오후 2시">/optgroup > 옵션 값="bkrw">라이온킹/옵션> 옵션 값="stf" > 모두를 위한 슈퍼맨/옵션> /선택>
데모:
출시 시간 타이타닉 슬럼독 밀리어네어 슈렉 라이온 킹 모두를 위한 슈퍼맨

영화 목록을 시각적으로 구분할 수 있습니다. 3.
은 일련의 단어에 대해 더 자세히 정의하거나 설명하는 방법입니다. 태그를 사용하여 텍스트 위에 마우스를 올리면 제목 태그의 내용을 보여주는 상자가 아래에 나타납니다. 예를 들어:
1
마이크로 블로그 사이트약어 제목="2006년 설립"> Twitter/acronym>이 요즘 많이 다운됐어요.
예:
마이크로 블로그 웹사이트 트위터가 최근 자주 다운되었습니다. 4.

태그는 눈에 띄지 않는 작은 태그이지만 그렇다고 쓸모가 없다는 의미는 아닙니다. 이름에서 알 수 있듯이

을 사용하면 HTML에서 태그를 의미화할 수 있습니다. 이 컴팩트 태그는 기본적으로 태그 내의 내용을 기울임꼴로 표시합니다. 물론 기본 스타일은 스타일을 사용하여 쉽게 변경할 수 있습니다.
1 2 3 4
주소>글렌 스탠스베리 1234 웹개발레인 미국 어디든 /주소> 5. 및
태그를 사용하여 편집된 버전을 표시하려면 및 이 적합합니다. 이름에서 알 수 있듯이 는 추가된 내용을 밑줄로 강조 표시하고, 은 삭제된 내용을 취소선으로 표시합니다.
1
John del>좋아요/del> 인 >그의 새로운 iPod은/인>좋아합니다.
예:
누구나 좋아요 버려진 Zblog. 6.
양식 요소는 텍스트를 표시할 때 잊어버리기 가장 쉬운 것 같습니다. 양식 요소의 경우 가장 일반적으로 잊혀지는 것은 태그입니다. 이는 텍스트를 마크업하는 편리한 방법일 뿐만 아니라 태그에 "for" 속성을 전달하여 연결할 요소를 지정할 수도 있습니다. 스타일로 쉽게 제어할 수 있을 뿐만 아니라 제목을 클릭 가능하게 만들 수도 있습니다.
1 2
레이블 for="사용자 이름">사용자 이름/라벨> 입력 ID="사용자 이름" 유형= "텍스트" /> 7.

Fieldset는 양식 요소에 논리적 그룹을 추가하는 데 사용할 수 있는 작은 태그입니다.

태그는 그 안에 있는 요소 주위에 상자를 그립니다. 또 다른 점은 필드 세트에 태그를 추가하여 그룹 제목을 정의할 수 있다는 것입니다.
1 2 3 4 5 6 7
양식>필드세트> 전설>당신은 5학년 학생보다 똑똑합니까? /전설> 당연하죠입력 이름="예" 유형="라디오" 값="예" /> 모른다입력 이름="아니오" 유형="라디오" 값="아니요" /> /필드세트> /양식>
예: 8.
태그는 태그와 매우 유사하지만 태그는 약어를 정의하는 데만 사용됩니다. 과 마찬가지로 이 태그에 대한 제목 속성을 정의할 수 있습니다. 사용자가 약어 텍스트 위에 마우스를 올리면 전체 내용이 아래에 표시됩니다. 태그는 거의 사용되지 않지만 화면 판독기, 맞춤법 검사기 및 검색 엔진에 매우 유용합니다.
1
abbr title="Brainless">NC/abbr>은 미개한 용어입니다.
예:
은 미개한 용어입니다. 은 미개한 용어입니다. 9. 친척
Rel은 매우 유용한 속성이 될 수 있으며, 모든 HTML 요소에는 rel 속성이 적용될 수 있습니다. 달리 지정되지 않은 추가 매개변수를 전달하는 데 도움이 됩니다. 이는 HTML에서 JavaScript를 사용할 때 매우 유용합니다. 인라인으로 편집하려는 링크가 있는 경우 다음을 추가할 수 있습니다.
1
a rel="클릭 가능" href= "page.html">이 링크는 편집 가능합니다. /아>
Javascript는 rel 속성이 "clickable"인 링크를 찾고 일부 Ajax를 적용하여 인라인 편집이 가능하도록 합니다. 이는 잠재력이 무한하므로 rel 속성을 사용할 수 있는 많은 기술 중 하나일 뿐입니다. 관심 있는 친구들은 W3C의 Rel 소개를 자세히 공부할 수 있습니다. 10.
태그는 믿을 수 없을 정도로 알려지지 않은 태그입니다. 솔직히 이 라벨은 거의 사용되지 않기 때문에 여러분이 이 라벨을 접할 수 있을지 의문입니다. (사실 이 글을 쓰기 전에는 이 라벨을 거의 본 적이 없었습니다.) 실제로 이 라벨은 소프트 라인 브레이크(soft line break)로, 특정 라인 내에서 라인 브레이크 포인트를 지정할 수 있도록 하여 이 지점에서 라인이 끊어질 수 있지만 라인 브레이크가 반드시 발생하는 것은 아니며 라인만 끊어질 수 있음을 나타냅니다. 선을 끊을 필요가 있을 때 부서지십시오. 수평 스크롤바를 피하고 싶다면 이 태그를 사용하는 것이 좋습니다.
예:
아래는 오버플로가 정의되지 않은 200픽셀 너비의 상자입니다. NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr
HavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbrHavaWbr
태그를 사용하지 않고 동일한 효과를 얻으려면 이 태그를 사용하거나 를 시도해 보세요. 이 세 가지 태그 중 어느 것도 모든 브라우저에서 완벽하게 지원되지 않는다고 합니다. 이 문서를 사용하여 세 가지 태그에 대한 각 브라우저의 지원을 확인할 수 있습니다.
PS: 이 기사를 번역하는 것은 상당히 어려웠습니다. Shenfei는 의미론의 매력과 HTML 태그의 힘을 깊이 느꼈습니다. 결과적으로 우리가 인식하지 못한 태그가 많이 있다고 생각합니다. 누구나 사용하지 않는 익숙하고 흔하지 않은 태그. 이전 기사에서 설명했듯이 "의미론"의 큰 부분은 div를 사용하는 대신 올바른 위치에 올바른 태그를 사용하는 것입니다. 더 많은 HTML 태그를 이해할 수 있다면 더 의미 있는 HTML 코드를 작성할 수 있으며, 이는 CSS 작성의 어려움과 작업량을 크게 줄이고 페이지 구조를 더욱 합리적으로 만들 수 있습니다.