Understanding codes

[davy_yg]

Hello,

I am trying to understand someone else codes:

articles.blade.php

<div class="notes-nav">
                                                            <a href="#" class="btn btn-green btn-act-delete" onclick="deleteTimeLine(this)" data-id="{{$data->id}}" data-type="article"><img src="{{url('')}}/images//icon-trash.png"/></a>
                                                            <a href="#" class="btn btn-green btn-act-edit" data-id="{{$data->id}}" data-tittle="{{$data->tittle}}" data-content="{{$data->content}}"                
                                                            ><i class="fa fa-pencil"></i></a>
                                                            @if($data->status=="0")
                                                            <a href="#" class="btn btn-green btn-publish" data-toggle="tooltip" data-placement="top" title="publish?" data-id="{{$data->id}}" data-status="1"><span class="glyphicon glyphicon-ok"></span></a>
                                                            @else
                                                            <a href="#" class="btn btn-green btn-publish" data-toggle="tooltip" data-placement="top" title="cancel publish" data-id="{{$data->id}}" data-status="0"><span class="glyphicon glyphicon-minus"></span></a>
                                                            @endif
                                                        </div>

First I wonder why the a href = "#" is empty but you still can go to the next page when you click the button.
Next, what is data-tittle="{{$data->tittle}}" and data-content="{{$data->content}}" for?
Can you pass data using that? Also, where does this syntax comes from?

[pty]

href="#" makes an anchor tag appear like a link without actually redirecting you. It's intended to take you to anchors on the same page (<a href="#section-1">Section One</a>) but with no following text does nothing.

The intention is that a JavaScript handler takes over the click event.

[gentlemedia]

There is a onclick="deleteTimeLine(this)" on that anchor tag, so that function somewhere in your JS will do something.

In data-* attributes you can store data for that elelment which you then can manipulate with JS .data().

Those tags {{$data->tittle}}are from a JavaScript templating engine such as Mustache or Handlebars, but there are heaps more. Do you use one or don't you know THAT you use one?