Perfect template, what is it?

Those who dock with the development of sites every day, probably have to work with templates, so I had to. As always, having a choice takes away the freedom of action. Types of templates and ready-made solutions - a great many, I stopped at these options:

Option 1.

 <! - Begin [News_List] ->
  <! - Begin [News_ListItem] ->
   {date} <a href="{link}"> {title} </a>
   <br />
   {header}  
  <! - End [News_ListItem] ->
  <! - Begin [News_ListItemEdit] -> <a href="#"> edit </a> <! - End [News_ListItemEdit] ->
 <! - Begin [End_List] ->

Advantages: understandable, readable together with html
Disadvantages: bulky
')
Option 2.

  <?  foreach ($ news as $ item) {?>
 <? = $ item-> date?> <a href="<?=$item-> link?> "> <? = $ item-> title?> </a>
 <br />
 <? = $ item-> header?>
 <?  if ($ permitted) {?> <a href="#"> edit </a> <?  }?>
 <?  }?> 

Pluses: smart
Disadvantages: unreadable, and I want to add logic to the display

Option 3.

 <component name = "news">
  <item>
   {date} <a href="{link}"> {title} </a>
   <br />
   {header}   
   <secured roles = "{roles}"> <a href="#"> edit </a> </ secured>
  </ item>
 </ component>

Pluses: nowhere clearer, there is something native 
Disadvantages: unreadable paired with html

The examples show a list of news.
I would like to come to an optimal result, which is why the opinion of experienced front-end developers is interested. Perhaps there are better options - I will be glad to consider.