4.Front End Development‐HTML - YukaKoshiba/MyknowledgeDocs GitHub Wiki

Front End Development_HTML @English Version
Create Date：2025/17/10
Last Update Date：2025/07/10

Contents

HTML
Etiquette　 Terminology　 Basic Syntax　 HTML Declaration　 Comments

head： meta　 title　 Layout Specification

body： header　 footer　 main

Headline (h)　 Paragraph (p)　 Lists　 Tables　 Hyperlink (a)　 form/input/button etc.　 Images　 SVG
Videos　 Embedding other HTML　 Creating user input forms
Display Code　 section　 blockquote　 aside　 Description List

Embedding JavaScript in Web Pages　 Setting Layouts Other Than CSS

Setting Shortcut Keys　 Screen Reader Compatibility　 Escape Sequences (Special Characters)

HTML Template

Pagination Feature>

HTML

HTML describes and defines the content of web pages according to the basic layout of a web page.
= The language that creates the basic framework of web pages.
* HTML is a language, but it is not a programming language because it does not have variables or functions.

W3C (World Wide Web Consortium) is an international non-profit organization that promotes the standardization of web technologies. By using validator.w3.org, you can
check whether a web page's HTML or XHTML code conforms to W3C's standard specifications.
In addition, CSS can also be checked on the W3C site (jigsaw.w3.org/css-validator/).

Etiquette

・HTML elements are distinguished in a document by "tags" consisting of element names enclosed in < >.
・Element names within tags are not case-sensitive, but it is customary/recommended to write them in lowercase.
・Tags play an important role in helping search engines recognize what kind of description each part is.
・Browsers read HTML files from top to bottom, left to right, and spaces and indents are virtually ignored.
　→To make browsers understand the HTML structure, it is essential to properly write both opening and closing tags.
　※The file size will be smaller, although readability will decrease, even if spaces and indents are reduced.

Terminology

  • element
    A unit of information enclosed in tags.
    • 　
  • attribute
    A string written in the opening tag to add some information or settings to an element.
  • void element
    HTML elements that cannot have child nodes (child elements and text nodes).
    Void elements only have an opening tag. You cannot specify a closing tag for void elements.
    Although not functionally necessary, it is recommended to add a self-closing tag to explicitly indicate the end.
    (Example)<input />
  • nest
  • id and class
    When specifying stylesheets or JavaScript, id or class are used when you want to specify something other than the element itself.
    However, a caution when using id is that it must be unique within a single HTML file. <div id="unique_id_name"></div>
    <div class="class_name"></div>

Basic Structure


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Write Title Here</title>　
  </head>
  <body>
    <header>
      <img>Logo etc.
      <nav>Navigation menu etc.</nav>
    </header>
    <main>Write Web page content here</main>
    <footer</footer>
  </body>
</html>

Comments

<!-- Comment -->

HTML Declaration

All web pages must start with <!DOCTYPE html>.
This special string, known as a declaration, ensures that the browser attempts to meet industry-wide specifications.
It tells the browser that the document is an HTML5 document, which is the latest version of HTML.

<html>

This encloses all content on the page (<title>, <body>, <footer>).

Attribute Content How to write
lang Specifies the page language (Example)To specify English
<html lang="en">
*en: English ja: Japanese

<head>

Sets metadata about the document, such as the document title, links to stylesheets, and scripts.

<meta>

Contains meta information about the page that is not directly displayed on the page.
How to write: <meta attribute="value" > *void element

Attribute Content How to write
charset Makes the web browser recognize the encoding of the web page. (Example)To specify UTF-8
<meta charset="utf-8">
name Provides document-level metadata and applies to the entire page.
Properly setting the content improves accessibility and SEO.		 (Example)To create a responsive web design
Just by writing this one line, it will also support mobile applications.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="initial-scale=1, width=device-width">

※Responsive Web Design: Web page styles can be viewed the same way on mobile, desktop PCs, and laptops.

<title>

Describes the content to be displayed in the web browser's title bar or tab.
Location: Inside <head>
How to write: <title>(Title text)</title>
Notes: Title text should be 15-60 characters.

Specify Layout

