Nesting Div To Make Button Around Tel: Link?

Question

I tried to nest a div before closing my tag to make a button around a tap to call tel: link:

                                        <a href=”tel:+18888888888">
                                            <div>
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td rowspan="2"><img id="phone" src="/phoneimg.png" alt="xx"></td>
                                                            <td rowspan="2">Tap To Call NOW!&#9;888.888.8888</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </a>

When I upload the html file to my host I get a 404 error when I tap the button.

When I remove the div, and the closing tag is right behind the a href=”tel:+18888888888" tag (i.e. it has correct syntax without a div container before the closing tag) it works but is simply an undecorated link.

Any way to do this?

Thank you.

You can not include block elements into inline elements. Make links inside of tag — dfionov, Oct 22 '14 at 00:20

score 1 · Answer 1 · edited May 23 '17 at 10:33

As dfionov correctly stated, you cannot include block elements inside inline elements. Anchors (<a>) are however an exception to the rule in HTML5, as explained in another answer.

I would like to also mention that for your use-case, tables should be avoided. They are for displaying tabular data not aligning an image.

There are a number of ways to do this with CSS, I would probably suggest using inline-block because it works on all modern browsers and is easier to understand than many of the alternatives.

<a href="tel:+18888888888">
    <img id="phone" src="/phoneimg.png" alt="xx">
    <span>Tap To Call NOW!&#9;888.888.8888</span>
</a>

score 0 · Answer 2 · answered Oct 22 '14 at 00:25

Corrected code:

<div>
    <table>
        <tbody>
            <tr>
                <td rowspan="2"><a href="tel:+18888888888"><img id="phone" src="/phoneimg.png" alt="xx"></a></td>
                <td rowspan="2"><a href="tel:+18888888888">Tap To Call NOW!&#9;888.888.8888</a></td>
            </tr>
        </tbody>
    </table>
</div>

Nesting Div To Make Button Around Tel: Link?

2 Answers2