Basic syntax and tags of HTML5

1. Introduction to HTML5

What is HTML5?

HTML5 is the fifth major version of Hypertext Markup Language (HTML), which is used to describe the structure of web pages and present content. It is by far the latest and most powerful version of HTML.

HTML5 syntax conventions

1. A tag is the basic unit in HTML grammar, surrounded by angle brackets<>, each tag usually has a start tag (opening tag) and an end tag (closing tag), both of which are preceded by a slash/ separated.
2. HTML documents must begin with a declaration, which indicates that the document type is HTML5.
3. Appropriate tags should be used for layout and structure, such as the tag is used to define the root element of the HTML document, the tag is used to contain the header information of the web page, and the tag is used to contain the main content of the page.
4. Except in special cases, tags are usually used in a nested manner to illustrate the hierarchy between tags.

HTML5 infrastructure

<!DOCTYPE html>Document Type (Document Type Declaration, DTD for short): DTD is a statement at the top of an HTML document that specifies the HTML version and DTD specification. It indicates to browsers and validation tools which markup language a document uses, and helps browsers parse and render web pages correctly.

<html>Tag: <html>A tag is the root element of an HTML document, which encloses the entire document content. It is the parent element of all other HTML elements. Normally, an HTML document should <html>start with a tag and </html>end with a tag.

<head>Tags: <head>Tags are the head part of the HTML document, used to contain some metadata and other important configuration information, and will not be displayed directly to the user on the page. Some common <head>label content includes:

<meta charset="UTF-8">: Set the character encoding to UTF-8 to ensure that Chinese characters and special characters are displayed normally on the page.

<title>: Define the title of the web page, displayed on the title bar or tab page of the browser.

Link external CSS and JavaScript files: You can use <link>tags to import external style sheets (CSS files), and use <script>tags to import external JavaScript files.

Other meta information such as <meta name="description" content="网页描述">and <meta name="keywords" content="关键词1, 关键词2">etc. are used for search engine optimization (SEO).

<body>Label: <body>The label is the main content area of the HTML document, which contains all the content actually displayed to the user, such as text, pictures, links, audio, video, etc. Write the visible content of the web page within <body>the tags, which will be presented to the user in the browser.
Comments: Comments can be added, comments will not be displayed on the page, but used to describe the HTML code.

HTML5 Basic Tags

<h1>to <h6>: is used to create headings, h1 is the highest level heading, and so on.

<p>: Used to create paragraphs.

<a>: To create a link, you can use the href attribute to specify the URL address of the link.

<img>: Used to insert an image, specify the URL address of the image in the src attribute.

<ul>and <li>: are used to define unordered lists and list items, respectively.

<ol>and <li>: are used to define ordered lists and list items, respectively.

<div>: Used to create block-level containers for organizing and styling the page structure.

<span>: Used to create an inline container for styling and wrapping text fragments.

<form>: Used to create forms and collect data entered by users.

<input>: Used to create input fields in forms, which can include text input boxes, radio buttons, check boxes, etc.

<button>: Create a button to trigger a specific action.

<table>, <tr>, <td>: used to define the table, table row and table cell respectively.

<video>: Used to play the video on the page, and specify the URL of the video through the src attribute.

<audio>: Used to play audio on the page, specify the URL of the audio through the src attribute.

2. List label

<ul>, <ol>, and <dl>are three different types of tags used in HTML to create lists. They are used in different situations:

<ul>(unordered list - unordered list):
- When using a list of items in no particular order, like a group of related items, options, or a simple list, etc.
- Common use cases include navigation menus, task lists, and project checklists.

Example:

<ul>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<ol>(ordered list - ordered list):
- Use lists of items that have a specific order, elements that need to be numbered/counted sequentially, or information in order, etc.
- Common application scenarios include step-by-step guides, tutorial instructions, leaderboards, etc.

Example:

<ol>
  <li>步骤1</li>
  <li>步骤2</li>
  <li>步骤3</li>
</ol>

<dl>(description list - description list):
- Used to describe the relationship between a set of terms and their corresponding definitions/descriptions, to indicate terms and their explanations or descriptions, etc.
- Common application scenarios include glossaries, pages defining terms, parameter descriptions in technical documents, etc.

Example:

