html biography example

{{ activeMenu.name }}

• Python Courses
• JavaScript Courses
• Artificial Intelligence Courses
• Data Science Courses
• React Courses
• Ethical Hacking Courses
• View All Courses

Fresh Articles

• Python Projects
• JavaScript Projects
• Java Projects
• HTML Projects
• C++ Projects
• PHP Projects
• View All Projects

• Python Certifications
• JavaScript Certifications
• Linux Certifications
• Data Science Certifications
• Data Analytics Certifications
• Cybersecurity Certifications
• View All Certifications

• IDEs & Editors
• Web Development
• Frameworks & Libraries
• View All Programming
• View All Development

• App Development
• Game Development
• Courses, Books, & Certifications
• Data Science
• Data Analytics
• Artificial Intelligence (AI)
• Machine Learning (ML)
• View All Data, Analysis, & AI

• Networking & Security
• Cloud, DevOps, & Systems
• Recommendations
• Crypto, Web3, & Blockchain
• User-Submitted Tutorials
• View All Blog Content

• Python Online Compiler
• JavaScript Online Compiler
• HTML & CSS Online Compiler
• Certifications
• Programming
• Development
• Data, Analysis, & AI
• Online Python Compiler
• Online JavaScript Compiler
• Online HTML Compiler

Don't have an account? Sign up

Forgot your password?

Already have an account? Login

Have you read our submission guidelines?

Go back to Sign In

How To Create A HTML Personal Bio Page for Beginners

Want to know how to build a HTML personal bio page? In this tutorial, I’ll walk you through this fun and practical HTML project step-by-step.

Whether you're just starting your HTML journey or looking to sharpen your skills, creating a personal bio page is an excellent project to learn real-world web development skills.

In this HTML tutorial, you'll:

• Structure your personal bio page with semantic HTML to ensure clear, accessible content.
• Use CSS to style your page, focusing on layout, typography, and color to make a visually engaging online presence.
• Apply responsive design principles to make sure your page looks great on any device, from desktops to mobile phones.
• Implement modern web design techniques like Flexbox and CSS Grid to enhance the layout and user experience.
• Add personal touches and professional details to make your bio stand out to potential employers or clients.

Through this tutorial, you'll not only develop a fully functional personal bio page but also gain valuable insights into the fundamentals of web design and CSS styling.

To make the most of this tutorial, having basic knowledge of HTML and CSS is beneficial. 

But you don't need to be a web development expert to follow along. I've designed this guide to be beginner-friendly, with clear explanations and practical examples.

I’ve also provided the full source code for this HTML project so you can follow along, experiment, and even build upon it for your own projects. Plus, there's an HTML tester console below so you can try everything right here.

• How To Create A HTML Personal Bio Page

Ready to start your web development journey with a hands-on HTML project ? 

Today, we're going to build a HTML personal bio page, which is perfect for beginners in web design. 

This project will demonstrate how to use HTML to structure personalized web content effectively.

We'll cover the basics of HTML for structuring your page and introduce CSS to enhance its visual appeal. Check out the image below for a preview of what you’ll build!

Wondering if it's challenging? Not at all! 

I’ve designed this HTML project to be beginner-friendly, dividing it into easy-to-follow steps. 

Whether you're new to web development or familiar with HTML and CSS, this project is great for skill enhancement.

You can do all of this using our online HTML compiler , so you won’t need to fire up an IDE or text editor to follow along with me as we build this personal bio page.

By the end, you’ll have a functional page for your portfolio and a solid understanding of HTML and CSS basics.

• Project Prerequisites

Before starting, ensure you’re comfortable with basic HTML syntax and CSS. I will cover everything else you need. 

Plus, if you need to brush up on any of these areas, you can always check out a web development course . 

I should also mention that it’s important to be willing to experiment and learn from mistakes. Maybe that sounds obvious, but trust me, this is one of the best ways to learn.

Plus, if you get stuck, you can even consider using an AI coding assistant like GitHub Copilot to help out, but I’d recommend waiting until you’re 100% stuck, as this is where you really learn.

Remember, we're also here to help, so don’t hesitate to search hackr.io for help as you go along.

• Step 1: Setting Up The Project

Let's kick things off by preparing your environment to develop the HTML personal bio page. 

If you want to dive straight in, I'd recommend following along with me using our online HTML compiler . 

This is pre-populated with the HTML and CSS files you need to build this HTML project without switching on an IDE.

Alternatively, I've outlined the steps for you to create the necessary files and organize your workspace on your own computer. 

Just follow these, and you'll have a solid foundation for your project.

i. Choose an IDE or Editor

Before you start, choose an IDE or editor tailored for web development. If you’ve read my article on the best web development IDEs , you’ll see I favor Visual Studio Code (VSCode). 

This is excellent for HTML and CSS and a solid choice if you’d prefer to build on your own machine.

ii. Install Necessary Plugins

If you choose VSCode, consider installing VSCode extensions like "Live Server" to preview your HTML pages in real time and "Prettier" for code formatting. 

These tools will make your development process smoother and more efficient.

iii. Create a New HTML Project

Once your editor is set up, it's time to create a new project:

