---
title: Use HTML to solve common problems
slug: Learn/HTML/Howto
page-type: landing-page
---

{{LearnSidebar}}

The following links point to solutions to common everyday problems you'll need to solve with HTML.

### Basic structure

The most basic application of HTML is document structure. If you're new to HTML you should start with this.

- [How to create a basic HTML document](/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#anatomy_of_an_html_document)
- [How to divide a webpage into logical sections](/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure)
- [How to set up a proper structure of headings and paragraphs](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#the_basics_headings_and_paragraphs)

### Basic text-level semantics

HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.

- [How to create a list of items with HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists)
- [How to stress or emphasize content](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance)
- [How to indicate that text is important](/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#emphasis_and_importance)
- [How to display computer code with HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#representing_computer_code)
- [How to annotate images and graphics](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#annotating_images_with_figures_and_figure_captions)
- [How to mark abbreviations and make them understandable](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#abbreviations)
- [How to add quotations and citations to web pages](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#quotations)
- [How to define terms with HTML](/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML)

### Hyperlinks

One of the main reasons for HTML is making navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:

- [How to create a hyperlink](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
- [How to create a table of contents with HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#active_learning_creating_a_navigation_menu)

### Images & multimedia

- [How to add images to a webpage](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#how_do_we_put_an_image_on_a_webpage)
- [How to add video content to a webpage](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)

### Scripting & styling

HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.

- [How to use CSS within a webpage](/en-US/docs/Learn/CSS/First_steps/How_CSS_works#applying_css_to_the_dom)
- [How to use JavaScript within a webpage](/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage)

### Embedded content

- [How to embed a webpage within another webpage](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)

## Uncommon or advanced problems

Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:

### Forms

Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our [full dedicated guide](/en-US/docs/Learn/Forms). Here is where you should start:

- [How to create a simple Web form](/en-US/docs/Learn/Forms/Your_first_form)
- [How to structure a Web form](/en-US/docs/Learn/Forms/How_to_structure_a_web_form)

### Tabular information

Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:

- [How to create a data table](/en-US/docs/Learn/HTML/Tables/Basics)
- [How to make HTML tables accessible](/en-US/docs/Learn/HTML/Tables/Advanced)

### Data representation

- How to represent numeric and code values with HTML — see [Superscript and Subscript](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#superscript_and_subscript), and [Representing computer code](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#representing_computer_code).
- [How to use data attributes](/en-US/docs/Learn/HTML/Howto/Use_data_attributes)

### Advanced text semantics

- [How to take control of HTML line breaking](/en-US/docs/Web/HTML/Element/br)
- How to mark changes (added and removed text) — see the {{htmlelement("ins")}} and {{htmlelement("del")}} elements.

### Advanced images & multimedia

- [How to add a responsive image to a webpage](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
- [How to add vector image to a webpage](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
- [How to add a hit map on top of an image](/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image)

### Internationalization

HTML is not monolingual. It provides tools to handle common internationalization issues.

- [How to add multiple languages into a single webpage](/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#setting_the_primary_language_of_the_document)
- [How to display time and date with HTML](/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#marking_up_times_and_dates)

### Performance

- [How to author fast-loading HTML pages](/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages)