Short key go to top of tag html inteliji năm 2024

Continuing my series of articles where I highlight the top IntelliJ IDEA features (earlier I blogged about the top code completion and refactorings features), I’d like to talk about navigation, which is another productivity-boosting function of an IDE that saves you lots of time, provided, of course, you’re using it right.

One of the fundamental things you, an IntelliJ IDEA user, need to understand to be able to harness all its power, is that this IDE was designed to keep the focus on the code. Most of your time is spent in the code editor, and navigation is just a means that helps you get from one location in the code to another without wasting too much time.

Today’s article focuses on the features that let you navigate between project files, blocks of code, and UI elements such as tool windows, editor tabs, etc.

Recent files

If you pause for a moment and think about your navigation patterns, you’ll notice that most of the time you work with a finite set of files. This clearly explains why the Recent files action is such a heavily-used feature among IntelliJ IDEA users. Once you get used to it, you’ll start using it for most of your navigation operations. To call this action just press Ctrl + E (Cmd + E for OS X).

Note that the last accessed file is selected by default, so you can go there with just one click. To narrow down the list of shown files, you can use the so-called Speed search. Just start typing part of a file name, and the IDE will highlight what you are looking for.

Structure popup

Another pattern you face every day is navigation over the currently opened file. Every file has its structure: a Java class consists of its members, such as fields, methods, etc; XML and HTML files consist of a tags tree. To quickly navigate to any place in this structure, just press Ctrl + F12 (Cmd + F12 for OS X) and choose the right item (again, you can narrow down the list by using speed search).

Sometimes, the structure may depend on the way you’re looking at it. For example, the Java class structure may include the structure of superclasses or interfaces. By default, IntelliJ IDEA hides the members of superclasses and interfaces. However, if you press the same shortcut again, you’ll get them.

When you use this action the next time, the IDE will remember your preference.

Jump to the navigation bar

It’s very helpful to accept the fact that most of your time the editor (and the code) is the only thing visible on your screen. Some people may argue that they also need to see the project tree, to understand the context they’re in, or to have a chance to quickly change it. Actually, this is why it’s so easy in IntelliJ IDEA to switch between the project tree and the editor. However, the project tree, in fact, is not the best option. Senior IntellIJ IDEA users know a much better one: the navigation bar. New users usually think that it’s just a breadcrumb, more experienced developers know how to make do almost anything you may want. To activate the power of the navigation bar, call the Jump to navigation bar action via Alt + Home (Alt + ↖ for OS X). Using this action you’re able to navigate over the entire project structure; create and change files, see its content, and many other useful things.

It’s worth mentioning that Jump to navigation bar can be also used even if the navigation bar itself is hidden.

Go to a class

What about such a basic operation as Go to a class? Every time you press Ctrl + N (Cmd + N for OS X) in IntelliJ IDEA, you may not know how powerful this action is — it’s much smarter than it looks. In addition to the simple wildcards, camel humps and package prefix supported in any IDE, IntelliJ IDEA’s Go to a class action provides middle name matching, line number postfix, quick documentation and definition popups:

By default, the action looks for the best matches in your project; if no matches are found, it looks at project libraries. To toggle the scope, use the same shortcut.

A nice thing about actions in IntelliJ IDEA is that they’re extremely easy to use without a mouse: once the popup is shown, you’re welcome to type/change your query, the Up and Down keys help you navigate through the results. That’s it. If you ever tried the corresponding action in other IDEs, you know what I mean.

Go to a file or a folder

The Go to a file action mapped to Ctrl + Shift + N (Cmd + Shift + N for OS X) is another must-know timesaver when you need to open a particular file in your project. In addition to standard features, such as wildcards, camel humps and folder prefix, for instance, it lets you find a folder.

Go to a symbol

And, finally, the last but not the least action in the Go to… family is Go to a symbol, mapped to Ctrl + Shift + Alt + N (Cmd + Shift +Alt + N for OS X), which, as its name suggests, lets you navigate to any symbol without a full-text search. As the IDE constantly maintains the index of all symbols in your project (and libraries), you can simply type an expression and find the corresponding method or a field in a few seconds, even if your project is very large.

Select in

Now imagine you need to select the currently selected file in a particular tool window, e.g the Project or the Changes view, or even Explorer/Finder. That’s when the Select in… action via Alt + F1 comes handy:

Switch to a tool window

Most tool windows in IntelliJ IDEA are assigned to handy shortcuts. By pressing the corresponding shortcut, the tool window gets visible and takes the focus. After pressing this shortcut when the focus is within the tool window, it gets hidden and your focus moves back to the editor. This is very convenient and lets you completely get rid of the mouse: whenever you need a tool window or want to get back to the editor, just press the shortcut.

Make sure you remember at least these shortcuts:

• The Project tool window: Alt + 1 (Cmd + 1 for OS X)
• The Changes tool window: Alt + 9 (Cmd + 9 for OS X)
• The Terminal tool window: Alt + F12

Switch to the editor

One of the trickiest features that not everyone is aware of, is switching the focus to the editor (from any other place) by pressing Escape. The tool window you’re switching from preserves its visibility state in this case. Switching to the editor by hiding all tool windows is available via another shortcut: Ctrl + Alt + F12 (Cmd+ Alt + F12 for OS X).

Go to a related unit test

What other common navigation pattern do we face when writing our code (especially, when we want to make sure our code works as expected)? We navigate between classes and corresponding unit tests. IntelliJ IDEA is able to recognize the tests that are related to a particular class, and offers the action called Go to a test, mapped to Ctrl + Shift + T (Cmd + Shift + T for OS X) that lets you navigate from any class to its tests and vice versa:

If a class doesn’t have any tests yet, the action helps you create one.

Jump up the hierarchy