There are two ways to change the layout of a web page.
Both methods are written inside the <head> element.

1. Using the style element
Location: Inside the <head> element.
How to write: <style>CSS styling values</style>
It can be written within the HTML file, but it is generally not used as it can lead to decreased readability and layout breaks, making corrections difficult. 


<style>
  h1,h2, p {
    text-align: center;
   }
</style>

2. Referencing an external stylesheet file
Location: Inside <head>
How to write: <link rel="stylesheet" href="styles.css">　*void element

<head> <link href="style.css" rel="stylesheet"> <title>css</title> </head>

<body>

This is the part that is actually displayed on the web page and represents the main content of the HTML document.
Broadly classified, it can be divided into header, main, and footer.
However, these elements were introduced in HTML5, and may not display correctly in older browsers.
Often, all web page content is also contained directly within the body.
Dividing into header, main, and footer allows for different layouts and behaviors to be applied.

<header>

Used to consolidate important information about the page, such as the page title, navigation menu, and logo.
Basically, it is always displayed regardless of the web page content.


<!-- Navigation links (menu) to other documents -->
<nav>
  <ul>
    <li><a href="URL_to_another_document"&lg;Menu Item 1</a></li>
    <li><a href="id_name_within_document"&lg;Menu Item 2</a></li>
  </ul>
</nav>

<main>

Describes the content to be displayed on the web page.
The content within the main element should be unique to that document and not repeated elsewhere in the document.
Location: Inside <body>

<h>

Can be specified from h1 to h6, with h1 being the largest text.
<h> affects SEO.
A URL can be obtained, so it can be passed to a path.
Location: Inside <main>
How to write: <h1-6>Heading Text</h1-6>　*void element

Create text paragraphs

<p>Text</p>

Make into a bulleted list

ul: unordered List
li: list item


<ul>
  <li>Item to bullet </li>
  <li>Item to bullet </li>
</ul>

Make into a numbered list

ol: ordered List
li: list item


<ol>
  <li>Item to be numbered </li>
  <li>Item to be numbered </li>
</ol>

Insert a table

The basic way to write it is as follows:
In addition to this, it is also possible to group tables, merge cells, and create table headers/bodies/footers.
For details, refer to the freeCodeCamp article. 


<table>
  <caption>Table Title</caption>
  <thead>
    <tr>
      <th>Column 1 - Header</th>
      <th>Column 2 - Header</th>
      <th>Column 3 - Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column 1 - Data 1</td>
      <td>Column 2 - Data 1</td>
      <td>Column 3 - Data 1</td>
    </tr>
    <tr>
      <td>Column 1 - Data 2</td>
      <td>Column 2 - Data 2</td>
      <td>Column 3 - Data 2</td>
    </tr>
  </tbody>
<table>

<thead> and <tbody> can be omitted, but they offer the following benefits:

  • Clarification of structure
    →Allows different layout specifications with CSS
  • Improved accessibility
    →Can be recognized by screen readers etc.
  • Can manipulate tables with JavaScript

Add a link

Use the <a> (anchor) tag.

<a href ="URL_to_link_to">(Text to display for the link)</a>

Optional attributes

Attribute Setting Content
target _blank: Opens the link in a new tab.
Default is _self: Opens the link in the current tab.
rel noreferrer: Prevents passing referrer information when expanding the link.
Useful for privacy protection, security measures, and preventing tracking.

Insert an image


<img
  src="path_to_image"
  alt="image_description"
  width="number"
  height="number" />
*void element

The alt attribute is a property (attribute) of the img element written in the HTML source code when uploading an image to a website, providing alternative text for the image.
It is used by screen readers to improve accessibility and is displayed if the image fails to load.
In principle, the alt attribute should be included in <img>.

Width/height can also be specified with CSS, but specifying them in HTML ensures that space is pre-allocated, preventing layout shifts.
However, compared to CSS specification, image quality tends to degrade with scaling, and it is more difficult to support responsive design.

Attribute Setting Content Value
loading Specifies when to load the image.
Helps improve web page display speed.		 lazy: Delays loading images until just before they appear in the viewport.
eager: Loads images immediately.
auto: Browser loads at the optimal time.
※Behavior may differ depending on the browser.

