[SalesForce] Lightning Web Component – Navigation – Show Link in a List / Table to Open Record

I need to create a link to an object within a data-table listing.
For example, list of contacts on a data table, when the user clicks the "name", it opens that Contact record view.
This seems simple enough, and yet, I'm having trouble finding a solution or example anywhere out on the internet or trailhead. It seems like all the solutions I find are using "tiles" and cascading events. I don't need anything that complicated.

Let's take for example: https://sfdccoder.wordpress.com/2019/02/21/lightning-web-component-load-contacts-list-example/

<template>
<lightning-card title="Contact ListView" icon-name="custom:custom67">

    <template if:true={listView.data}>
        <div class="slds-m-around_medium">
        <template for:each={contacts} for:item="contact">
            <p key={contact.Id}>{contact.fields.Name.value} – {contact.fields.Phone.value} </p>
        </template>
        </div>
    </template>

    <template if:true={listView.error}>
        Error in loading the data ..
    </template>

</lightning-card>

In this example, they are not making the name a link — I would like to make it a link that would open that contact's record view.

Assuming I were to add the link using something like this:

<p key={contact.Id}>
<lightning-button variant="base" label={contact.fields.Name.value} title="View Contact" onclick={viewContact}></lightning-button> 
– {contact.fields.Phone.value}

What would the "viewContact" js look like?

Something along the lines of:

viewContact() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: ?????,
            objectApiName: 'Contact',
            actionName: 'view'
        }
    });
}

I don't understand how to pass the contact.Id value from the HTML to the JS (?????)
Or, using:

<lightning-formatted-url value={?????} tooltip="View Contact" label={contact.fields.Name.value} target="_blank"></lightning-formatted-url>

(I realized the button isn't what I wanted)

In this example, in the past I would have just put "/{contact.Id}" — but that doesn't work with the lightning web component : it gives me the error: Ambiguous attribute value value="/{c.Id}". If you want to make it a string you should escape it value="/{c.Id}" — and if I escape it using /, then the link it forms is incorrect.

UPDATE: Per answer below, can pass ID using "value" and/or "data-*"
My full updated code is below for future reference:

sesResultsContact.js

import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';
import { LightningElement, wire } from 'lwc';

import getContactList from '@salesforce/apex/sesController.getContactList';

export default class SesResultsContact extends NavigationMixin(LightningElement) {
@wire(CurrentPageReference) pageRef;
@wire(getContactList) contacts;

viewContact(event) {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: event.target.value,
            objectApiName: 'Contact',
            actionName: 'view'
        }
    });
}

viewContact2(event) {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: event.target.dataset.id,
            objectApiName: 'Contact',
            actionName: 'view'
        }
    });
}

}

sesResultsContact.html

<template>
<lightning-card title="Contact" icon-name="standard:contact">
    <div class="slds-card__body_inner">

        <template if:true={contacts.data}>
            <table class="slds-table slds-table_fixed-layout slds-table_bordered">
                <thead>
                    <tr class="slds-line-height_reset">
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Name">Name</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Email">Email</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Phone">Phone</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Account">Account</div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <template for:each={contacts.data} for:item="c">
                        <tr class="slds-hint-parent" key={c.Id}>
                            <th data-label="Name" scope="row" class="slds-truncate">
                                <lightning-button-icon icon-name="utility:search" variant="bare"
                                    alternative-text="Open record" onclick={viewContact} value={c.Id}>
                                </lightning-button-icon>
                                <a onclick={viewContact2} title="View Contact 2" data-id={c.Id}
                                    target="_blank">{c.Name}</a>
                            </th>
                            <td data-label="Email">
                                <div class="slds-truncate" title={c.Email}>
                                    <lightning-formatted-email value={c.Email}></lightning-formatted-email>
                                </div>
                            </td>
                            <td data-label="Phone">
                                <div class="slds-truncate" title={c.Phone}>
                                    <lightning-formatted-phone value={c.Phone}></lightning-formatted-phone>
                                </div>
                            </td>
                            <td data-label="Account">
                                <div class="slds-truncate" title={c.Account.Name}>
                                    <lightning-formatted-url value={c.AccountId} label={c.Account.Name}
                                        target="_blank"></lightning-formatted-url>
                                </div>
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>

        </template>

        <template if:true={contacts.error}>
            <c-error-panel errors={contacts.error}></c-error-panel>
        </template>

        <div class="slds-align_absolute-center">
            <lightning-button label="Show More" variant="base" disabled> </lightning-button>
        </div>

    </div>
</lightning-card>

sesController.cls

public with sharing class sesController {

@AuraEnabled(cacheable=true)
public static List<Contact> getContactList() {
    return [ SELECT Id, Name, Phone, Email, AccountId, Account.Name 
             FROM Contact 
             WHERE Email != null 
             ORDER BY Name
             LIMIT 1];
}

}