21 HTML Tips You Must Know About(무조건 알아야 하는 21개의 HTML 팁)

💡 원본글: https://dev.to/devshefali/21-html-tips-you-must-know-about-55j7

21 HTML Tips You Must Know About

이 게시물에서는 코딩 기술을 향상시킬 수 있는 코드 조각과 함께 21가지 HTML 팁을 공유하겠습니다.

그럼 바로 뛰어들어가 볼까요.🚀

연락처 링크 만들기

HTML을 사용하여 클릭이 가능한 이메일, 전화 통화 및 SMS 링크를 만들수 있습니다.

<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>

<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>

<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>

접을(Collapse)수 있는 콘텐츠 만들기

웹페이지에서 접을 수 있는 콘텐츠를 포함하려는 경우 <details> 및 <summary> 태그를 사용할 수 있습니다.

<details> 태그는 숨겨진 콘텐츠에 대한 컨테이너를 생성하는 반면, <summary> 는 해당 콘텐츠의 표시 여부를 전환할 수 있는 클릭 가능한 라벨을 제공합니다.

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded or collapsed.</p>
</details>

의미적인(Semantic) 요소 활용

웹사이트에 대해 비의미적인 요소보단 의미적인(Semantic)한 요소를 사용하세요. 코드를 의미있게 만들고 구조, 접근성 및 SEO를 향상시킵니다.

From 요소 그룹화

<fieldset> 태그를 사용하여 Form의 관련 요소를 그룹화 하고 <legned> 태그를 사용하여 <fieldset> 제목을 정의합니다.

이는 효율적으로 접근 가능한 Form을 만드는데 유용합니다.

<form>
   <fieldset>
      <legend>Personal details</legend>
      <label for="firstname">First name:</label>
      <input type="text" id="firstname" name="firstname" />
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />
      <label for="contact">Contact:</label>
      <input type="text" id="contact" name="contact" />
      <input type="button" value="Submit" />
   </fieldset>
</form>

드롭다운 메뉴 개선

<optgroup> 태그를 사용하여 HTML의 <select> 태그의 옵션을 그룹화 할수 있습니다.

이는 큰 드롭다운 메뉴나 긴 옵션 목록으로 작업할 때 사용할 수 있습니다.

<select>
   <optgroup label="Fruits">
      <option>Apple</option>
      <option>Banana</option>
      <option>Mango</option>
   </optgroup>
   <optgroup label="Vegetables">
      <option>Tomato</option>
      <option>Broccoli</option>
      <option>Carrot</option>
   </optgroup>
</select>

Video Presentation 개선

poster 속성을 사용해 비디오가 재생될 때 까지 이미지를 표시할수 있습니다.

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4 />
</video>

다중 선택 지원

multiple 속성을 사용하면 <input> , <select> 의 두개 이상의 파일을 선택 및 옵션을 선택 할 수 있습니다.

<input type="file" multiple />
<select multiple>
    <option value="java">Java</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
    <option value="rust">Rust</option>
</select>

위/위래 첨자 표시

<sub>, <sup> 태그를 사용하여 텍스트를 각각 아래 첨자와 위 첨자로 표시할수 있습니다.

다운로드 링크 생성

download 속성을 <a> 태그와 같이 사용하면 링크를 클릭할 때 링크된 리소스를 탁색하는 대신에 다운로드 함을 지정할 수 있습니다.

<a href="document.pdf" download="document.pdf"> Download PDF </a>

상대 링크에 대한 기본 URL 정의

<base> 태그를 사용하여 웹페이지의 모든 상태 URL을 정의할 수 있습니다.

이는 웹 페이지의 모든 상태 URL에 대한 공유 시작점을 생성하여 리소스를 더 쉽게 탐색하고 로드할 때 유용합니다.

   


   Blogs
   Contact

이미지 로딩 제어

<img> 태그에 loading 속성을 사용하여 브라우저가 이미지 로드하는 방법을 제어할수 있습니다. 값은 “eager”, “lazy”, “auto”가 있습니다.

<img src="picture.jpg" loading="lazy">

번역 기능 관리

transalate 속성을 사용하여 콘텐츠를 브라우저의 번역 기능을 사용해야 하는지 여부를 지정할 수 있습니다.

<p translate="no">
  This text should not be translated.
</p>

최대 입력 길이 설정

maxlength 속성을 사용하면 사용자가 입력 필드에 입력할 수 있는 최대 문자 수를 설정할 수 있습니다.

<input type="text" maxlength="4">

Setting Minimum Input Length 최소 입력 길이 설정

minlength 속성을 사용하면 입력 필드에 대한 최소 문자 수를 설정할 수 있습니다.

<input type="text" minlength="3">

컨텐츠 편집 활성화

contenteditable 속성을 통해 콘텐츠를 편집 할 수 있는 여부를 지정할 수 있습니다.

이를 토앻 사용자는 요소 내의 콘텐츠를 수정할 수 있습니다.

<div contenteditable="true">
   You can edit this content.
</div>

맞춤법 검사 제어

<input>, <textare>, 콘텐츠 편집 가능 요소에서 spellcheck 속성과 함께 사용하여 브라우저의 맞춤법 검사를 활성화하거나 비활성화 할 수 있습니다.

<input type="text" spellcheck="true"/>

접근성 보장

alt 속성은 이미지를 표시할 수 없는 경우 이미지에 대한 대체 텍스트를 지정합니다.

접근성과 SEO를 개선하려면 항상 이미지에 대한 설명적인 alt 속성을 포함하세요.

<img src="picture.jpg" alt="Description for the image">

링크에 대한 대상 동작 정의

target 속성을 사용하여 링크된 리소스를 클릭할 때 표시될 위치를 지정할 수 있습니다.

<!-- Opens in the same frame -->
<a href="https://shefali.dev" target="_self">Open</a>

<!-- Opens in a new window or tab -->
<a href="https://shefali.dev" target="_blank">Open</a>

<!-- Opens in the parent frame -->
<a href="https://shefali.dev" target="_parent">Open</a>

<!-- Opens in the full body of the window -->
<a href="https://shefali.dev" target="_top">Open</a>

<!-- Opens in the named frame -->
<a href="https://shefali.dev" target="framename">Open</a>

추가 정보 제공

title 속성은 사용자가 요소 위로 마우스를 가져갈 때 해당 요소에 대한 추가 정보를 제공하는 데 사용될 수 있습니다.

<p title="World Health Organization">WHO</p>

특정 파일 형식 허용

accept 속성을 사용하여 서버에서 허용하는 파일 형식을 지정할 수 있습니다. 이는 <input> 태그와 같이 사용됩니다.

<input type="file" accept="image/png, image/jpeg" />

비디오 로딩 최적화

<video> 태그에 preload 속성을 함께 사용하면 보다 원활한 재생을 위해 비디오 파일을 더 빠르게 로딩할 수 있습니다.

<video src="video.mp4" preload="auto">
   Your browser does not support the video tag.
</video>

오늘 준비한건 이게 다 입니다.

도움이 되었기를 바랍니다.

읽어주셔서 감사합니다.

이와 같은 더 많은 콘텐츠를 보려면 여기를 클릭하세요.

X(Twiiter)에서 저를 팔로우하시면 웹 개발에 대한 일일 팁을 얻을수도 있습니다.