Link an image


<a href ="URL_to_link_to">
  <img alt="image_description">
</a>

Associate images with captions

To represent self-contained content and associate an image with a caption, use <figure> and <figcaption>.
The image and caption are considered as a single unit.
Unlike the alt attribute, the content of <figcaption> is always displayed on the web page as a set with the image, not just when it fails to load.


<figure> or <div>
  <img src="path_to_image_file" alt="image_description" />
  <figcaption>Image caption</figcaption>
</figure> or </div>

SVG element

SVG (Scalable Vector Graphics) is a type of XML language.
It is a language used for drawing vector graphics (representing images with mathematical formulas (vectors) instead of pixels).

Because it is a vector graphic, unlike pixel-based images (JPEG, PNG, etc.), the image quality does not degrade when scaled.
Also, since SVG is written in XML format, it is a text-based image that can be edited with a text editor.

Therefore, SVG can be combined with JavaScript to create interactive elements (buttons, animations, etc.).
→ You can specify all the necessary lines and shapes, or modify existing raster images, or combine both to create and use an image.
→ You can also completely change the appearance of an image and its parts by transforming coordinates, composing them with each other, or filtering them.

Basic SVG Images

SVG provides the following basic shapes:

  • circle element: circle - Used for plotting scatter plots in D3.js, etc.
  • rect element: rectangle - Used for creating bar charts in D3.js, etc.
For attributes of each element, refer to mdn.

<img
  src="path_to_image"
  alt="image_description"
  width="number"
  height="number" />
*void element

Embed a video

<video>
Used to embed videos located on your own web server.


<!-- controls can specify playback, volume, seek, pause, size, etc. -->
<video controls width="value"&gt muted;
  <source src="path_to_video/video_name.mp4" type="video/mp4" />
  <source src="path_to_video/video_name.webm" type="video/webm" />
</video>

muted: Prevents sound from playing even if the video autoplays when loaded.

<iframe>
Used to embed external content such as YouTube videos or Google Maps.


<iframe
<!-- Autoplay and -->
  id="id_name"
  title="Title" <!-- Mainly used by screen readers etc. -->
  width="value"
  height="value"

<!-- Remove border -->
frameborder="0"
<!-- Allow actions that can be performed by content within the iframe -->
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share":
!-- Allow fullscreen playback -->
allowfullscreen <


<!-- Note the URL, as regular external site URLs cannot be embedded -->
src="video_embed_URL" />
</iframe>

Embed another HTML document

The <iframe> element is used to embed another HTML document within an HTML document.
It is very useful when you want to seamlessly display external web pages or content (videos, maps, advertisements, etc.) within a web page.

Basic syntax:


<iframe src="URL_of_HTML_to_embed" width="500" height="300"></iframe>

In addition, various arguments can be used for detailed specification, so refer to the mdn Web doc for details.

Display Code

To display code, use <code>.
If you want to display line breaks and spaces within the code as they are, enclose <code> with <pre>.
※pre: preformatted text
→ The program's line breaks will be reflected on the web page as they are, even without inserting HTML line break tags (<br> etc.).
→ A button to copy the program code will be displayed, making copying easier.

<pre><code>Code</code></pre>

Change layout without CSS

What you want to do How to write Notes
Insert a section <hr />　*void element
Make text bold <strong>Text to make bold</strong>
<b>Text to make bold</b> 		<strong>: Has SEO effect
<b>: Just displays bold text
Make text italic <em>Text to make italic</em>
<i>Text to make italic</i> 		<em>: Has SEO effect
<i>: Just displays italic text
Underline text <u>Text to underline</u>
Line break <br />　*void element Do not use multiple consecutive times for adjusting spacing between paragraphs.
Basically, adjust with CSS.
Since HTML5, <br /> is recommended instead of <br>.
Separate content at block level <div>Elements to group in the same division</div> An element for separating content, which essentially represents nothing.
Can be used for grouping when specifying styles or JavaScript in bulk.
Separate content at inline level <span>Elements to group in the same division</span> An element for separating content, which essentially represents nothing.
Can be used for grouping when specifying styles or JavaScript in bulk.

Get information from users

