Passing a variable and html5 ID attribute through a link

When you’re developing websites, you sometimes pass information through the URL (link). In HTML, information to jump to another section of the same page is also passed through the link. What do you do when you need both? Let me teach you how to format a link that does both.

Why Need This?

I ran into this question recently, while developing a (PHP) search page for a personal website. The HTML and CSS portion is just re-loading one page with some variables in its URL. I need these variables for the search result page. But, the search results itself are given in a lower section of the page. And thus, I needed the page to jump to it.

How It Normally Works

Mostly, variables for scripts (or variables for analytic purposes) are passed from URL to the server after a question mark (for example test.php?name=variable). In order to jump to a particular section on a web page, either a section ID for a page section (HTML5) or an anker name (older HTML versions) gets passed after a hashtag in a link (for example test.php#ankername or test.php#id). You can read exactly how this works in my HTML course and HTML 5 course.

How To Get It To Work

Combining the two is actually real easy. All you need to know is that you should end with the passing the link ID or anker name. So, the URL would look something like this:

test.php?name=variable#section_id

If you have more variables to pass through a link, it could look like this:

test.php?name1=variable1&name2=variable2#section_id

Of course, the file name, names, variable data and section_ids in these examples are just placeholders. It’ s to show you how to format the link. You still have to replace these with your own.

Bookmark the permalink.

Comments are closed.