- Open your editor and select the option to create a new project or folder.

- Name your project folder something descriptive, like "PersonalBioPage."

- Inside this folder, create two files: index.html for your HTML content and styles.css for your CSS styles.

iv. Set Up a Basic HTML Structure

Open your index.html file and set up a basic HTML structure. Here’s a simple template to get you started:

Try it with this HTML editor:

This is the basic structure every HTML project and page starts with. 

We've got our DOCTYPE, HTML tag, head section (with meta tags, title, and link to our CSS file), and the body where our content will go.

v. Prepare for CSS Styling

Make sure your styles.css is linked correctly in your HTML file to start adding styles in the next steps.

vi. Verify Project Setup

To ensure everything is set up correctly, try opening your index.html with the Live Server plugin or directly in your browser. 

You should see a blank page with the basic document structure ready to be filled with content.

And there you have it! You’ve successfully set up your environment for creating a personal bio page. 

Let’s jump into Step 2, where we’ll create the HTML structure for your bio.

• Step 2: Creating the HTML Structure

With your development environment set up, it’s time to construct the HTML skeleton of your personal bio page. 

i. Create the Header Section

The header is the first thing visitors see. 

It should include your name, a professional photo, and a brief tagline or your current professional role. Here’s how you might structure it:

Replace "your-photo.jpg" with the actual path to your image. Make sure the image is professional and suits the page’s style.

ii. Add the About Section

This section should provide a brief introduction about yourself. 

Include things like your professional background, achievements, or a short personal story. 

Structure it like this:

iii. Include a Skills Section

Highlight the professional skills or tools you’re proficient with. Consider using a list for clarity:

iv. Detail Your Experience

A well-laid-out experience section can really make your bio stand out. Include past positions, key responsibilities, and significant accomplishments:

v. Add a Contact Section

Make it easy for people to reach out to you. Include your professional email address, LinkedIn profile, or other contact methods:

Ensure all links are correct and test them to make sure they work.

vi. Structuring for Responsiveness

While adding content, keep in mind how your page will look on different devices. Use semantic HTML and prepare to apply CSS styles that will make the page responsive.

Here’s a summary of what we've accomplished in this step, highlighting the specific HTML skills you've utilized:

• Structured the Page Content: We created distinct sections, such as the header , about , skills , experience , and contact sections. This uses semantic HTML, which not only helps with SEO but also makes your site more accessible.
• Utilized Semantic HTML Tags: For each section, we employed semantic tags (<header>, <section>, <article>, <footer>), enhancing the meaning and readability of your HTML structure. These provide better structure compared to non-semantic tags like <div>, making it easier for search engines and accessibility tools to navigate.
• Embedded Multimedia and Links: We added an image to your header with <img> and provided links in your contact section using <a>. This is fundamental in HTML for incorporating multimedia elements and hyperlinks.
• Organized Content with Lists and Headings: Skills and professional experiences were listed using <ul> and <li> to clearly display lists of items. We used headings (<h1>, <h2>, <h3>) to structure the content hierarchically, improving both the aesthetics and organization of the information.
• Prepared the Document for Styling and Interactivity: By assigning id attributes to sections and other elements, we've prepared the groundwork for future CSS styling and JavaScript interaction.

With the HTML structure in place, you now have a solid framework for your personal bio page.

Let’s move on to Step 3 to style your page.

• Step 3: Styling with CSS

Now you have a solid HTML structure for your personal bio page, it’s time to enhance its visual appeal with CSS. 

This will transform your page from a basic text layout into a professionally styled profile.

i. Set Up Your CSS File

Make sure your CSS file (styles.css) is linked correctly in your HTML document, which we did in Step 1. 

This ensures that any styles you add will directly affect your HTML elements.

ii. Style the Header

The header is your first impression. Make it stand out by adding background colors, adjusting the text alignment, and customizing fonts:

iii. Style the About Section

Make the about section easy to read with ample spacing and a clear font:

vi. Enhance the Skills Section

For the skills list, consider adding a grid layout or icons next to each skill to make it visually engaging:

v. Professionalize the Experience Section

Align your experiences in a neat, readable format. Use borders or shading to distinguish each job role:

vi. Style the Contact Section

Ensure the contact section is clear and accessible, with link styles that are easy to identify:

In this step, you've employed several key CSS techniques to enhance the aesthetics and usability of your personal bio page:

• CSS Selectors and Properties: You've used a variety of selectors (element, id, class) and properties to precisely target and style HTML elements.
• Layout Techniques: Application of CSS for layout adjustments like padding, margins, text alignment, and the grid display method for organizing content visually.
• Responsive Design Elements: While we haven’t fully implemented responsiveness, the structure set here provides a solid basis for introducing media queries in the future, ensuring the site looks good on any device.
• Visual Enhancements: Introduction of stylistic features like background colors, font sizes, and hover effects to make the website more interactive and visually appealing.

You've now transformed a basic HTML document into a styled and professional-looking personal bio page. 

Next, we can review and debug our HTML project.

• Step 4: Review and Debug