If you want to get information by having the user enter it, use <form>.
Basic syntax


<form  action="URL_for_sending_form_data" method="get/post">
  <fieldset>
    <legend">Description for fieldset</legend">
      <label"><input id="id_name" type="select_item_type"/ ></label">
  </fieldset>
</form>
form

Groups user input controls (input, textarea, select, button, etc.) and serves as a container for sending that data to the server.


<form action="URL_to_send_to" method="submission_method">
    -- input and other input elements are placed here
</form>
Attribute Description
action(Required) An attribute to specify the URL where the data entered in the form will be sent.
method Specifies how to send the acquired data to the destination specified by <form>'s action.
post: Sends with a POST request.
= Acquires data as data in the request body.
　Used for sending sensitive data or large data.
get: Sends with a GET request.
= Acquires data as URL parameters.
　Used for sending less sensitive data or when you want to bookmark search results, etc.
target Specifies where to display the form submission result.
_blank opens in a new window or tab.
_self (default) opens in the current window.
There are also values like _parent and _top.
enctype Specifies the encoding type of the form data.
・application/x-www-form-urlencoded (default)
　Suitable for most form data.
・multipart/form-data
Used when uploading files.
input

The most basic form control for users to enter text, numbers, files, or select options.
Provides various ways to collect data from web forms.
Void element (i.e., </input> is not written) 

<input type="input_type" id="identifier" name="key_to_send_to_server" value="initial_value" other_attributes>
Attribute Description
type(Required) Specifies the type of input field.
text: Single-line text input field (default).
password: Password input field.
email: Email address input field.
number: Number input field.
date: Date selection field.
checkbox: Checkbox.
radio: Radio button.
(Radio buttons with the same name attribute are grouped.)
file: File selection field (used for file uploads).
submit: Button to submit the form.
reset: Button to reset form input to initial values.
button: Clickable general-purpose button (behavior defined with JavaScript, etc.).
hidden: Not displayed to the user (used to embed values to send to the server).
name(Important) The key for sending form data to the server.
The server side uses the value of this name attribute to identify the submitted data.
value Sets the initial value of the input field.
placeholder Content to display in the text area until the user starts typing.
required Required input field.
readonly Read-only.
disabled Disabled (cannot be operated, form will not be submitted).
min, max, step Specify the range and increment of values.
pattern Specifies a regular expression that the input value must satisfy.
size Specifies the visible width of the input field (number of characters).
maxlength Specifies the maximum number of characters that can be entered.
autofocus Automatic cursor setting.
autocomplete Display (ON) / Hide (OFF) previous entries.
※Default is autocomplete="on".
label

Describes the label for each form element.
This clarifies to the user what the input element represents.
By matching the `for` attribute of `` with the `id` of ``, you can make them recognized as a single entity.


label for="name">Name:
output

<output> is used to display values or calculation results dynamically generated by JavaScript.

Minimum 2 characters of text input (required)


<label>Name
  <input id="name" type="text" required  minlength="2" />
</label>

Email address input (required)


<label>Email
  <input id="email" type="email"  required />
</label>

Number input (optional) with initial value 20, allowing 0-120


<label>Age
  <input id="age" type="number" min="0" max="120" value="20" />
</label>

Password input (required) consisting of 8 or more alphanumeric characters


<label>Password
  <input id="new-password" type="password" required pattern="[a-z0-5]{8,}" />
</label&gt>

Radio Buttons


<!-- Set up 3 radio buttons (initial selection is Option 1) -->
<label for="radio1">
  <input type="radio" id="radio1" name="radio_button_group" value="value_to_pass" checked > Option 1
</label">
<label for="radio2">
  <input type="radio" id="radio2" name="radio_button_group" value="value_to_pass"> Option 2
</label>
<label for="radio3">
  <input type="radio" id="radio3" name="radio_button_group" value="value_to_pass"> Option 3
</label>

By specifying the same name for `name`, they are recognized as a group of radio buttons, and exclusive control is applied.
Setting `value` is essential to catch which value is selected for exclusive control.
Specifying "checked" sets it as the initial value.

Checkboxes


