What is an AngularJS directive?

Maybe a really simple and initial definition for angular directives would be

AngularJS directives (ng-directives) are HTML attributes with an ng prefix (ng-model, ng-app, ng-repeat, ng-bind) used by Angular to extends HTML. (from: W3schools angular tutorial)

Some examples of this would be

The ng-app directive defines an AngularJS application. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data. The ng-bind directive binds application data to the HTML view.

<div ng-app="">
    <p>Name: <input type="text" ng-model="name"></p>
    <p ng-bind="name"></p>
</div>

Check this tutorial , at least for me it was one of the best introductions to Angular. A more complete approach would be everything that @mark-rajcok said before.

Looking at the documentation, directives are structures you can write that angularjs parses in order to create objects and behaviors.In other words it's a template in which you use mix of any arbitrary nodes and pseudo-javascript and placeholders for data to express intentions of how your widget (component) is structured, how it behaves and how it is feed with data. Angularjs then runs against those directives to translate them into working html/javascript code.

Directives are there to so you can build more complex components (widgets) using proper semantics. Just take a look at the angularjs example of directives - they're defining the tab pane (which isn't of course valid in regular HTML). It's more intuitive than using like div-s or spans to create structure which is then styled to look like a tab pane.

In AngularJS Directives are html re markers for a HTML DOM element like an attribute(restrict- A), element name(restrict- E), comment(restrict- M) or CSS class(restrict - C) that tell AngularJS's HTML compiler ($compile) to perform a specified behavior to that DOM element or even transform the DOM element and its children.Some Example are ng-bind ,ng-hide/show etc.

The homepage is very clear about this: When you hover over tabs in the last section:

We've extended HTML's vocabulary with a custom tabs element. The tabs abstracts the complex HTML structure and behavior necessary for rendering of tabs. The result is a more readable view and very easily reusable syntax."

Then in the next tab:

angular.module('components', []).
  directive('tabs', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {},
      controller: function($scope, $element) {
        var panes = $scope.panes = [];

        $scope.select = function(pane) {
          angular.forEach(panes, function(pane) {
            pane.selected = false;
          });
          pane.selected = true;
        }

So you can invent html elements i.e tabs and let angular handle the rendering of those elements.