Expression Engine navigation and conditionals

Expression Engine navigation and conditionals

Thanks in advance for help with this problem. It's an Expression Engine
site. I'm having trouble with simple conditionals for navigation, active
state. I have placed an active color sate within the styles; however,
there appears to be a problem with the "if statements" themselves because
when I inspect element, they render in the code (the navigation is
embedded).
<nav class="group" role="navigation">
<ul id="nav" class="group">
<li class="first"><a {if segment_1 == ""} class="active" {/if}
href="{site_url}"><strong>Now</strong></a></li>
<li><a {if segment_1 == "articles"} class="active" {/if}
href="/articles/"><strong>articles</strong></a></li>
<li><a {if segment_2 == "readings"} class="active" {/if}
href="/book-readings/readings"><strong>books</strong></a></li>
<li class="last"><a {if segment_2 == "readings"} class="active"
{/if} href="/shelf/readings"><strong>shelf</strong></a></li>
</ul>
</nav>