Having designed and styled your personal bio page, it’s time to review and debug your work to ensure it looks great and functions correctly across different browsers and devices.

i. Check Consistency Across Browsers

Ensure your page displays consistently across different web browsers like Google Chrome, Firefox, Safari, and Edge. 

Look for styling discrepancies and make adjustments as needed. Tools like BrowserStack can be helpful for this testing.

ii. Validate Your HTML and CSS

Use validators to check if there are any errors or warnings in your HTML and CSS code:

• HTML Validator: Use the W3C Markup Validation Service to check for HTML syntax errors.
• CSS Validator: Use the W3C CSS Validation Service to ensure your CSS is error-free.

iii. Test Responsiveness

Adjust your browser window size to simulate different screen sizes or use your browser’s developer tools to test various device resolutions. 

Make sure your layout adjusts and looks good on mobile, tablet, and desktop views. Adjust your CSS using media queries if necessary to improve responsiveness.

vi. Improve Accessibility

Ensure your page is accessible to all users, including those with disabilities:

• Check color contrast ratios.
• Ensure that all interactive elements are keyboard accessible.
• Use semantic HTML to aid screen readers.
• Include alt text for images.

v. Optimize Loading Times

Optimize your page for faster loading times:

• Compress any images used without losing quality.
• Minify your CSS file to reduce its size.
• Check that your hosting solution loads your page quickly enough.

vi. Gather Feedback

Sometimes, it helps to get a fresh set of eyes on your project:

• Ask friends or colleagues to review your page.
• Gather feedback on the design, content, and functionality.
• Make adjustments based on the feedback to enhance user experience.

With your page polished and debugged, it's ready for the world to see. 

The next step would be to consider how and where to publish it, so let’s take a look at that!

• Step 5: Publishing Your Page

Now your personal bio page is designed, styled, and debugged, it’s time to share it with the world. 

This final step will guide you through the process of publishing your page online.

i. Choose a Hosting Service

To make your bio page accessible on the internet, you need to host it on a web server. 

Here are a few popular, user-friendly options that offer free plans:

• GitHub Pages: Ideal for hosting simple, static websites. Plus, it integrates directly with your GitHub repository, making updates easy.
• Netlify: Offers a straightforward drag-and-drop interface for deploying your site and automatic HTTPS.
• Vercel: Similar to Netlify, it provides easy deployment options and is great for static sites.

ii. Prepare Your Files for Deployment

Before uploading your files, ensure everything is named correctly and organized:

• Your main HTML file should be named `index.html`.
• Ensure all links to CSS files and images are relative and correctly referenced so they work on the web server.

iii. Upload Your Files

Depending on your chosen hosting service, the process will vary:

• GitHub Pages: Push your project to a GitHub repository, then enable GitHub Pages in the repository settings.
• Netlify/Vercel: Drag and drop your project folder onto their web interface or connect your GitHub account for continuous deployment.

iv. Set Up a Custom Domain (Optional)

If you have a custom domain, you can link it to your hosting provider to give your bio page a more professional look:

v. Test Your Live Site

Once your site is live, perform a final test:

• Visit the URL provided by your hosting service.
• Check all pages and links to ensure everything loads and functions as expected.
• Test on different devices and browsers to confirm compatibility.

vi. Update and Maintain

Remember, publishing your site is not the end of the road. 

Keep your content updated and continue improving the site based on user feedback and analytics.

• Next Steps & Further Learning

Congratulations on successfully building and publishing your own personal bio page! 

While you've reached a significant milestone, there's still plenty to explore in web development. 

First up, I’d highly encourage you to play around with the code I have provided, especially the styling. 

There is so much more you can do here, and it’s an excellent way to express your personality.

Beyond that, here are a few ideas to keep enhancing your skills:

Expand Your HTML and CSS Knowledge

• Advanced CSS: Learn about animations, transitions, and more complex layout designs with Flexbox and Grid.
• Responsive Design: Dive deeper into making your website look great on all devices by mastering media queries and responsive design principles.

Explore Additional Web Technologies

• JavaScript: Adding basic JavaScript can make your bio page more interactive. Consider implementing features like a light/dark mode toggle or interactive tabs for different sections of your resume. You can even use our online JavaScript compiler to do this.
• SEO Basics: Learn the fundamentals of Search Engine Optimization to increase the visibility of your web page.

Engage with the Community

• Feedback: Share your page on forums and with peers to get feedback and suggestions for improvement.
• Open Source: Consider contributing to open-source projects where HTML and CSS skills are needed. This can provide real-world experience and community engagement.

Keep Learning and Sharing

• Document Your Journey: Blog about the process of building your bio page, what you learned, the challenges you faced, and how you solved them.
• Stay Updated: Follow web development blogs, join webinars, and participate in online communities to keep up with the latest trends and best practices.

And if you're hungry for more HTML projects, check out the rest of our step-by-step tutorials, including how to build a HTML recipe page .

• Personal Bio Page: Full Source Code Example

HTML Source Code:

Try It Yourself »

CSS Source Code:

• Wrapping Up

Building a HTML personal bio page is a fantastic way to boost your web development skills and delve into creating visually appealing and functional websites.