<!-- Set up 2 checkboxes and their respective labels to the right -->
<fieldset>
  <legend>Please check all that apply</legend>
  <div>
    <input type="checkbox" id="a" name="ex-checkbox" value="a" />
    <label for="a">Option-A</label>
  </div>
 <div>
    <input type="checkbox" id="b" name="ex-checkbox" value="b" />
    <label for="b">Option-B</label>
  </div>
</fieldset>

To group the checkbox's <input> and the item name's <label>, set the same value for the <input>'s id and the <label>'s for.
Set the same value for the <input>'s name to group multiple checkboxes.
<fieldset> and <div> are included for user readability and are not mandatory elements.
Including these elements will arrange them vertically instead of horizontally.


<!-- Have the user read the terms and conditions and place a confirmation checkbox (required input) -->
<!-- Link to the terms and conditions -->
<label for="terms">
  <input class="inline" id="terms" type="checkbox" required name="terms" /> I agree to <a href="URL" /">these terms</a>
</label>

It works without <label> but expanding the selectable area improves usability and SEO.
By making the `for` attribute of `` and the `id` attribute of `` the same, they are recognized as related elements.
The `name` attribute of `` specifies the name of the data sent to the server when the form is submitted.

Dropdown
To make it a required input, set <select required>.
To set an initial value, set <option selected>.


<label　for="feelig">How are you feeling today?
  <select id="feeling">
    <option value="" selected>(Please select one)</option>
    <option value="1">Great</option>
    <option value="2">As usual</option>
    <option value="3">Not bad</option>
    <option value="4">Not good</option>
  </select>
</label>

By making the `for` attribute of `` and the `id` attribute of `` the same, the label and dropdown become a set.

Textarea
Unlike <input type="text">, it allows multiple lines of input.


<label for="bio">
  <textarea id="bio" rows="3" cols="30" placeholder="Free text"></textarea>
</label>

rows: Specifies the number of visible text lines.
cols: Specifies the visible width of the text area.
placeholder: The content to be displayed in the text area until the user starts typing.
By making the `for` attribute of `` and the `id` attribute of `<textarea>` the same, the label and textarea become a set.

button

Button element
While it's possible to give `

