HTML Fundamentals and Tag Usage

Web Concepts

HTML stands for Hyper Text Markup Language, which is used to describe web pages.

HTML is not a programming language but a markup language.

HyperText refers to:

  • Beyond text limits: it can include images, sounds, animations, and multimedia content.
  • Hyperlink text: it allows jumping from one file to another and connecting with files on hosts worldwide.

Common Browsers and Their Rendering Engines

A browser engine is responsible for reading web information, organizing messages, calculating the display method of the web page, and displaying the page.

Browser Engine Notes
IE Trident IE, 360 Security, 360 Speed, Baidu Browser
Firefox Gecko
Safari Webkit
Chrome/Opera Blink Blink is actually a branch of Webkit

Domestic browsers typically use the last two engines.

Web Standards

Web standards are a collection of standards set by W3C and other standardization organizations.

W3C (World Wide Web Consortium) is the most famous standardization organization internationally.

Web standards mainly include structure (Structure), presentation (Presentation), and behavior (Behavior).

Standard Description
Structure Used to organize and classify web elements. Currently, HTML is studied mainly.
Presentation Used to set the format, color, size, and other appearance styles of web elements. It mainly refers to CSS.
Behavior Refers to the definition of the web model and the writing of interactions. JavaScript is mainly studied at this stage.

HTML Tags

  • HTML tags are keywords enclosed in angle brackets, for example.
  • HTML tags usually appear in pairs, for example and, known as double tags. The first tag is the start tag, and the second is the end tag.
  • Some special tags must be single tags, for example< br />.

Tag Relationships:

  • Containment (parent-child relationship)
  • Parallel (sibling relationship)

Basic Structure Tags of HTML

Every web page has a basic structure tag (skeleton tag)

Tag Name Definition Explanation
HTML tag The largest tag in the page, called the root tag
Document header Note that the title tag must be set in the head tag
Document title Allows the page to have its own web title
Document body Contains all the content of the document. Most of the page content is placed inside the body

DOCTYPE and lang and Character Set Functions

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vscode created the first interface</title>
</head>
<body>
    hello world again.
</body>
</html>

DOCTYPE

< !DOCTYPE > document type declaration, tells the browser which version of HTML to use to display the web page

  • Must be located at the very beginning of the document, before the tag
  • Not an HTML tag, but a document type declaration tag

lang

Defines the language displayed in the current document

  • en: English
  • zh-CN: Chinese

This does not restrict the display language, but only serves as a hint to the browser (e.g., automatic translation)

Character Set

Character set is a collection of multiple characters so that the computer can recognize and store various texts.

Inside the tag, the charset attribute of the tag can be used to specify which character encoding the HTML document should use.

 <meta charset="UTF-8">

Common values include GB2312, BIG5, GBK, and UTF-8, among which UTF-8 is also called the universal code.

Tag Semantics

That is, the meaning of the tag.

According to the semantics of the tag, giving the most appropriate tag in the right place makes the page structure more clear.

Title Tags

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Title Tag</h1>
    <h1>There are six levels of titles,</h1>
    <h2>Text bold line shows.</h2>
    <h3>From large to small, decreasing.</h3>
    <h4>From heavy to light, changing accordingly.</h4>
    <h5>After proper syntax writing,</h5>
    <h6>Specific effects can be seen by refreshing.</h6>
                ---------pink teacher
</body>
</html>

Paragraph and Line Break Tags

< p > divides the web page into several paragraphs.

  • Text in a paragraph will automatically wrap according to the browser size
  • There is space between paragraphs

< br /> forces a line break, just starts a new line without space between paragraphs.

Case Application

<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Common Tag Application</title>
</head>
<body>
    <h1>Emotional Chatting Machine: Emotional Conversation Generation with Internal and External Memory</h1>
    <p>Original: Emotional Chatting Machine: Emotional Conversation Generation with Internal and External Memory</p>

    <p>Code Address: https://github.com/thu-coai/ecm</p>

    <p>Note: Part of the text is machine translated and hasn't been proofread or understood yet. Sorry.</p>

    <p>Translation Help: Baidu Translate</p>

    <h2>Abstract</h2>
    <p>Perception and expression of emotion are key factors for the success of dialogue systems or dialogue agents. However, this issue has not been studied in large-scale conversation generation so far. In this paper, we propose the Emotional Chatting Machine (ECM), which not only generates appropriate responses in terms of content (relevance and grammatical correctness), but also in terms of emotion (emotional consistency). To our knowledge, this is the first work to address the emotional factor in large-scale conversation generation. ECM uses three new mechanisms to solve this problem:</p>
    Modeling high-level abstraction of emotional expression by embedding emotional categories<br />
    Capturing changes in implicit emotional states<br />
    Using an external emotional vocabulary to express explicit emotional expressions<br />
    <p>Experiments show that the model can generate responses both in terms of content and emotion.</p>
</body>
</html>

Text Formatting Tags

Setting text to bold, italic, or underlined to highlight the text.

Semantic Tag Explanation
Bold or It is more recommended to use **bold**, as it has stronger semantics
Italic or It is more recommended to use *italic*, as it has stronger semantics
Strike-through or It is more recommended to usedelete, with stronger semantics
Underline or It is more recommended to useadd underline, with stronger semantics

div and span Tags

These have no semantic meaning, they are boxes used to contain content.

Features:

  • div is used for layout, only one per line.
  • span is used for layout, multiple can be placed on one line.

Image Tag

The tag inserts an image, a single tag.

src is a required attribute of the image tag, used to specify the file path and filename.

Other attributes:

Attribute Value Explanation
src Image path Requirred attribute
alt Text Replacement text, displayed when the image cannot be shown
title Text Tip text, displayed when the mouse is placed over the image
width Pixels Set the width of the image
height Pixels Set the height of the image
border Pixels Set the thickness of the image border
  • The image tag can have multiple attributes, which must be written after the tag name.
  • Attributes are not ordered, and the tag name and attributes, as well as attributes and attributes, are separated by spaces.
  • Attributes use a key-value format.

Path

  • Directory folder: a regular folder that stores materials, such as the web folder, which can store html files and img folders.
  • Root directory: the first level when opening the directory folder, for example, the web folder, when clicked, opens the directory.

When using the image folder to store images, you need to use paths to specify the location of the image file. Its path can be divided into:

  • Relative path: based on the reference file's location, the directory path, simply put, the image's position relative to the page you want to use

Take the page path web/pages/index.html as an example

Relative Path Classification Symbol Explanation
Same Level Path The image is next to the page, web/pages/img.jpg, relative path is img.jpg
Next Level Path / The image is in the folder next to the page, web/pages/img/img.jpg, relative path is img/img.jpg
Upper Level Path ../ The image is in the folder next to the page, web/img.jpg, relative path is ../img.jpg
  • Absolute path: complete address, generally starting from the disk drive, the path + filename shown by right-clicking the image -> properties -> location

Hyperlink Tag

< a> is used to jump to a page

Link syntax format

<a href="jump target" target="target window pop-up method">Text or image</a>
Attribute Function
href Used to specify the URL address of the link target, a required attribute
target Used to specify the way to open the link page, where _self is the default value, and _blank opens in a new window

Link Types:

  • External link
  • Internal link
  • Empty link
  • Download link: write .exe or .zip file in href
  • Web element link: add hyperlinks to web elements
  • Anchor link

Anchor Link

Clicking the link quickly locates a specific position on the page

  • In the href attribute of the link text, set the attribute value as #name form, for example:
<a href="#two">Episode 2</a>
  • Find the target location tag, add an id attribute = the name just now, for example:
<h3 id="two">Episode 2 Introduction</h3>

Comment Tag and Special Characters

Ctrl+/ shortcut < !-- comment -->

Special Character Description Character Code (remove space)
Space & nbsp;
＜ Less than sign & lt;
＞ Greater than sign & gt;
& And sign & amp;
￥ Renminbi & yen;
© Copyright & copy;
® Registered trademark & reg;
° Celsius & deg;
± Plus and minus & plusmn;
× Multiplication sign & times;
÷ Division sign & divide;
² Superscript 2 & sup2;
³ Superscript 3 & sup3;