Another frequent pattern is when you need to jump up through the class hierarchy for the current method (or for the entire class). In most IDEs you can see a special icon on the gutter next to the method definitions. By clicking such icon, you can navigate to the corresponding method definition in the superclass (or interface). In addition to that, IntelliJ IDEA has a dedicated action called Super Method, available via Ctrl + U (Cmd + U for OS X). This action lets you jump up in one move so you don’t even have to touch your mouse.

Jump down the hierarchy

If you can jump up through the hierarchy of your classes, why can’t you navigate down? Few IDEs provide such option, and IntelliJ IDEA is one of them. In addition to the icons that take you to the superclass, IntelliJ IDEA provides the icons to navigate to the corresponding method definition in the derived class, so you’re able to jump in both directions: up and down.

Those who’d like to navigate down the hierarchy even quicker, can use the Implementations action mapped to Ctrl + Alt + B (Cmd+ Alt + B for OS X). This action lets you choose one of the implementations you’d like to go to from the whole list of derived classes:

Method hierarchy

Now what if you’d like to see the whole hierarchy of the classes that implement or override the current method? In IntelliJ IDEA you can do it by calling the Method Hierarchy action, available via Ctrl + Shift + H (Cmd + Shift + H for OS X). This action may help you figure out which of the classes you may want to navigate to.

Diagram popup

We’ve just learned the ways to navigate over the hierarchy of your method definitions. Sometimes, we may also need to navigate over the hierarchy of the current class (or a class at the caret, regardless of any methods). In order to do this, in most IDEs you can use the action that shows the hierarchy of a given class (or interface). In IntelliJ IDEA such action is called Type Hierarchy and is mapped to Ctrl + H.

As you see, the result of this action is a tree. Some people may find this format hard to grasp. That’s why IntelliJ IDEA also has another action called Diagram popup mapped to Ctrl + Alt + U (Cmd + Alt + U for OS X). Instead of showing a boring tree, this action visualizes the hierarchy of the given class on a diagram:

Needless to say that you can navigate to any class or interface on the diagram.

Method call hierarchy

Talking about navigation over hierarchies, classes and method definitions, we’ve covered almost everything, except one particular thing: navigation over the hierarchy of method calls. Each method calls other methods that call other methods, etc. That’s why sometimes you may want to navigate to one of the methods that are called from the current one, or to one of the methods that call the current method. In IntelliJ IDEA you can quickly get a popup with the hierarchy of method calls via the Call Hierarchy action mapped to Ctrl + Alt + H:

Show usages

One more frequent pattern is navigation to one of the places where the symbol (constant, field, variable, method, class or interface) at the caret is used. In order to do that, in any IDEs you can use the Find usages action. One of the downsides of this action is usually its heavy-weightness: it starts a long-running search process and opens a tool window with results. That’s why IntelliJ IDEA also offers a lightweight version of this action called Show usages, available via Alt + Ctrl + F7 (Cmd + Alt + F7 for OS X):

This action shows the results in a popup and, by default, uses the Project level scope. When you call this action the second time, it changes the scope to the Project and libraries level.

Recently edited files

The first pattern in this article was about navigation over the recently accessed files. What if we want to narrow down this list to the files that have been edited recently? That’s easy with the IntelliJ IDEA’s action Recently Edited Files mapped to Ctrl + Shift + E(Cmd + Shift + E for OS X):

Navigation between views and controllers

Do you think your IDE should recognize only general relations (such as class hierarchy, test coverage, usages, etc) within your project files? How about something more specific? For navigation based on specific relations, IntelliJ IDEA provides the Related symbol action, mapped to Ctrl + Alt + Home (Cmd + Alt + Home for OS X). With this action, for example, you can easily navigate between your views and controllers in a Spring MVC, Grails, or even a JavaFX application:

Navigate to a view controller

Since IntellIJ IDEA is able to recognize specific relations within your project as well, what other specific navigation patterns does it bring? If you’re a web application developer, you can call the Go to a symbol action to navigate to a view controller by entering the URL it’s mapped to:

Database-related navigation patterns

The database tools in IntelliJ IDEA also have their specific navigation patterns. You can quickly jump to a table in the database tool window by entering its name by using the Go to a symbol action:

If you call the Find usages on a table or a column, IntelliJ IDEA will show you all other tables that reference it:

And just to completely blow your mind away, IntelliJ IDEA can navigate you over the primary key usages in a given table. For instance, you can ask the IDE to show you the rows from other tables that reference the current row:

Bookmarks

The last but not the least pattern we’ll take a look at is navigation over the places of your interest within your project via bookmarks. IntellIJ IDEA provides very handy tools for that. To add (or remove) the current place to/from your bookmarks, press F11; once you’ve done it, you’ll immediately see the corresponding icon on the gutter. Afterwards, whenever you wish to get back to a saved bookmark, press Shift + F11, and select one from the list:

Summary

I hope this article’s given you a glimpse on how IntelliJ IDEA helps you navigate over your project keeping your focus on the code. Navigation means how fast you switch between the pieces of code you are working on. The faster you switch, the more productive you are.

And remember, the better you know your IDE, the more time you have every day to spend on what you really enjoy.

What is the shortcut key for HTML?

HTML Editor keyboard shortcuts.

How do you jump to the closing tag in IntelliJ?

Alt + Command + [ goes to the opening tag. Alt + Command + ] goes to the closing tag.

What is the shortcut for jump to line in IntelliJ?

In Intellij you are in an editor, so the keyboard shortcuts are slightly different: Ctrl+Shift+{NUM} for grouping and Ctrl+{NUM} for a jump and focus to the line.

How to use HTML in IntelliJ?

Go to File | New, and then select HTML File from the list. IntelliJ IDEA creates a stub file based on the HTML file template and opens it in the editor.