`, ``, or `` a button-like appearance and JavaScript functionality,
using `` clearly communicates its purpose to browsers and assistive technologies like screen readers, improving accessibility. 

-- When placing a button element inside a form
<form action="/submit" method="post">
  <button type="submit">Button Name</button>
</form>


-- When placing a button element outside a form
<form id="myform" action="/submit" method="post">
  -- other elements
</form>
<button type="submit" form="myform">Button Name</button>
type Behavior
submit Default
Submits form data to the server
= Does not cause a page transition for form submission
reset Resets form input to initial values
button Has no default behavior
Used to define custom behavior with JavaScript, etc.

The `<button>` element is implicitly associated with the `<form>` element it is placed within.
Therefore, when the `<button>` element is directly written inside the `<form>` tag, there is no need to specify the `form` attribute.
Conversely, when the `<button>` element is written outside the `<form>` tag, it is necessary to associate it with the `<form>` element using the `form` attribute.
→ The `form` attribute enhances HTML flexibility and helps to achieve more complex form layouts and structures.

fieldset

Used to group related controls within a form.
It visually separates groups and logically organizes related inputs, making the form structure easier to understand.


  <fieldset>
    <legend>Contact Information</legend>
    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="user_phone">
    <label for="address">Address:</label>
    <textarea id="address" name="user_address"></textarea>
  </fieldset>
legend

<legend> describes a caption for the content within the <fieldset> element.
= Defines a caption to describe the content of the <fieldset> element.

The <legend> element must be placed as the first child element of the <fieldset> element.


<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="user_name">
  <label for="email">Email Address:</label>
  <input type="email" id="email" name="user_email">
</fieldset>

Reusing Web Page Articles

When reusing content from a web page, such as a blog or news article that is self-contained, use <section> and <article>.
These are used to clarify the page structure and correctly convey the web page's structure to search engines.
→ Introduced in HTML 5.0, they contribute to SEO.

<section><article>Article Content</article></section>

Citing part of a text from other sites or literature

Used to indicate that the original text is quoted verbatim, and to let search engines know it's not copied text.
Used to clarify the page structure and correctly convey the web page's structure to search engines.
→ Introduced in HTML 5.0, they contribute to SEO.


<blockquote cite="Quoted URL">
  <p">Quoted Text</p">
</blockquote>

Adding side notes

An element for displaying supplementary information not directly related to the main content of the HTML document.
Used for sidebars, annotations, quotes, and columns.


<aside>
  <p">Content to be added as a side note</p">
</aside>

Description List

A list of terms and their descriptions.

<dl>
  <dt>Beast of Bodmin</dt>
  <dd>A large feline inhabiting Bodmin Moor.</dd>

<dt>Morgawr</dt>
<dd>A sea serpent.</dd>


<dt>Owlman</dt>
<dd>A giant owl-like creature.</dd>
</dl>

Embedding JavaScript into Web Pages

To ensure JavaScript executes after HTML is loaded, place <script> before </body>.

1. Directly writing JavaScript in HTML


</body>
<script>
  // Write JavaScript code here
  console.log("Hello World"); // Displayed in the developer tools console tab
</script>

2. Writing in a JavaScript file


<script src="./script.js"></script>
</body>

<footer>

Used to define the footer for a document or section.
Footers typically contain information about the author, copyright data, links to terms of use, contact information, etc.
Placement: Below <main>
Usage: `<footer>Items to include in the footer</footer>`

If you want to include author contact information, enclose the contact information in <addressr>.

Setting Shortcuts

By specifying the `accesskey` attribute for each element, a shortcut is set.


<footer>
<!-- Set "s" as the shortcut for the save button -->
<button type="submit" accesskey="s">Save</button>

Making Content Recognizable by Screen Readers

Setting the `aria-hidden` attribute to `true` hides the page content from assistive technologies like screen readers.

(Example) `<div id="years" aria-hidden="true"></div>`

By defining the content of an element with the `aria-label` attribute, screen readers can recognize the content of the element.

(Example)　`<button aria-label="Search"></button>`

Hiding Content from Screen Readers

Specifying the `role` attribute clarifies the meaning of HTML elements, allowing assistive technologies like screen readers to accurately understand the page content.
This enables various users, including those with visual or hearing impairments, to use websites more comfortably.
WAI (Web Accessibility Initiative) recommends assigning a `region` role to each section element.

`<section role="region"></section>`

Escape Sequences (Special Characters)

HTML has various escape sequences (special characters).
Typical ones are shown below, but if they don't display correctly, look them up as needed.

Symbol Name Character to display Special Character
Less than < &lt;
Greater than > &gt;
Ampersand & &amp;
Double quotation mark " &quot;
Apostrophe ' &apos;
Space &nbsp;
Half-width space (1 character)  
Full-width space (1 character) 　 &emsp;

(Note) About spaces
You can input half-width/full-width spaces with the space key, but if you enter two or more half-width spaces, only one will be reflected.
Also, while full-width spaces allow indentation according to the number of characters entered, you should absolutely not use them for layout adjustment.
Always adjust the layout with CSS.

HTML Templates

In dynamic websites, an HTML template is a mechanism that defines the structure and common design elements of a web page, then embeds dynamic data into it to generate the final HTML.
Many programming languages and web frameworks utilize template engines for dynamic content generation and display.

Advantages of using HTML templates:
・Separation of presentation logic and application logic
　→ Separates HTML design (appearance) from data processing code (like Python), making development and maintenance easier.
・Designers and programmers can focus on their respective specialties.
・Improved code reusability
　→ Common layouts (headers, footers, navigation, etc.) can be defined as templates and reused across multiple pages.
・Increased development efficiency
　→ By templating repetitive HTML structures, developers can focus on generating dynamic content.
・HTML becomes more structured and readability improves.

Pagination Functionality

A mechanism in websites and applications for dividing large amounts of content into multiple pages for display.
Commonly seen in search results, product listings, blog post lists, comment lists, etc.
Actual code examples are described in Python.

12. References

GeeksforGeeks
mdn web docs
ProEngineer
W3CSchools

Learning is so fun! (Yuka Koshiba)

⚠️ **GitHub.com Fallback** ⚠️