HTML Profile Page Markup: Biography, Skills, and Contact Details

A personal profile has a name, a short introduction, and optional sections such as interests, projects, and skills. Readers should recognize the person before seeing a long list of details.

What You Need to Know

Use a real heading hierarchy and avoid turning every hobby into a separate navigation landmark. Contact details should be shared only with permission.

Example: See It in Action

Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.

This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.

<main>
    <h1>About Alex</h1>
    <p>Alex enjoys robotics and music.</p>
    <h2>Skills</h2>
    <ul>
        <li>HTML</li>
        <li>Teamwork</li>
    </ul>
    <a href="contact.html">Get in touch</a>
</main>

Let’s Understand the Example

• Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
• An h1 introduces the main subject of the page. Use the heading level for structure rather than font size.
• A p groups a paragraph of related text. Start another paragraph for a new thought.
• Href contains the destination of a link. A value starting with # points to an id on the same page.

The first example link points to contact.html. Check whether that destination exists relative to the document. A link changes where readers go; it does not perform an action such as saving a form.

What Should You See?

The page should display “About Alex” as a heading, followed by its related content. Change the heading text and refresh the browser to see the result.

Read only the headings, from top to bottom. Do they tell a sensible story? If not, move sections or choose levels that match the content.

Try It Yourself

1. Add one project with a short description and a clear link.
2. Save your changes, open or refresh the page, and compare the result with the original example.
3. Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.

Common Beginner Mistakes

• Posting a young student's private phone number in a public profile.
• Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.

Key Takeaways

• A personal profile has a name, a short introduction, and optional sections such as interests, projects, and skills.
• Main identifies the central content of the page; it should not be duplicated as separate visible main landmarks.
• Use a real heading hierarchy and avoid turning every hobby into a separate navigation landmark. Contact details should be shared only with permission.