Skip to content

Latest commit

 

History

History
115 lines (84 loc) · 2.67 KB

HTML.md

File metadata and controls

115 lines (84 loc) · 2.67 KB
Raw

Awesome HTML Tips Awesome

Contents

HTML Native Search

<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>

Link to Codepen

Fieldset Element

You can use

element to group several controls as well as labels () within a web form.

<form>
  <fieldset>
    <legend>Choose your favorite language</legend>

    <input type="radio" id="javascript" name="language">
    <label for="javascript">JavaScript</label><br/>

    <input type="radio" id="python" name="language">
    <label for="python">Python</label><br/>

    <input type="radio" id="java" name="language">
    <label for="java">Java</label>
  </fieldset>
</form>

Link to Codepen

Window Opener

Pages opened with target=”_blank” allow the new page to access the original’s window.opener. This can have security and performance implications. Include rel=”noopener” or rel=”noreferrer” to prevent this.

<a href="https://freecodetools.org" target="_blank" rel="noopener">
  Free Code Tools
</a>

Base Element

If you want to open all links in the document in a new tab, you can use element:

<head>
   <base target="_blank">
</head>
<!-- This link will open in a new tab. -->
<div class="wrapper">
  This link will be opened in a new tab: &nbsp;
  <a href="https://freecodetools.org/">
    Free Code Tools
  </a>
</div>

Link to Codepen

Details Element

You can use the details element to create native HTML accordion.

<div class="wrapper">
  <details>
    <summary>
      Click me to see more details
    </summary>

    <p>
      More details.
    </p>
  </details>
</div>

Link to Codepen

liveReload

Heard of VsCode LiveServer Extension? We are going to create something similar to that with a single line of HTML, All you have to do is change the content value to your desired value Example: content = "3000"

<meta http-equiv="refresh" content="value(seconds)">