Using CSS I can get a better look , feel, functionality by allowing the user to click on an entire list item vs an anchor inside of it. The hover and such just looks better and anchor tags are finicky with top and bottom padding. I do not however want to sacrifice the crawling ability of google searches. Just getting on the Angular bandwagon but know from past experience that anchor tags are keys to the rest of the site. Does Angulars routing take care of this? Would adding a rel="me"
help?
regardless my question is - Which is better for google crawling:
<li ng-repeat='item in mainNav' ng-click="{{item.url}}">{{item.nav}}</li>
or:
<li ng-repeat='item in mainNav'><a href="{{item.url}}" title="">{{item.nav}}</a></li>
or does it matter at all?
Other Code:
function nav($scope) {
$scope.templates =[
{ name: 'header.html', url: 'templates/header.html'},
{ name: 'footer.html', url: 'templates/footer.html'}
];
$scope.header = $scope.templates[0];
$scope.footer = $scope.templates[1];
$scope.mainNav = mainNav;
$scope.footNav = footNav;
$scope.showMobileNav = function(){
$('#mainNav').slideToggle('fast');
}
$scope.go = function ( path ) {
$location.path( path );
};
}
var app = angular.module("app", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider.when('/',
{
templateUrl: "templates/home.html",
controller: "AppCtrl"
}
)
$routeProvider.when('/web/',
{
templateUrl: "templates/web.html",
controller: "AppCtrl"
}
)
})
without a doubt if you are looking for the best SEO and usability, you'd want to be looking at using the link (a tag). It means that you can tab into the element using the keyboard, has built in click statuses (:active, :focus) etc, and anything analysing the page for forward links should be able to find these.
Regarding your comment about being able to style better when applied to the LI
, you can have the same control by targeting the li > a instead. In HTML5 it's legal to put block elements inside the A
tag if that was dissuading you? Happy to help you if you provide a jsfiddle with a more complete example.