HTML Tips

In this article I’ll share some tips and advice about HTML.

markodenic.com

매우 유용하지만 평소엔 잘 몰랐던 HTML 팁들을 소개합니다.

'loading=lazy' 속성

사용자가 이미지 영역까지 스크롤한 경우에만 이미지를 호출하도록 하는 속성입니다.

이미지 호출량을 줄여줌으로써 네트워크 성능에 도움일 줄 수 있습니다.

<img src='image.jpg' loading='lazy' alt='Alternative Text'>

이메일, 전화, SMS 링크

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>

ol 태그에 'start' 속성

start 속성을 이용하여 Ordered Lists의 시작 숫자를 지정할 수 있습니다.

<ol start="11">
	<li>HTML</li>
	<li>CSS</li>
	<li>JavaScript</li>
	<li>Python</li>
	<li>Go</li>
</ol>

'meter' 태그

<meter>를 이용해서 자바스크립트나 CSS없이 양을 표시할 수 있습니다.

<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>

<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>

<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>

HTML 자체 검색

list 속성을 이용하여 자동 검색을 쉽게 구현할 수 있습니다.

<div class="wrapper">
  <h1>Native HTML Search</h1>
  
  <input list="items">
  
  <datalist id="items">
    <option value="Marko Denic">
    <option value="FreeCodeCamp">
    <option value="FreeCodeTools">
    <option value="Web Development">
    <option value="Web Developer">
  </datalist>
</div>

base 태그

head 태그 안에서 base 태그를 이용하여 HTML 페이지의 기본 target를 지정할 수 있습니다.

즉, 기본 target을 _blank로 설정하면 a 태그에서 target을 쓰지 않아도 기본값이 blank가 됩니다.

<head>
   <base target="_blank">
</head>

download 속성

링크를 열지 않고 다운로드하게 하고 싶으면 download 속성을 써주면 됩니다.

<a href='path/to/file' download>
  Download
</a>

#tip

우리가 몰랐던 HTML 팁들