<dl>
  <dt>术语1：</dt>
  <dd>描述1</dd>
  <dt>术语2：</dt>
  <dd>描述2</dd>
</dl>

<ul><li>Rules for nested use with tags:

<li>Can only be a direct child of an <ul>or tag: A tag can only appear as a direct child of an unordered list ( ) or an ordered list ( ). Labels cannot be placed inside other elements such as paragraphs as children.<ol><li><ul><ol><li><p>

Example:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
</ul>

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
</ol>

Nestable list items: <li>The tag allows nesting another list structure, either an ordered list ( <ol>) or an unordered list ( <ul>), i.e. <li>inside again using <ul>or <ol>.

Example:

<ul>
  <li>列表项1</li>
  <li>
    列表项2
    <ul>
      <li>嵌套列表项1</li>
      <li>嵌套列表项2</li>
    </ul>
  </li>
</ul>

Common attributes of ul and ol are:

type: Specifies the counter style for ordered lists ( ), not useful for <ol>unordered lists ( ). <ul>Commonly used values are:
- "1": Arabic numerals (default).
- "a": Lowercase English letters.
- "A": Uppercase English letters.
- "i": Lowercase Roman numerals.
- "I": Uppercase Roman numerals.

Example:

<ol type="A">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

start: Specify <ol>the value of the start item of the ordered list ( ), and a start integer value can be set. By default, starts from "1". Applicable to list cases where numbering starts over.

Example:

<ol start="3">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

reversed: <ol>Enable reverse counting for ordered lists ( ), that is, the list is counted in descending order. By default, the value is "false".

Example:

<ol reversed>
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ol>

3. Multimedia tab

How to correctly insert a picture in a web page, and what common attributes does it have?
To insert images into web pages, use <img>tags.

<img src="imageURL" alt="description">

srcAttribute: It is used to specify the URL address of the picture. It can reference external image resources (absolute or relative URLs) or embedded Base64-encoded data.
altAttribute (optional): Used to provide alt text for the image. Alt text is displayed when an image cannot be loaded, or to let screen reader users understand the content of the image.

Example:

<img src="https://example.com/image.jpg" alt="Beautiful scenery">

Image-related properties:

widthAnd heightattributes: used to specify the display width and height of the image. You can use fixed pixel values or units such as percentages.

titleAttribute: Provides a caption text that is displayed when the mouse hovers over the image. When the mouse hovers over an image, the browser usually displays a tooltip displaying the title information.

loadingAttribute: Specifies the behavior of image loading. When set to a value "lazy", images will be lazy-loaded, which can improve page load performance. When there is a value "eager", the image will start loading immediately.

decodingAttribute: Specifies the browser's behavior for decoding images. When given a value "async", the image will be decoded asynchronously, which can speed up page loads.

sizesAttribute: Used to specify the size that the image should use when displayed on different screen sizes and layouts. It is usually used with breakpoint container ( <picture>).

- How to insert audio and video on web pages?
Insert audio and video on web pages, using <audio>and <video>tags

Insert audio:

<audio src="audio.mp3" controls></audio>

srcThe attribute specifies the URL address of the audio file, which can be a relative or absolute URL.
controlsProperties are used to display audio controls so the user can play, pause, adjust volume, etc.

Insert video:

<video src="video.mp4" controls width="640" height="480"></video>

srcThe attribute specifies the URL address of the video file, and you can use a relative or absolute URL.
controlsProperty is used to display the video controller.
widthand heightproperties to set the display width and height of the video in pixels.

If you want to support multiple media formats between different browsers, you can use <source>tags to specify multiple media sources within the <audio>or <video>element Example:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <!-- 可以添加更多媒体源 -->
</video>

- What do relative paths and absolute paths mean?

In web development, relative paths and absolute paths are two different ways to refer to files or resources.

Relative path: A relative path is a path relative to the location of the current document. It describes the relative positional relationship of the target resource to the current document. Relative paths can be expressed in the following ways:

../: parent directory.

./Or omitted: the current directory.

File name: The relative path where the target file is located.

Example:

<img src="../images/example.jpg">images: Refers to an image in a folder one level above the current document example.jpg.

<link href="./styles.css" rel="stylesheet">styles.css: Reference the style sheet file in the same directory as the current document .

