유행은 아니지만 중요한 HTML 태그.
웹 전단에서 일하는 개발자에게 양식이나 스크립트/DOM 조작을 깊이 연구하기 전에 최소한 기본적으로 알아야 할 첫 번째 언어입니다.
이 글에서 저는 HTML 태그를 중점적으로 소개할 것입니다. 이런 태그는 많은 웹 개발자들이 사용하지 않습니다. 만약에 이런 태그를 사용하면 웹 프로젝트의 재미를 높일 뿐만 아니라 그들의 S.E.O(검색엔진 최적화) 성능도 향상시킬 수 있습니다.
명단에는 구체적인 순서가 없다.
문서 라이브러리 URL 요소 - <Base>
HTML
<base>
요소는 HTML 문서의 모든 관련 URL에 사용되는 기본 URL을 정의합니다.하나의 기본 요소만 있을 수 있으며, 여러 개의 기본 요소를 성명하면 첫 번째 기본 요소만 따르고 나머지는 무시됩니다.요소는 href와 target 속성을 포함하고 href는 전체 문서에 사용되는 기본 URL을 저장합니다. target 속성은
<a>
(anchor) 요소와 마찬가지로 _self
,_blank
,_parent
와 _top
가 정의한 <a>
,<area>
또는 <form>
요소의 기본 탐색 상하문은 명확한 목표 속성이 없습니다.예:
<base href="https://www.neglected-tags.com/" target="_blank"></base>
<!-- Declaring only the global browsing context for <a>, <area> and <form> elements -->
<base target="_top"></base>
참고: Open graph 태그는 기본 요소를 확인하지 않으므로 항상 완전한 절대 URL을 포함해야 합니다.연락처 주소 요소 - <주소>
HTML
<address>
은 의미 HTML 태그 중 하나로 초점에 있는 HTML 문서가 개인이나 개인 또는 조직의 연락처를 제공하는 것을 나타낸다.이것은 페이지 맨 위의 기업 연락처일 수도 있고
<article>
요소 중의 글쓴이 정보일 수도 있다.주소 정보는 필요한 모든 유형의 연락처 데이터를 포함하여 상기 상하문에 적합한 모든 형식을 사용할 수 있다.이러한 정보는 URL, 이메일 주소, 물리적 주소, 전화 번호, 소셜 미디어 핸들, 지리 좌표 등이 될 수 있다.
반드시 포함해야 하는 가장 중요한 정보는 주소가 속하거나 가리키는 개인이나 개인 또는 조직의 이름이다.
예:
<address>
Organization Name: The Neglected Tags <br>
Web Site:
<a href="https://www.neglected-tags.com/">www.neglected-tags.com</a><br>
visit us: Abandoned Hills<br>
Ground Floor,
Many Trees
</address>
주요 요소-<Main>
HTML
<main>
요소는 HTML5 사양의 블록 레벨 요소로서 HTML 문서<body>
의 주요 컨텐트에 중점을 두는 데 도움이 됩니다.주요 컨텐트 영역은 문서의 중심 주제 또는 응용 프로그램의 중심 기능과 직접 관련되거나 확장된 컨텐트로 구성됩니다.요소의 컨텐트는 문서에 고유하며 HTML 문서에는 숨겨지지 않은 요소가 하나
<main>
만 있는 것이 좋습니다.main 요소는 매우 중요하다. 왜냐하면 accessibility Landmarks와 skip navigation가 페이지의 주요 내용을 쉽게 식별하고 더 빨리 접근할 수 있도록 도와주기 때문이다.
<main>
요소도 브라우저 리더 모드에서 내용을 특정 리더 보기로 변환할 때 사용하는 요소 중 하나입니다.예:
<html>
<head>
<title>The Neglected</title>
</head>
<body>
<main>
<h1>The Neglected HTML Tags</h1>
<p>
We are actually a group of highly usefull HTML tags.
</p>
<article>
<h2>Main</h2>
<p>... </p>
</article>
<article>
<h2>Address</h2>
<p>... </p>
</article>
</main>
</body>
</html>
설명 목록 요소 - <main>
html
<dl>
요소는 하나의 설명 목록을 정의했는데 그 중에서 하나의 용어<dl>
와 각자의 설명<dt>
을 포함한다.예:
<html>
<head>
<title>List of negected HTML tags</title>
</head>
<body>
<dl>
<dt>Base</dt>
<dd>The base url to be used for all relative URLs in a HTML document.</dd>
<dt>Address </dt>
<dd>Indicates the contact information of a person or people or organization.</dd>
<dt>Main</dt>
<dd>A block-level element that indicate the dominant content of the body of a HTML document</dd>
</dl>
</body>
</html>
세부 공개 요소-<dd>
HTML
<details>
요소는 열린 상태로 전환할 때 표시되는 공개 위젯을 만듭니다.<details>
디테일 요소에 이 요소는 디스클로즈에 설명 탭을 제공한 다음, 전환할 때 내용을 표시하고, 그렇지 않으면 설정하지 않았을 때 텍스트 '디테일' 을 표시합니다. 이것은 비정보적입니다.열기 등록 정보를 설정하면 공개 컨텐트가 페이지에 표시되고 그렇지 않으면 전환 이벤트가 전송될 때까지 컨텐트가 숨겨집니다.
예:
<details>
<summary>Main</summary>
This is the time that I the main element choose to vent my anger.
</details>
<!-- open state -->
<details open>
<summary>Address</summary>
Hey main, where should I address your anger to.
</details>
참고: Internet Explorer에서는 이 요소를 지원하지 않습니다.대화 상자 요소 - <summary>
HTML
<summary
요소는 활성 브라우저 창에 나타나는 경고 해제, 팝업 창 또는 모드 창과 같은 대화 상자나 다른 상호 작용을 만드는 데 사용됩니다.이 요소에는 오픈 속성이 있습니다. 이 속성을 설정할 때 대화상자를 사용자에게 보여야 합니다. 그렇지 않으면 숨겨진 상태를 유지해야 합니다.
예:
<dialog>
<h2> Wrath of the neglected tags!!! </h2>
<button id="close-dialog">Close Dialog</button>
</dialog>
<button id="show-dialog">Click Here!</button>
<script>
var dialog = document.querySelector('dialog');
document.querySelector('#show-dialog').onclick = () => { dialog.show(); };
document.querySelector('#close-dialog').onclick = () => { dialog.close(); }; </script>
주의:tabindex 속성은 <dialog>
요소에 사용할 수 없습니다.저는 이 모든 html 요소를 이 글에 넣을 수 없기 때문에 아래에 다른 내용을 추가하여 영예롭게 추천합니다.
명예 후보:
<dialog>
<dialog>
<aside>
<bdi>
<cite>
<progress>
계속, 네트워크에 표시.
Reference
이 문제에 관하여(유행은 아니지만 중요한 HTML 태그.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/xinnks/less-popular-but-essential-html-tags-38i0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)