HTML - Separation of concerns

by scheinercc

HTML

<!-- not recommended -->
<doctype html>
    ...
    <body>
        <p><b><i>some text</i></b></p>
        <div onclick="goToAbout();">About</div>


        
<!-- recommended -->
<doctype html>
    ...
    <body>
        <section class="main-section">
            <p class="text-type-1">some text</p>
            <a href="about.html" class="nav-item">About</a>
        </section>

CSS

.text-type-1 {
    font-weight: bold;
    font-style: italic;
}
.nav-item {
    display: block;
}

JavaScript

(function( window, $, undefined ){
    
    $(doucment).ready( function() {
        
        $('.nav-item').on( click, function( event ) {
        
            $(this).load( ... );
            
            // IF the function above was running prevent loading the 'href'
            event.preventDefault();
        });
    });
    
}( window, jQuery ));