To echo or not to echo?

Searching the code for related posts I found two almost identical code snippets, the only difference being that one uses echo:

echo '<li><a href="' . get_permalink() . '" title="' . the_title_attribute() . '">' . the_title() . '</a></li>';

and the other does not:

<li>
<a href="https://wordpress.stackexchange.com/questions/202833/<?php the_permalink() ?>" title="<?php the_title_attribute() ?>"> <h4><?php the_title() ?></h4></a>
            </li>

Personally, I understand the second version (which mixes html with php) better, but I suspect, WP being what it is (always preferring php over html), that the first version may be the official way of doing things.

Is there are any preferred way of doing things in this case? And if yes why?

The main differences are: the first snippet has html inside php while the second one has php inside html. Both approaches are basically valid, both are fine.

I would however always prefer (and recommend) to have php inside html because chances are that a third person / designer might have less difficulties in understanding the code and i.m.h.o. it is less likely to mess with it.