# How to use both \<div\> and link with data-theme features

**URL:** https://meta.discourse.org/t/how-to-use-both-div-and-link-with-data-theme-features/312592
**Category:** Support
**Created:** [June 18, 2024, 5:04pm UTC](https://meta.discourse.org/t/how-to-use-both-div-and-link-with-data-theme-features/312592 "2024-06-18T17:04:32Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![IKab](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ikab/32/425306_2.png) [@IKab](https://meta.discourse.org/u/IKab)
#### Post date: [June 18, 2024, 5:04pm UTC](https://meta.discourse.org/t/how-to-use-both-div-and-link-with-data-theme-features/312592/1 "2024-06-18T17:04:32Z")

</div>

It’s said in this [post on customizing personal styles](https://meta.discourse.org/t/customize-posts-contents-with-your-own-styles/257738) that it’s **not possible** to use an **\<a\>** link tag directly because it’s an _exception and doesn’t allow any data-attributes._  
The solution is to use a Markdown **[link]** to enable the use of attributes, just like this :

**Code :**

```plaintext
This <span data-button>[link](https://discourse.org/)</span> use Mardown !

```

**Result :**

> This [link](https://discourse.org/) use Mardown !

However, for the structure of this specific post (and even for the all discourse), I need to use **\<div\>** in html for ease of use, but this seems to prevent any **BBCode** or **markdown** from being corectively interpreted. So using markdown links **doesn’t work directly in a div.**

**Code :**

```plaintext
<div>
This <span data-button>[link](https://discourse.org/)</span> use Mardown in a div !
</div>

```

**Result :**

> This [link](https://discourse.org/) use Mardown in a div !

I find myself unable to use \<a\> tags, which prevent data-atributes, and unable to use markdown or BBCode, which only work outside divs.

_ **Can anyone suggest a solution ? Thank you so much.** _

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [June 18, 2024, 5:28pm UTC](https://meta.discourse.org/t/how-to-use-both-div-and-link-with-data-theme-features/312592/2 "2024-06-18T17:28:21Z")

</div>

Have a look at `[wrap]` like in [Placeholder Forms](https://meta.discourse.org/t/placeholder-forms/113533), maybe?

---

<div class="post-metadata">

### Author: ![Firepup650](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firepup650/32/465200_2.png) [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [June 18, 2024, 5:48pm UTC](https://meta.discourse.org/t/how-to-use-both-div-and-link-with-data-theme-features/312592/3 "2024-06-18T17:48:27Z")

</div>

I think if you have anything on the line with the opening div you should be fine, e.g.:

```markdown
This is some text <div>
This is a very cool [link](https://example.com)!
</div>

```

Becomes:

> [@](#):
>
> This is some text
> 
>   
> This is a very cool [link](https://example.com)!

Or even a gapped div should work:

```markdown
This is some text
<div>

This is a very cool [link](https://example.com)!
</div>

```

Becomes:

> [@](#):
>
> This is some text
> 
> This is a very cool [link](https://example.com)!

---

<div class="post-metadata">

### Author: ![IKab](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ikab/32/425306_2.png) [@IKab](https://meta.discourse.org/u/IKab)
#### Post date: [June 18, 2024, 6:10pm UTC](https://meta.discourse.org/t/how-to-use-both-div-and-link-with-data-theme-features/312592/4 "2024-06-18T18:10:38Z")

</div>

YES ! Thank you , the 2 methods work very well !

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [July 18, 2024, 6:11pm UTC](https://meta.discourse.org/t/how-to-use-both-div-and-link-with-data-theme-features/312592/5 "2024-07-18T18:11:36Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.