By creating this personal bio page, you've tackled a variety of challenges, including crafting a user-friendly layout, handling styling with CSS, and ensuring your content is responsive and accessible across different devices.

In this tutorial, you’ve learned how to:

• Structure your content with HTML to create a clear, logical, and accessible web page.
• Use CSS to enhance the visual appeal of your page, applying styles that bring your content to life.
• Implement responsive design techniques to ensure your bio page looks great on both desktops and mobile devices.
• Utilize advanced CSS features like Flexbox and Grid for sophisticated layout designs.
• Prioritize web accessibility, making your site usable for everyone.

You now possess the foundational tools and knowledge needed to further develop and refine your personal bio page.

Potential enhancements could include adding interactive elements with JavaScript, integrating with social media platforms, or incorporating a blog section to share your professional insights and experiences.

Your journey into the world of web development doesn't end here. With these new skills, you're well-equipped to tackle more complex projects, explore different aspects of web design and development, and continue building a diverse range of engaging web experiences.

Have fun and happy coding!

Want to sharpen up your HTML and web development skills? Check out:

Dr. Angela Yu's Complete Web Development Bootcamp

Technical Editor for Hackr.io | 15+ Years in Python, Java, SQL, C++, C#, JavaScript, Ruby, PHP, .NET, MATLAB, HTML & CSS, and more... 10+ Years in Networking, Cloud, APIs, Linux | 5+ Years in Data Science | 2x PhDs in Structural & Blast Engineering

Subscribe to our Newsletter for Articles, News, & Jobs.

Disclosure: Hackr.io is supported by its audience. When you purchase through links on our site, we may earn an affiliate commission.

In this article

• Last Mile Education Fund helps students cover costs while learning cybersecurity Cyber Security
• Cleo: Your AI-Powered Financial Sidekick Artificial Intelligence (AI) AI Tools
• How to Build an Age Calculator in Python Python Projects

Please login to leave comments

Always be in the loop.

Get news once a week, and don't worry — no spam.

{{ errors }}

{{ message }}

• Help center
• We ❤️ Feedback
• Advertise / Partner
• Write for us
• Privacy Policy
• Cookie Policy
• Change Privacy Settings
• Disclosure Policy
• Terms and Conditions
• Refund Policy

Disclosure: This page may contain affliate links, meaning when you click the links and make a purchase, we receive a commission.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Styling a biography page

• Overview: CSS first steps

With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS to add your own style to them. This assessment gives you a chance to do that.

Starting point

You can work in the live editor below, or you can download the starting point file to work with in your own editor. This is a single page containing both the HTML and the starting point CSS (in the head of the document). If you prefer you could move this CSS to a separate file and link to it when you create the example on your local computer.

Note: You can try solutions in the interactive editors on this page or in an online editor such as CodePen , JSFiddle , or Glitch .

If you get stuck, you can reach out to us in one of our communication channels .

Project brief

The following live example shows a biography, which has been styled using CSS. The CSS properties that are used are as follows — each one links to its property page on MDN, which will give you more examples of its use.

• font-family
• border-bottom
• font-weight
• text-decoration

In the interactive editor you will find some CSS already in place. This selects parts of the document using element selectors, classes, and pseudo-classes. Make the following changes to this CSS:

• Make the level one heading pink, using the CSS color keyword hotpink .
• Give the heading a 10px dotted border-bottom which uses the CSS color keyword purple .
• Make the level 2 heading italic.
• Give the ul used for the contact details a background-color of #eeeeee , and a 5px solid purple border . Use some padding to push the content away from the border.
• Make the links green on hover.

Hints and tips

• Use the W3C CSS Validator to catch unintended mistakes in your CSS — mistakes you might have otherwise missed — so that you can fix them.
• Afterwards try looking up some properties not mentioned on this page in the MDN CSS reference and get adventurous!
• Remember that there is no wrong answer here — at this stage in your learning you can afford to have a bit of fun.

You should end up with something like this image.

The Best Website Bio Pages & Design Examples

Why are “about me” bio pages so important to include on your website? These best website bio pages can help build connections with visitors.

Why are “about me” bio pages so important to include on your website? Including a personal website bio page on your site helps to build immediate personal connections with your visitors. In this article, we will discuss the features that make a great “about me” bio, as well as share some awesome website design examples to serve as inspiration for your next site upgrade or project.

What content makes the best website bio page?

The purpose of a website bio page is to help build trust and credibility in your brand. The bio serves as a short overview to tell a visitor exactly what you do, who you serve, and the impact you have made on others. A well crafted “about me” bio will allow you to stand out among competitors and serve as the foundation for your brand image.

A personal bio gives details about a specific individual working for your business. The personal bio will highlight an individual’s personal experience and years served within your company, as well as any notable achievements or awards received. Showcasing the expertise of the people that make up the business gives greater credibility to your brand.

Website bios often tend to be one of the most visited pages of a website besides the home page. Therefore, it is important to make sure your bio provides the most accurate and up to date information for any notable individuals that work for your business.

