## Table of Contents

- [attr](#attr)
- [Whole-page serialization](#whole-page-serialization)
- [Fallback values](#fallback-values)

---

[](https://microlink.io/docs/api/getting-started/overview)

[API](https://microlink.io/docs/api/getting-started/overview)

[](https://microlink.io/docs/guides)

GUIDES

[](https://microlink.io/docs/mql/getting-started/overview)

MQL

[](https://microlink.io/docs/sdk/getting-started/overview)

SDK

[](https://microlink.io/docs/cards/getting-started/overview)

CARDS

## attr

Type:

\<string\> \| \<string\[\]\>

\
Default: 'html'\
Values:

[](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)

[tagName](https://developer.mozilla.org/en-US/docs/Web/API/Element/tagName)

\| [](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeName)

nodeName

\| 'html' \| 'outerHTML' \| 'text' \| 'markdown' \| 'val'

It specifies how the value should be extracted from the matched [selector](https://microlink.io/docs/mql/data/selector):

``` js
const mql = require('@microlink/mql')

const github = username =>

  mql(`https://github.com/${username}`, {

    data: {

      avatar: {

        selector: 'meta[property="og:image"]:not([content=""])',

        attr: 'content',

        type: 'image'

      }

    }

  })

const username = 'kikobeats'

const { response, data } = await github(username)

console.log(

  `GitHub avatar for @${username}: ${data.avatar.url} (${data.avatar.size_pretty})`

)
```

Any [](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)

[HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)

is supported, plus the following special cases:

- 'html': Get the inner HTML content of the matched selector.
- 'outerHTML': Get the outer HTML of the matched selector, including the element itself.
- 'text': Returns the combined text content, including its descendants, by removing leading, trailing, and repeated whitespace.
- 'markdown': Converts the HTML content into Markdown, preserving headings, links, and formatting.
- 'val': Get the current value of the matched selector, oriented for select or input fields.

## Whole-page serialization

When [selector](https://microlink.io/docs/mql/data/selector) is omitted, `attr` operates on the entire page. This is useful for serializing a full page into a new output format:

``` js
const mql = require('@microlink/mql')

const { data } = await mql('https://example.com', {

  data: {

    content: {

      attr: 'markdown'

    }

  }

})

console.log(data.content)

// => '# Example Domain\n\nThis domain is for use in illustrative examples…'
```

You can also scope the conversion to a specific element by combining `selector` with `attr`:

``` js
const mql = require('@microlink/mql')

const { data } = await mql('https://example.com', {

  data: {

    article: {

      selector: 'article',

      attr: 'markdown'

    }

  }

})

console.log(data.article)

// => '# Article Title\n\nArticle content as markdown…'
```

## Fallback values

If you specify more than one value, they will be used as fallback values:

``` jsx
const mql = require('@microlink/mql')

const github = username =>

  mql(`https://github.com/${username}`, {

    data: {

      avatar: [

        {

          selector: 'meta[name="twitter:image:src"]:not([content=""])',

          attr: 'content',

          type: 'image'

        },

        {

          selector: 'meta[property="og:image"]:not([content=""])',

          attr: 'content',

          type: 'image'

        }

      ]

    }

  })

const username = 'kikobeats'

const { response, data } = await github(username)

console.log(

  `GitHub avatar for @${username}: ${data.avatar.url} (${data.avatar.size_pretty})`

)
```

The first attribute that resolves a value will be used.