Using <p> tags wrong, what else to do

Question

I have this little piece of code and I often run into this problem knowing it's bad practice and I seek to find a better way to optimize this code.

<p>Register a house <a href="register.php">here</a>.
<input type="submit" value="Login" onclick="formhash(this.form, this.form.password);" class="login"></p>

As you can see, I have wrapped the whole text in a <p> tag which is obviously bad practice but I need the two things to stand next to each other, and putting them on the same paragraph is surely the easiest way, but what ways would be best practice?

I have considered using a table for this, but using tables for things that are not meant to be a part of a table seems like bad practice too, lot's of code and it might be confusing.

Any advice? Thanks in advance.

Answer 1

Not sure why you'd think a <p> is bad practice. But:

• You can always use elements like <div> and <section> if it suits you better.
• Use <label> elements to associate labels for inputs. If done properly, you can have a nice effect when clicking on the label to focus on the corresponding input.
• Easy rule to remember: An inline(-block) element can always be placed in a block element

Answer 2

The correct and most semantic way to do this would likely be:

<form>
    <label>Your Label Here</label>
    <input type="text" />
</form>

However, there really isn't anything wrong with how you're doing it. If it works, it works. Cleanliness is for other people or for yourself if you have to revisit the code a long time from now.

Hopefully this helps you have cleaner code!

Answer 3

Just wrap it in a span or div if you don't want to use a paragraph:

<div>Register a house <a href="register.php">here</a>.
<input type="submit" value="Login" onclick="formhash(this.form, this.form.password);" class="login">
</div>

The input would also best be in a - this can be outside of the or

It seems to work the same