You will want to avoid a bio that is too lengthy, as it might deter visitors from fully reading all the information. Instead, keep your bio concise and use statements of impact. You also want your bio to tell a story by showing how different members of your team have helped resolve issues in the past for previous clients. Always keep your target audience in mind when writing each bio by including statements that will resonate with them.

 Some features that are important to include in each of your bios are:

• A headshot of the individual
• Short statement on industry experience and years served at the company
• Inclusion of personal responsibilities and leadership 
• Describe the personal impact they have had on the company 
• Showcase specific areas of expertise
• Highlight notable clients the individual has helped
• Include individual achievements and awards received
• Back up any personal claims made with facts and statistics 
• Describe the individual’s personal values and vision for the company 
• Include links to professional social media profiles such as LinkedIn
• Call to action area to email the individual or company

Below are some examples of the best website bio page designs we’ve come across and the features they embody:

Stacey Ann Taylor Law

• Call to action with contact information
• Mission statement and summary of services offered
• Background of educational experience and experience
• Use of personal imagery

Dr. Joanne Goh

• Background of educational experience, research, and personal interest
• Use of imagery
• Summary  of notable achievements/awards

• Use of headshot
• Notes role within the company and mission for growth
• Previous experience in similar roles prior to position at Equifax

• Notes years of experience in similar roles at other notable companies
• Includes personal imagery
• description of responsibilities

• Inclusion of headshots 
• Notes how each individual helped grow the company
• Notes years of experience and internal promotions

• Notes revenue growth while working for the company
• Includes notable awards
• Includes personal imagery and link to LinkedIn social media page

Fidelis Security

• Notes leadership qualities 
• Experience in similar roles
• Includes link to LinkedIn personal profile
• Includes features from notable media outlets

The Center for Innovative GYN Care

• Links to social media profiles on Facebook, Twitter, and LinkedIn
• Includes short client testimonials regarding the individual’s work
• Description of education, certifications, and experience
• Notes specialities and services offered

• Includes call to action with contact us section
• Describes typical duties and areas of oversight
• Showcases experience in similar roles
• Short description of educational background

• Description of areas of oversight and leadership experience
• Years of experience working for the company
• Includes notable recognitions and awards received

Lightspeed Team

• Links to personal LinkedIn, Twitter, and email
• Detailed background of education and industry experience
• Links to notable companies team members have worked with

United States Institute of Peace

• Breakdown of key issue areas the individual is responsible for
• Background of personal research, interests, and training
• Links to news articles the individual was featured in

• Notes years of industry experience
• Includes links to email and LinkedIn profiles
• Overview of education and affiliations
• Inclusion of headshots

• Notes key areas of focus 
• Links to personal LinkedIn profile
• In addition to education and industry experience, notes the individual’s personal interests and hobbies outside of work

• Side banner showcasing all areas of expertise
• Showcases individual’s diversity with languages spoken and countries they have worked in
• Notes educational and professional experience

• Provides individuals contact information such as email and phone number to get in touch directly 
• Notes fields of expertise and industry experience
• Breakdown of public recognition the individual has received

• Links to blog posts they have written
• Notes key areas of work/priorities

Sheppard Pratt

• Breakdown of areas of specialty
• Detailed information about educational background and professional experience
• Lists certifications and professional organizations the individual belongs to

• Links to Facebook, LinkedIn, and Twitter pages
• Notes thought leadership through articles and opinion pieces written
• Showcases projects the individual has been involved in

• Includes a personal quote from the individual to add an element of personalization
• Notes current projects the individual is working on
• Links to similar open job positions as the individual featured to increase online applications

Aspen Institute

• Short statement describing the individual’s role in the company and personal responsibilities
• Detailed background of education and professional experience
• Links to personal email to contact directly

Need help with your  website bio page or other elements of your website design? Alliance Interactive is a full-service Washington, DC based digital agency and a leader in custom website design that helps attract new visitors and improve online conversions.

• What areas does your organization need support?
• Website Design / Development
• Content Management System
• Website Maintenance & Support
• Branding / Messaging
• Website Hosting
• Custom Apps (Intranet, Portal, Extranet)
• Marketing (SEO, Content, Paid Advertising, Social Media, etc.)
• Add A MESSAGE
• ATTACH A FILE OR RFP
• Attach file or RFP Max. file size: 50 MB.
• Phone This field is for validation purposes and should be left unchanged.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Discover Biography websites built by the Webflow community

Browse, clone, and customize thousands of websites #madeinwebflow. .css-ac9ku6{color:#2e5cff;font-weight:normal;-webkit-text-decoration:none;text-decoration:none;cursor:pointer;}.css-ac9ku6:hover{-webkit-text-decoration:underline;text-decoration:underline;} looking for templates.

• Marketplace
• Hire designers
• Become an Affiliate
• Terms of Service
• Privacy policy
• Cookie policy
• Cookie preferences

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML . You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals.

• Any HTML document must start with document declaration <!DOCTYPE html>
• HTML documents begin with <html> and ends with </html>
• Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
• Paragrahs are defined in <p>..</p> tag.
• Images are defined in <img> tag, where src attribute consists of image name.
• Buttons are defined in <button>..</button> tag
• Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li> .

HTML Elements and Attributes

