---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
<>
	<a />
	<a href />
	<a href={null} />
	<a href={undefined} />
	<a href="" />
	<a href="#" />
	<a href={"#"} />
	<a href={`#`} />
	<a href="javascript:void(0)" />
	<a href={"javascript:void(0)"} />
	<a href={`javascript:void(0)`} />
	<a onClick={() => void 0} />
	<a href="#" onClick={() => void 0} />
	<a href="javascript:void(0)" onClick={() => void 0} />
	<a href={"javascript:void(0)"} onClick={() => void 0} />
	<a href="" onClick="window.location.href=index.html"> Home </a>
	<a href="class/html-css1/navigation/links#" onClick="window.location.href=index.html"> Home </a>
	<a href="javascript:void(0)" onClick="myFunc();"> Annual Reports </a>
</>;

```

# Diagnostics
```
invalid.jsx:2:2 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a href attribute for the a element.
  
    1 │ <>
  > 2 │ 	<a />
      │ 	^^^^^
    3 │ 	<a href />
    4 │ 	<a href={null} />
  
  i An anchor element should always have a href
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:3:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
    1 │ <>
    2 │ 	<a />
  > 3 │ 	<a href />
      │ 	   ^^^^
    4 │ 	<a href={null} />
    5 │ 	<a href={undefined} />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:4:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
    2 │ 	<a />
    3 │ 	<a href />
  > 4 │ 	<a href={null} />
      │ 	   ^^^^^^^^^^^
    5 │ 	<a href={undefined} />
    6 │ 	<a href="" />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:5:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
    3 │ 	<a href />
    4 │ 	<a href={null} />
  > 5 │ 	<a href={undefined} />
      │ 	   ^^^^^^^^^^^^^^^^
    6 │ 	<a href="" />
    7 │ 	<a href="#" />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:6:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
    4 │ 	<a href={null} />
    5 │ 	<a href={undefined} />
  > 6 │ 	<a href="" />
      │ 	   ^^^^^^^
    7 │ 	<a href="#" />
    8 │ 	<a href={"#"} />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:7:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
    5 │ 	<a href={undefined} />
    6 │ 	<a href="" />
  > 7 │ 	<a href="#" />
      │ 	   ^^^^^^^^
    8 │ 	<a href={"#"} />
    9 │ 	<a href={`#`} />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:8:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
     6 │ 	<a href="" />
     7 │ 	<a href="#" />
   > 8 │ 	<a href={"#"} />
       │ 	   ^^^^^^^^^^
     9 │ 	<a href={`#`} />
    10 │ 	<a href="javascript:void(0)" />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:9:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
     7 │ 	<a href="#" />
     8 │ 	<a href={"#"} />
   > 9 │ 	<a href={`#`} />
       │ 	   ^^^^^^^^^^
    10 │ 	<a href="javascript:void(0)" />
    11 │ 	<a href={"javascript:void(0)"} />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:10:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
     8 │ 	<a href={"#"} />
     9 │ 	<a href={`#`} />
  > 10 │ 	<a href="javascript:void(0)" />
       │ 	   ^^^^^^^^^^^^^^^^^^^^^^^^^
    11 │ 	<a href={"javascript:void(0)"} />
    12 │ 	<a href={`javascript:void(0)`} />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:11:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
     9 │ 	<a href={`#`} />
    10 │ 	<a href="javascript:void(0)" />
  > 11 │ 	<a href={"javascript:void(0)"} />
       │ 	   ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    12 │ 	<a href={`javascript:void(0)`} />
    13 │ 	<a onClick={() => void 0} />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:12:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Provide a valid value for the attribute href.
  
    10 │ 	<a href="javascript:void(0)" />
    11 │ 	<a href={"javascript:void(0)"} />
  > 12 │ 	<a href={`javascript:void(0)`} />
       │ 	   ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    13 │ 	<a onClick={() => void 0} />
    14 │ 	<a href="#" onClick={() => void 0} />
  
  i The href attribute should be a valid a URL
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:13:5 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use a button element instead of an a element.
  
    11 │ 	<a href={"javascript:void(0)"} />
    12 │ 	<a href={`javascript:void(0)`} />
  > 13 │ 	<a onClick={() => void 0} />
       │ 	   ^^^^^^^^^^^^^^^^^^^^^^
    14 │ 	<a href="#" onClick={() => void 0} />
    15 │ 	<a href="javascript:void(0)" onClick={() => void 0} />
  
  i Anchor elements should only be used for default sections or page navigation
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:14:2 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use a button element instead of an a element.
  
    12 │ 	<a href={`javascript:void(0)`} />
    13 │ 	<a onClick={() => void 0} />
  > 14 │ 	<a href="#" onClick={() => void 0} />
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    15 │ 	<a href="javascript:void(0)" onClick={() => void 0} />
    16 │ 	<a href={"javascript:void(0)"} onClick={() => void 0} />
  
  i Anchor elements should only be used for default sections or page navigation
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:15:2 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use a button element instead of an a element.
  
    13 │ 	<a onClick={() => void 0} />
    14 │ 	<a href="#" onClick={() => void 0} />
  > 15 │ 	<a href="javascript:void(0)" onClick={() => void 0} />
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    16 │ 	<a href={"javascript:void(0)"} onClick={() => void 0} />
    17 │ 	<a href="" onClick="window.location.href=index.html"> Home </a>
  
  i Anchor elements should only be used for default sections or page navigation
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:16:2 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use a button element instead of an a element.
  
    14 │ 	<a href="#" onClick={() => void 0} />
    15 │ 	<a href="javascript:void(0)" onClick={() => void 0} />
  > 16 │ 	<a href={"javascript:void(0)"} onClick={() => void 0} />
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    17 │ 	<a href="" onClick="window.location.href=index.html"> Home </a>
    18 │ 	<a href="class/html-css1/navigation/links#" onClick="window.location.href=index.html"> Home </a>
  
  i Anchor elements should only be used for default sections or page navigation
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:17:2 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use a button element instead of an a element.
  
    15 │ 	<a href="javascript:void(0)" onClick={() => void 0} />
    16 │ 	<a href={"javascript:void(0)"} onClick={() => void 0} />
  > 17 │ 	<a href="" onClick="window.location.href=index.html"> Home </a>
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    18 │ 	<a href="class/html-css1/navigation/links#" onClick="window.location.href=index.html"> Home </a>
    19 │ 	<a href="javascript:void(0)" onClick="myFunc();"> Annual Reports </a>
  
  i Anchor elements should only be used for default sections or page navigation
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:18:2 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use a button element instead of an a element.
  
    16 │ 	<a href={"javascript:void(0)"} onClick={() => void 0} />
    17 │ 	<a href="" onClick="window.location.href=index.html"> Home </a>
  > 18 │ 	<a href="class/html-css1/navigation/links#" onClick="window.location.href=index.html"> Home </a>
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    19 │ 	<a href="javascript:void(0)" onClick="myFunc();"> Annual Reports </a>
    20 │ </>;
  
  i Anchor elements should only be used for default sections or page navigation
  
  i Check this thorough explanation to better understand the context.
  

```

```
invalid.jsx:19:2 lint/a11y/useValidAnchor ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! Use a button element instead of an a element.
  
    17 │ 	<a href="" onClick="window.location.href=index.html"> Home </a>
    18 │ 	<a href="class/html-css1/navigation/links#" onClick="window.location.href=index.html"> Home </a>
  > 19 │ 	<a href="javascript:void(0)" onClick="myFunc();"> Annual Reports </a>
       │ 	^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    20 │ </>;
    21 │ 
  
  i Anchor elements should only be used for default sections or page navigation
  
  i Check this thorough explanation to better understand the context.
  

```