Development tools
- Visual Studio Code
- Chrome
14. Lists
The purpose of lists in HTML is to display a collection of items, either in ordered or unordered form, on a web page. Lists help organize and present information in a structured manner, making it easier to read and understand.
HTML provides three types of lists: Ordered Lists, Unordered Lists, and Definition Lists.
- Ordered Lists: Ordered lists use numbers or letters to indicate the sequence of list items. Common markers include numbers (1, 2, 3…), lowercase letters (a, b, c…), and uppercase letters (A, B, C…). Ordered lists are represented using the
<ol>tag and each list item is defined using the<li>tag. - Unordered Lists: Unordered lists do not follow a specific order and use symbols or icons to represent list items. Common symbols include solid bullets (•), hollow bullets (◦), solid squares (■), etc. Unordered lists are represented using the
<ul>tag and each list item is defined using the<li>tag. - Definition Lists: Definition lists are used to present a set of terms and their corresponding definitions in a key-value pair format. Definition lists are represented using the
<dl>tag, and each term (key) is defined using the<dt>tag, while the definition (value) is defined using the<dd>tag.
egs.
<!--
Ordered Lists
Note:
The <ol> tag can only contain <li> tags.
The <li> tag can contain any content.
-->
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<!--
Output:
1.First item
2.Second item
3.Third item
-->
<!--
Unordered Lists
Note:
The <ul> tag can only contain <li> tags.
The <li> tag can contain any content.
-->
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!--
Output:
• First item
• Second item
• Third item
-->
<!--
Definition Lists
Note:
The <dl> tag can only contain <dt> and <dd> tags.
The <dt> and <dd> tags can contain any content.
-->
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
<!--
Output:
Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3
-->Lists are commonly used in web pages to display contents such as tables of contents, steps, features, and definitions, providing organization and readability to information. Choosing the appropriate list type based on the specific content can enhance its presentation.
15. Tables
The purpose of tables is to organize and present tabular data in a structured format on a web page. Tables are commonly used to display data in rows and columns, making it easier to understand and compare different sets of information.
The basic usage of tables in HTML involves the following elements:
<table>: This element defines the start and end of the table. All other table elements will be contained within this element.<tr>: This element represents a table row. It defines a horizontal row of cells within the table. Each row must be enclosed within the<tr>tags.<td>: This element represents a table cell. It defines a single data cell within a table row. Each cell should be placed within a<td>tag.<th>: This element represents a table header cell. It is similar to<td>, but is used to represent the header cells of a table. Header cells are typically used to label or provide a description for the data in the corresponding column or row. Each header cell should be placed within a<th>tag.
Here’s an example of a simple HTML table with two rows and two columns:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<!--
Output:
Header 1 Header 2
Data 1 Data 2
-->The above code will create a table with a header row containing two header cells (“Header 1” and “Header 2”), and a data row containing two data cells (“Data 1” and “Data 2”).
By utilizing the table structure, you can effectively present and organize data in a tabular format on your web pages. Tables offer flexibility in terms of design and customization, allowing you to control the appearance and layout of the data within the table.
16. Form
forms are used to collect user input data and submit it to a server for processing. Forms provide an interactive way for users to input and submit data for various operations and processes, such as user registration, login, search, and submitting comments.
The <input> tag is an HTML element used to create interactive form controls that allow users to input data. It is a self-closing tag and does not have any content between its opening and closing tags. The behavior and appearance of the <input> element can be controlled using various attributes.
Here are some commonly used attributes of the <input> tag:
1. <input> type
<input type="..." >Here are some commonly used values for the type attribute:
text: Creates a single-line text input field.password: Creates a password input field where the entered text is masked.checkbox: Creates a checkbox input control allowing users to select multiple options.radio: Creates a radio button input control allowing users to select a single option from a group of options.submit: Creates a submit button used to submit a form.reset: Creates a reset button that resets the form to its initial values.file: Creates a file input control for uploading files.
2. <input> placeholder
<input type="..." placeholder="...">The placeholder attribute can be used to define placeholder text in the HTML <input> tag. Placeholder text is displayed inside the input field as a text prompt when the user has not entered any content.
3. radio Buttons
Here are the commonly used attributes for radio buttons:
type: Specifies the type of input element, which should be set to "radio" for radio buttons.name: Defines the name of the radio button group, grouping the radio buttons together. Radio buttons within the same group should have the same name.checked: (Optional) Specifies whether the radio button is initially selected. Setting this attribute to "checked" will make the radio button selected by default when the page loads.
<label>
<input type="radio" name="gender" value="male">
Male
</label>
<label>
<input type="radio" name="gender" value="female">
Female
</label>4. file upload form
By default, a file upload form control can only upload a single file. Adding the multiple attribute enables the functionality to select multiple files for upload.
<input type="file" multiple>5. checkbox
A checkbox, also known as a multiple-choice box or a check box, is typically represented by the HTML <input> element with the type attribute set to "checkbox". The checkbox can have an optional attribute checked to indicate its default selection.
<input type="checkbox" checked>6.dropdown Menu
A dropdown menu is a common interactive element used for selecting an option from a list. It typically consists of a label that displays the current selection and a collapsible list of options.
In HTML, a dropdown menu is usually created using the <select> element and <option> elements. The <select> element defines the overall structure of the dropdown menu, while the <option> elements define the individual options within the menu.
Here’s an example of a dropdown menu:
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4" selected>Option 4</option>
</select>
In the above example, we have created a simple dropdown menu with three options: “Option 1”, “Option 2”, “Option 3”, and “Option 4”,“Option 4” is default selected. Each <option> element has a value attribute that represents the value of the option, which will be sent to the server when the form is submitted or used for client-side scripting.
7. text area
A text area is an HTML form element that allows users to input multiline text.
a text area is created using the <textarea> tag. The <textarea> tag contains a resizable text box where users can enter and edit text content.
<textarea rows="4" cols="50">Enter your text here...</textarea>In the example above, we have created a text area with a size of 4 rows and 50 columns. The initial text content of the text area is “Enter your text here…”. By adjusting the values of the rows and cols attributes, you can control the display size of the text area.
Users can input multiline text in the text area by typing or pasting content. The text area can scroll to display more text if the input exceeds the visible area.
Text areas can be used in conjunction with other form elements, such as a submit button, to send the content of the text area to the server for processing when the form is submitted.
8. label
The <label> tag is used to create a label. It can be associated with a form element either by wrapping the element within the <label> tags or by using the for attribute. The for attribute is set to the id of the form element it is associated with. When a user interacts with the label (e.g., clicks on it), the associated form element receives focus or its state changes.
<!-- Associating a label by wrapping the form element -->
<label>
Name:
<input type="text" id="name-input">
</label>
<!-- Associating a label using the for attribute -->
<label for="email-input">Email:</label>
<input type="email" id="email-input">In the first example, the <input> element is wrapped within the <label> tags, and the label text is "Name:". When the user interacts with the label, the associated input field (with the id "name-input") receives focus.
In the second example, the label text is “Email:”, and the for attribute of the <label> tag is set to the id of the associated input field. When the user interacts with the label, the input field with the matching id ("email-input") receives focus.
9. button
<button type="">Button</button>Specifies the type of the button. Common types include:
"submit": Submit button, used to submit form data."reset": Reset button, used to reset form fields to their initial values."button": Regular button with no specific default behavior."menu": Menu button, used to trigger a menu or dropdown options."checkbox": Checkbox button, used to represent a selected state among multiple options.
<!-- action="server address"-->
<form action="">
username：<input type="text">
<br><br>
password：<input type="password">
<br><br>
<!-- type default is submit -->
<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">button</button>
</form>17. Semantic
Semantic HTML refers to the practice of using appropriate HTML elements to convey the meaning and structure of content when writing HTML code, in order to improve the readability, accessibility, and maintainability of web pages.
Semantic HTML code utilizes tags for their intended purposes, focusing on the meaning of the content rather than solely achieving a specific visual appearance. It emphasizes the use of semantic elements to describe the structure and content of the page, making the code easier to understand and maintain, and also more friendly to search engines and assistive technologies such as screen readers.
1. Non-semantic layout tags
Layout of web pages (dividing page sections, positioning content)
- div: Occupies a full line.
- span: Does not create a line break.
2. Semantic layout tags
<header>: Represents the header or top section of a page or section. It typically contains the site title, logo, and primary navigation.<nav>: Defines a section that contains navigation links, such as a menu or a list of navigation options.<footer>: Represents the footer or bottom section of a page or section. It typically contains information like copyright notices, contact details, and links to related resources.<aside>: Represents content that is tangentially related to the main content, such as a sidebar or a pull-out quote.<section>: Represents a standalone section or thematic grouping of content within a document. It helps organize and structure content into meaningful blocks.<article>: Represents a self-contained composition within a document, such as a blog post, news article, or forum post.
18. Character entities
Character entities are a method used in HTML or XML to represent special characters using specific encodings. Since certain characters have special meanings or cannot be directly represented in HTML, character entities allow us to insert these special characters into the document.
Character entities are composed of a special encoding entity name or entity number to represent the corresponding character. Here are some common examples of character entities:
<: Less than sign (<)>: Greater than sign (>)&: Ampersand (&)
By using character entities, we can correctly display and represent special characters in an HTML document without conflicting with HTML syntax or being interpreted for other purposes. This is useful for inserting special symbols in text, referencing special characters, or avoiding conflicts with HTML tags.
Recap
This article introduces the usage of HTML’s lists, tables, and form tags, as well as the concepts of semantic tagging and character entities.