Table Tags

Tables are used to display data

| Text in the cell |
|---|

Header

| Header | Text in the cell |
|---|---|

Table attributes are not commonly used, and CSS is usually used to set them, but these words will be used in CSS later and can intuitively feel the appearance of the table.

Attribute Name Attribute Value Description
align left, center, right Specifies the alignment of the table relative to surrounding elements
border 1 or "" Specifies whether the cell has a border, default is "", indicating no border
cellpadding Pixel value Specifies the blank betwean the cell edge and its content, default is 1 pixel
cellspacing Pixel value Specifies the blank between cells, default is 2 pixels
width Pixel value or percentage Specifies the width of the table

Table Structure Tags

Because the table may be long, to better represent the semantics of the table, it can be divided into the table head and table body.

< thead> represents the header area of the table (not th, th refers to the header cell, thead refers to the area)

< tbody> represents the body area of the table

Merging Cells

  • Row merge: rowspan="number of merged cells"
  • Column merge: colspan="number of merged cells"

Target cell (write merge code)

  • For row merge: the topmost cell is the target cell, write merge code
  • For column merge: the leftmost cell is the target cell, write merge code

Steps:

  • Determine if it is row or column merge
  • Find the target cell and write merge code
  • Delete the extra cells

List Tags

Tables are used to display data, while lists are used for layout

  • Unordered list
  • Ordered list
  • Definition list

Unordered List

- List item 1
- List item 2
- List item 3
 ...

Ordered List

1. List item 1
2. List item 2
3. List item 3
 ...

Definition List

Definition lists are commonly used to explain and describe terms or nouns

<dl><!--dl can only nest dt and dd, adding other text or tags is not allowed-->
    <dt>Noun 1</dt><!--dt and dd counts are unlimited-->
    <dd>Noun 1 explanation 1</dd>
    <dd>Noun 1 explanation 2</dd>
</dl>

Form Tags

A complete form usually consists of three parts: the form field, form controls (form elements), and prompt information.

Form Field

The area containing form elements, the < form> tag defines the form field, and it sends the form element information within its range to the server.

<form action="url" method="method" name="form field name">
   Various form element controls 
</form>
Attribute Attribute Value Function
action URL address Specifies the server program's URL address that receives and processes the form data
method get/post Sets the submission method of the form data, the value can be get or post
name Name Specifies the name of the form, to distinguish multiple form fields in the same page

Form Controls

  • input form element
  • select dropdown form element
  • textarea text area element
input form element
<input type="attribute value" />
Attribute Value Description
button Clickable button (usually triggers a script through JavaScript)
checkbox Check box
file Input field and browse button for file upload
hidden Hidden input field
image Image form submit button
password Password field
radio Radio button
reset Reset button, clears all data in the form
submit Submit button, sends form data to the server
text Single-line input field, text can be entered, default width is 20 characters

In addition to type, input has other attributes:

Attribute Attribute Value Description
name Custom Name of the input
value Custom Specifies the value of the input element
checked checked Specifies that this input element should be selected when first loaded
maxlength Positive integer Specifies the maximum number of characters for the input field

name and value are attributes that each form element has, used by backend personnel.

Radio buttons and checkboxes in the same group should have the same name.

label Tag

Label tag

Used to bind a form element. When clicking the text inside the < label> tag, the browser automatically transfers the focus (cursor) to or selects the corresponding form element, improving user experience.

<label for="sex">Male</label>
<!--for follows the id content-->
<input type="radio" name="sex" id="sex" />
select Tag

Use when there are multiple options and want to save page space.

<select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    ...
</select>

You can write selected in the attribute to indicate the default selection.

textarea Text Area Tag

Use when users enter a lot of text.

<textarea rows="3" cols="20">
	Text content
</textarea>

cols and rows are usually controlled by CSS in actual development.

Tags: html web development markup language Web Standards

Posted on Sat, 29 Aug 2026 16:09:31 +0000 by jenp

Hot Tags

©2026 Freaks City