1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: Learn HTML to solve problems
slug: Learn/HTML/Howto
tags:
- CodingScripting
- HTML
- NeedsTranslation
- TopicStub
translation_of: Learn/HTML/Howto
---
<p>Once you've covered <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">the basics</a>, there isn't one right path to learn {{Glossary("HTML")}}. You can pick up whatever you like at your own pace. HTML is simply a set of {{glossary("tag","tags")}} you can use to set up your document structure and add extra functionality to your document. The following articles explain thoroughly, with full working examples, how to use HTML for the most common, frequent Web development tasks. If you need a quick explanation of a tag, please head over to our <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a>.</p>
<h2 id="Common_use_cases">Common use cases</h2>
<p>HTML covers a lot of very common use cases in Web design. It's highly likely you'll come across these scenarios:</p>
<div class="column-container">
<div class="column-half">
<h3 id="Basic_structure">Basic structure</h3>
<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p>
<ul>
<li><a href="/en-US/Learn/HTML/Howto/Create_a_basic_HTML_document">How to create a basic HTML document</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">How to set up a proper title hierarchy</a></li>
</ul>
<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3>
<p>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.</p>
<ul>
<li><a href="/en-US/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create list of items with HTML</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to stress or emphasize content</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important">How to indicate that text is important</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Display_computer_code_with_HTML">How to display computer code with HTML</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Indicate_exponential_notation_with_HTML">How to indicate exponential notation with HTML</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Provide_contact_information_within_a_webpage">How to provide contact information within a webpage</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Annotate_images_and_graphics">How to annotate images and graphics</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable">How to mark abbreviations and make them understandable</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Add_citations_to_webpages">How to add citations to webpages</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li>
</ul>
</div>
<div class="column-half">
<h3 id="Hyperlinks">Hyperlinks</h3>
<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p>
<ul>
<li><a href="/en-US/Learn/HTML/Howto/Create_a_hyperlink">How to create a hyperlink</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Create_list_of_items_with_HTML">How to create a table of contents with HTML</a></li>
</ul>
<h3 id="Images_multimedia">Images & multimedia</h3>
<ul>
<li><a href="/en-US/Learn/HTML/Howto/Add_images_to_a_webpage">How to add images to a webpage</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add video content to a webpage</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">How to add audio content to a webpage</a></li>
</ul>
<h3 id="Scripting_styling">Scripting & styling</h3>
<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p>
<ul>
<li><a href="/en-US/Learn/HTML/Howto/Use_CSS_within_a_webpage">How to use CSS within a webpage</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li>
</ul>
<h3 id="Embedded_content">Embedded content</h3>
<ul>
<li><a href="/en-US/Learn/HTML/Howto/Embed_a_webpage_within_another_webpage">How to embed a webpage within another webpage</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Add_Flash_content_within_a_webpage">How to add Flash content within a webpage</a></li>
</ul>
</div>
</div>
<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2>
<p>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:</p>
<div class="column-container">
<div class="column-half">
<h3 id="Forms">Forms</h3>
<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p>
<ul>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li>
<li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li>
</ul>
<h3 id="Tabular_information">Tabular information</h3>
<p>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:</p>
<ul>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li>
</ul>
<h3 id="Data_representation">Data representation</h3>
<ul>
<li><a class="new" href="/en-US/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li>
</ul>
<h3 id="Interactivity">Interactivity</h3>
<ul>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li>
</ul>
</div>
<div class="column-half">
<h3 id="Advanced_text_semantics">Advanced text semantics</h3>
<ul>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li>
</ul>
<h3 id="Advanced_images_multimedia">Advanced images & multimedia</h3>
<ul>
<li><a href="/en-US/Learn/HTML/Howto/Add_responsive_image_to_a_webpage">How to add responsive image to a webpage</a></li>
<li><a href="/en-US/Learn/HTML/Howto/Add_vector_image_to_a_webpage">How to add vector image to a webpage</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Create_dynamic_and_interactive_images">How to create dynamic and interactive images</a></li>
</ul>
<h3 id="Internationalization">Internationalization</h3>
<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p>
<ul>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li>
<li><a class="new" href="/en-US/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li>
</ul>
</div>
</div>
<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
|