• HTML element is everything present from start tag to end tag.
• The text present between start and end tag is called HTML element content.
• Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
• Do not forget the end tag.
• Elements with no content are called empty elements.
• Elements can have attributes which provides additional information about the element.

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

HTML Tables

• HTML Tables are defined in <table> tag.
• Table row should be defined in <tr> tag
• Table header should be defined in <th> tag
• Table data should be defined in <td> tag
• Table caption should be defined in <caption> tag

HTML-Javascript

• Javascript is used in HTML pages to make them more interactive.
• <script> is the tag used to write scripts in HTML
• You can either reference a external script or write script code in this tag.

HTML Web Page Examples with Source Code

In this article, we are going to see some HTML web page examples with source code. We will also see some of the key points to learn how to create these web pages.

HTML Web Page Example 1

This is an example of a simple HTML web page that shows the profile of a professional camel.

Here is how the camel profile is designed in HTML:

Container - The complete HTML web page is wrapped in a container. The container is a div element with the class container .

Header - Inside the container, we have a header element that contains the logo and the navigation menu.

Aside - Aside contains the profile picture and other navigational links.

Main - The main element contains the profile information. Like the name, the career, the skills, the contact form, etc.

Footer - The footer contains copyright information.

Here is the complete code of the camel profile:

Here is the result of the code above:

Stay Ahead, Learn More

• Sample HTML code for homepage
• How to use CSS in HTML
• HTML code for registration form with validation

HTML WebPage Example 2

This is the second example of an HTML web page. This is a simple error 404 page which is shown when the user tries to access a page that does not exist.

This is a very simple webpage that shows the error 404 page on the screen and gives a link to return to the homepage.

To design an error 404 page you need to use the following steps:

• Create a div element that covers the whole page set height: 100vh .
• Give it a background image that suits the 404 error.
• Style your basic text and link elements with CSS.

Here is the result of the code in example 2.

HTML Code Example 3 (Offer Page)

In this HTML code example we will create offer page. This is a simple newsletter signup page.

Here is the list of steps to create a newsletter signup page:

• First, we need to create the HTML structure of the page. We will use the <main> tag to wrap the content of the page. Then, we will create two sections: one for the intro and one for the sign-up form.
• Next, we will style the page using CSS. We will use the display: flex property to align the content of the page. We will also use the min-height property to make sure that the page is always fully visible.
• Then, we will style the intro section.
• Next, we will style the sign-up section.
• Finally, we will style the form. Look at the complete code below to see how we did it.

Here is the result of the code in example 3.

HTML Code Example 4

In the fourth example, we are going to create a testimonial page that shows the reviews of the customers along with their profile pictures, name and designation.

The basic idea will be to create HTML section first and then styling it with CSS.

The reviews and all its details will be stored in an array and then we will loop through the array to display the reviews.

Here is the complete code for the testimonial page.

Complete HTML code for the testimonial page

Here is the output of the above HTML code for testimonials:

This brief guide includes HTML web page examples with source code. We have learned how to create a basic HTML web page with 2 different examples. We have also learned how to create a basic CSS style sheet and how to use it on our HTML web page.

If you want a detailed explanation of a portfolio site then visit the HTML code for homepage .

• Join the Envato community
• Learn from others in the forums

Biography HTML Website Templates

Filter & refine, compatible with.

18 items in

• All Categories
• Site Templates
• Term: 'biography'

Nominee - Template for Candidate/Political Leader

• Political, nonprofit organization template
• Candidate, Political Leader html template
• Responsive Political html template

Zman - Personal PortfolioTemplate

• 5 Different Home Pages, Ajax Contact
• Based on Twitter Bootstrap 4.0.0
• Fully Responsive , RTL

One Page Pro - Multi Purpose HTML Template

Sole | Minimal CV/Resume, Bio, Portfolio, Blog

Political Responsive HTML5 Template

Neta - Election Campaign And Political Candidate HTML Template

• Full Responsive Design
• Become a Volunteer
• Political Biography

Collis - Personal Portfolio Template

• personal portfolio HTML5 responsive template
• personal portfolio, biography , resume, CV
• Working AJAX PHP contact form

Mearts - Personal Portfolio Template

• Minimal Personal Portfolio HTML Template
• Working Ajax contact form with validation
• Personal portfolio, biography , resume, CV

MEE - Responsive Resume / Personal Portfolio

• Horizontal scrolling
• 4 color schemes
• Personal resume template with portfolio grid

IronBand - Responsive Music Band & DJ template

Books Store HTML Template - Pustok

• eBook Online Shop Bootstrap 5 Template
• Responsive Book Store HTML Template
• Cyber Monday, Digital Book Shop HTML Template

SONIK: Professional One Page Music and Dj HTML Template

Timeline Template

Electorate - Responsive Political Campaign & Candidate HTML5 Template

• Responsive Design
• Integrated Donation System
• Event Calendar & News Section

Firbrigs - Fire Department HTML Template

VROOM - Personal Bikers & Hikers HTML Template

• Bikers Personal Profile
• Hikers Personal Profile
• Biker and Hikers Community Profile

Fiery - Fire Brigade Responsive HTML Template

• Fire Department, Fire Rescue
• 2 Home Styles & 20+ Inner Pages
• Fast, Optimized & Modern Design

Lionel - Personal Portfolio HTML5 Template

Deliver better projects faster.

Unlimited photos, web templates, graphic assets & courses.

Millions of creative assets, unlimited downloads.

One low cost subscription. Cancel any time.

Effortless design and video. Made online by you.

Smart templates ready for any skill level.

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

HTML Tutorial

Html graphics, html examples, html references.

HTML is the standard markup language for Web pages.

With HTML you can create your own Website.

HTML is easy to learn - You will enjoy it!

Easy Learning with HTML "Try it Yourself"

With our "Try it Yourself" editor, you can edit the HTML code and view the result:

Click on the "Try it Yourself" button to see how it works.

In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself" editor, you can edit and test each example yourself!

Go to HTML Examples!

Advertisement

HTML Exercises

This HTML tutorial also contains nearly 100 HTML exercises.

Test Yourself With Exercises

Add a "tooltip" to the paragraph below with the text "About W3Schools".

Start the Exercise

HTML Quiz Test

Test your HTML skills with our HTML Quiz!

Start HTML Quiz!

My Learning

Track your progress with the free "My Learning" program here at W3Schools.

Log in to your account, and start earning points!

This is an optional feature. You can study at W3Schools without using My Learning.

At W3Schools you will find complete references about HTML elements, attributes, events, color names, entities, character-sets, URL encoding, language codes, HTTP messages, browser support, and more:

Kickstart your career

Get certified by completing the course

Video: HTML for Beginners

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• 400+ Features
• Website Templates
• Website Designs
• WordPress Themes
• Joomla Templates
• HTML Templates
• HTML Website Builder
• WordPress Website Builder
• Joomla Page Builder
• Video Tutorials
• Documentation
• Contact Support
• Html Code Examples

Biography Html Code Example

Customize with Nicepage

When using HTML Code Generator you will be able to adjust colors, fonts, header and fooer, layout, columns and other design elements, as well as content and images.

Your browser does not support HTML5 video.

Edit Template Offline

Edit template online, create awesome websites.

Free Nicepage Builder

More from about us blocks.

• Customize Any Template Download

You are downloading Nicepage. Problems?  Click Here

Run Nicepage.exe from the Download Panel

Run Nicepage.dmg from the Download Panel

• Terms of Use
• Privacy Policy
• License Agreement

Themes & Templates

• CSS Templates
• HTML5 Templates
• One Page Templates
• Website Builder
• WYSIWYG HTML Editor
• Static Site Generator
• HTML Code Generator
• Web Page Designs
• eCommerce Designs
• Landing Pages
• Homepage Designs
• Website Mockup

Dudley Dudley: Cinde Warmington is my candidate for governor: Letters

Dudley dudley: cinde warmington is my candidate for governor.

Aug. 16 − To the Editor:

Cinde Warmington is my candidate for Governor. In this critical moment, with so much at stake we need someone with vision, someone with experience who can navigate with skill and determination and that person is Cinde Warmington.

Cinde is not just any candidate; she is the highest-ranking Democrat in New Hampshire’s state government and the only Democrat on the Executive Council. In this role, she has served steadfastly, holding firm against the waves of Republican overreach that threaten our rights and values. Her commitment to defending Planned Parenthood, safeguarding public education, and expanding essential services like affordable housing, job development, and childcare has given her excellent experience to represent all Granite Staters as our Governor.

Cinde’s contributions don’t stop there. She’s also charting a course toward a brighter future for all of us. Her candidacy for Governor is built on the belief that every person in New Hampshire deserves the opportunity to live free and thrive. This isn’t just rhetoric; it’s a promise backed by decades of dedicated service to our state. Before her time on the Executive Council, Cinde was a tireless advocate in the healthcare field. She fought for the expansion of substance use disorder treatment services and championed expansion and increased funding for women’s health and safety programs. She pushed for increased funding for mental health services, recognizing the critical need to support those struggling in our communities. And she brought greater access to telehealth services, ensuring that even those in our most remote areas could receive the care they needed.

This depth of experience has given Cinde a unique understanding of the challenges facing New Hampshire. Having represented 97 cities and towns in eight out of our ten counties, Cinde has traveled the state, seeing firsthand the struggles of families from our largest cities to our smallest towns. And as Governor, she’ll bring this wealth of knowledge to the corner office.

Republicans in this election cycle have made no secret of their desire to push an extreme agenda that is out of step with New Hampshire’s values. From enacting dangerous abortion bans to defunding essential services, their priorities are clear. But so are Cinde’s. She’s the strongest candidate to stand up to these threats, and her track record on the Executive Council proves that she has the experience and fortitude to weather the storms ahead and keep New Hampshire on course. Please join me in casting a vote for Cinde Warmington for Governor in the September 10 primary.

Dudley Dudley

Embracing economic growth for a brighter future