Absolute path: An absolute path refers to a complete file or resource reference path, starting from the root directory (usually the main directory of the website). No relative path changes, always start from the same starting point.

The absolute path generally includes a complete URL, such as https://example.com/images/example.jpgor the local physical path of the server (such as /var/www/html/images/example.jpg) and so on.

Choosing a relative or absolute path depends on the specific situation and needs:

Relative paths are suitable for internal resource references in files, especially when visiting websites that use relative paths, whether it is debugging, development, or migration deployment, the correct reference relationship can be maintained.

Absolute paths are often used to refer to resources on other domain names or on different servers, but paths may need to be updated when migrating deployments.

4. Semantic tags

HTML5 introduces some semantic tags, which are used to more clearly describe the structure of web pages and the meaning of content, and improve the readability, accessibility, and search engine optimization of web pages.

<header>: Defines the document or section header. Commonly used to place headings, navbars, and bootstrap elements.

<nav>: Defines the navigational portion of the page, usually containing links, menus, or navigation functions.

<main>: Define the main content of the document or section, and a page can only have one <main>tag. It is used to identify the primary content area of a web page.

<article>: Defines a self-contained, complete article or a separate block of content. Commonly used for organization of blog posts, news articles, and stand-alone content.

<section>: Defines an individual section of the document or a specific block of content. It can be a container for a group of related content.

<aside>: Defines the secondary content area of the page, usually placed next to the main content, for supplementary instructions or other secondary information.

<footer>: Defines the document or section footer. Usually used to store copyright information, contact information or related links, etc.

<figure>: Defines a self-contained, self-contained media element, typically used to wrap an image, illustration, diagram, or similar object.

<figcaption>: Defines <figure>the title or description associated with the element.

<time>: Define the date or time. It is often used to represent content with time semantics such as release date and event time.

Semantic Label Layout

5. Form label

HTML5 introduces some new form tags, as well as enhancements to existing tags. The following are common form tags in HTML5:

<input>: Used to create various input fields.

typeThe new value of the attribute:

email: Specifies that the input is an email address.

date: Specifies that the input is a date.

url: Specifies that the input is a URL address.

tel: Specifies that the input is a phone number.

number: Specifies that the input is a numeric value.

search: Specifies the input as a search.

color: Specifies that the input is a color picker.

range: Specifies that the input is a range selector.

file: Used to upload files, etc.

<textarea>: Used to create a multi-line text input field that allows users to enter multiple lines of text.

<select>: Creates a drop-down selection list.

<option>: <select>Used within a tag to define options for a drop-down select list.

<datalist>: Define a list of predefined options to link with the input field.

<option>: <datalist>Used inside a tag to define predefined options.

<output>: Used to display the results of calculations or script output.

forAttribute: Linked to the form field it is related to.

<progress>: Indicates the completion progress of the task.

valueProperty: Indicates the completed progress value.

maxAttribute: Indicates the maximum value of the total progress.

<meter>: Represents the value of some standard measure.

valueAttribute: Represents the measurement value.

minAttribute: Indicates the minimum value.

maxAttribute: Indicates the maximum value.

There are also some new form attributes to enhance and improve the functions of the form, such as:

required: The form field is required.

placeholder: As hint text for the input field.

autocomplete: Enable or disable autofill for form fields.

6. Form label

HTML5 provides some new table tags to enhance and semanticize the structure of tables in web pages. The following are common table tags in HTML5:

<table>: Used to create tables.

Can contain multiple <tr>elements to represent rows.

<th>Can contain (header cell) or <td>(data cell) elements within a row .

<thead>: Used to define the header section of the table.

Contains one or more <tr>elements.

<tbody>: Used to define the body of the table.

Contains one or more <tr>elements.

<tfoot>: Used to define the footer section of the table.

Contains one or more <tr>elements.

<th>: Used to define the header cell of the table.

Usually appears in the <thead>or <tfoot>area.

A header used to identify a column or columns.

<td>: Used to define the data cells of the table.

appears in <tr>.

Contains actual data or other content.

The sample code is as follows:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总人数：2</td>
    </tr>
  </tfoot>
</table>

The above example shows a simple table structure, which contains header, data row and footer. Note <colspan>the attribute, this attribute is used to define the number of columns the cell spans.