In a world full of challenges and uncertainties, we must choose between economic growth and government growth. While both have their merits, the benefits of economic growth cannot be ignored. Economic growth allows us to pass on a stronger financial foundation to our children and future generations, ensuring their prosperity and opportunities. The failures of government-led initiatives, as evident in the aftermath of the housing crisis, highlight the risks of relying solely on government intervention.

As a former board member of a non-profit organization dedicated to stopping home foreclosures, I witnessed firsthand the consequences of misguided government policies. The government believed it knew best how to increase home ownership, but the result was catastrophic. The wealth of countless individuals was severely impacted, with estimates ranging from $7 to 14 trillion dollars in losses. It took the nation nearly six years to recover economically from this disaster.

Recent proposals by New Hampshire Democrats, such as the hotel tax, raise concerns about the impact on hardworking individuals and families. Originally hotels in the towns of Hampton and Portsmouth NH only would pay the Hotel Tax. The addition of a $2 tax on hotel rooms disproportionately affects people who are already dealing with financial stress. For instance, if you were faced with the burden of repairing your house after a plumbing issue, or if your relatives visit, the hotel tax could push the overall cost up to 17% for every week spent in temporary accommodation. This means more money leaving your wallet and the need to find additional sources of income, resulting in less time spent with your loved ones.

It is evident that economic growth should be the priority if we want to secure a brighter future for ourselves and future generations. By promoting and encouraging economic growth, we can empower individuals and families to build their own financial legacies, rather than relying solely on government interventions. Let us not repeat the mistakes of the past, but instead focus on fostering an environment that nurtures economic growth and allows us to pass on a prosperous society to those who come after us.

Hon. Ken Sheffert

Hampton State Representative Candidate

Portsmouth ignores history, forcing state legislature to step in

Aug. 17 − To the Editor:

The NH State legislature just signed into law a bipartisan bill requiring more public school civics instruction. The same bill requires that schools and local governments use a holiday's statutorily designated title in official communications, publications, and documents. The juxtaposition of these is telling.

In 2022 the Portsmouth City Council enacted into local law and practice the abolishment of a holiday established to honor the contributions of Italian Americans to this country. The decision followed a presentation from public school students and adults who seemed to have inadequate instruction as to the history of  Columbus Day .  Amazingly, with one exception, this Council failed to correct them. Originally declared in 1892 by President Harrison following the brutal massacre (lynching) of 11 innocent Italian immigrants in New Orleans in 1891, the goal of the holiday was to end discrimination of Italians and elevate an awareness of their contributions to the country. One would think a US holiday established specifically to counter the practices of discrimination and lynching of a marginalized group would be honored by local government. Not in Portsmouth!

This is a prime example of why our legislature feels the need to micro-manage education. This year saw new laws for teaching cursive, multiplication tables, and now basic government and history.  It’s a sad day when teachers and public officials have to be required to educate our children in writing, math and historical facts to simply ensure that there will always be “adults in the room”.   

Elyse Gallo

Re-elect Mark Paige to NH House. He leads by example.

The first time I met Mark Paige, he was standing on a piece of cardboard, holding a sleeping bag, and preparing to spend the night outside toward the end of March. He was participating in the annual Waypoint SleepOut, an event that raises awareness about youth homelessness in New Hampshire. He had brought along one of his daughters, who also had a sleeping bag as she was joining in too. Mark was simultaneously addressing a serious issue in our state, supporting his daughter’s decision to do something helpful for other young people, and setting an example as someone who is willing to take on a challenge in the interests of an important cause.

Mark has been our State Representative for two terms, and he is running again to earn the right to return to the State House. Being a legislator has challenges of its own, but Mark knows that even when the going gets tough, the goal of good government is to do what’s best for the people it serves. In his time as our State Rep, Mark has worked to address New Hampshire’s low rate of voter registration for eligible 18-year-olds, sponsoring a bill to include education in high schools that teaches students the importance of voting responsibly and how to register. He was the prime sponsor of bills that expand voter access to online registration and assistive technology at the polls. These efforts resulted in recognition as the 2024 “Champion of Democracy” from Open Democracy.

A former public-school graduate, teacher, and school law attorney, he has strengthened our schools by opposing the diversion of taxpayer dollars away from public education to the private sector. His leadership on the Judiciary Committee halted actions that would have promoted the unconstitutional divisive concepts law.

He has voted to advance women’s health by opposing extreme abortion bills during both of his terms in Concord.

He served as Board Chair and lead negotiator/project manager to fund and build a non-profit new childcare facility on Route 27 for Great Bay Kids Co.

In his efforts both as a concerned citizen and as our State Rep, Mark is committed to doing what is right for the people in Exeter and across New Hampshire. He needs your vote in the primary on September 10 and the general election on November 5. This is your opportunity to show that you value what he has accomplished and want to see his service continue. Showing up at the polls may take some time out of your schedule, but it will be a lot easier than sleeping outside on a cold night!

Wendy Gladstone

Send your letter to [email protected]

Please keep letters to 250 words or less. Submissions must include the writer’s first and last names, city or town and a daytime telephone number (which is for verification purposes only and will not be published). Send letters or commentaries to [email protected] . Letters from Seacoast-area writers addressing local topics will be given priority for publication.