WEB SITE

The relationship between page definition tags, structured tags and div tags

HTML

I got left behind in the HTML transition...

When I moved from Jakarta to Bali in 2000, I spent a lot of time doing physical work such as purchasing and packing for the start-up of the company and exporting furniture and miscellaneous goods, so I was unable to follow the technological transition of the web.

With HTML4.01 in 1999, there was a major shift in direction, with HTML specializing in the definition of structure and leaving decoration to CSS, and the era of HTML tags itself was replaced by the era of style sheets.

/*Write attributes in the HTML tag. The default font size is 3.*/
<font size=5 color="red">

/*Use the font attribute of the stylesheet*/
<font style="font-size:12px; color:red;">

In 2001, when the next generation of XHTML1.1 was released, there was a state of confusion, and the problem of multiple Document Type Definitions and a long description method was encountered, but HTML5, which became the official W3W standard in 2014, will be able to provide the same document type definitions as the The starting point of the DTD is short and it's done.

/*HTML 4.01 Transitional DTD*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

/*XHTML1.1 */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

/*HTML5*/
<!DOCTYPE html>
<html lang="ja">

There are three types of DOCTYPE: Strict, Transitional, and Frameset, and depending on how it is written, the browser will switch between "compatibility mode" and "standards-compliant mode", which will result in a different display state.

Page-defined and structured tags

I bought an IBM PC with Windows 3.1 around 1994 and set up an Indian music site as a hobby, but html, head and body are page definition tags that already existed since then, and the whole thing was divided into a metadata section (information about the HTML document itself) and a content section The information in the head tag is not displayed in the browser.


<html>
    |-<head></head>
    |-<body></body>
</html>

In HTML5, the entire website is divided into five sections: "header area", "navigation area", "content area", "sidebar area" and "footer area", using structured tags (header, nav, article, aside and footer) for content sections defined by page definition tags.


<body>
    |-<header></header>
    |-<nav></nav>
    |-<article></article>
    |-<aside></aside>
    |-<footer></footer>
</body>

Basically, the semantics of the content are defined by the ID and class attributes of the div tag, but major items like headers and navigation should be standardized in HTML5 tags.

Layout with CSS for the id and class attributes of the div tag

After defining the skeleton with page tags and structured tags, you define id and class attributes with div tags and arrange the layout using CSS.

Since the CSS2.1 specification was finalized around 1999, CSS has only added features until CSS3, so it does not change the way it is displayed like HTML.

There are no naming rules for the id attribute and class names, but it is common practice to use as following.

  1. Place a container directly under the body and enclose the entire content from header to footer
  2. Wrapping the header, nav and aside with the wrapper

 

html

body

container

header-wrapper

left

Why enclose a block element with a wrapper again?

The two main things to keep in mind when designing a website are "readability" and "look and feel", but if the text is spread out to the full width of the browser, it's hard to read, and if the whole thing is tightened up from both sides, it gives the impression of being cramped.

Like this blog theme, almost all modern responsive themes place a background image in the header that fills the width of the browser and place the key visuals in the center of the window for visual impact.

  1. Readability > Space on both sides
  2. How good it looks > Open up the background image to the full width of the browser.

The reason for re-wrapping the header and nav areas with wrappers is to spread the background image to fill the browser to create a sense of openness, and this blog's header area is also done so.

犬たちI also show the latest entry with a thumbnail in the widget section of the site, with the text wrapped to the right.
To achieve this, I set the img tag of the image to "float:left;" and then enclose it as a parent element with a wrapper and release the float with "overflow:hidden". This is exactly how it looks like this.
<div id="wrapper-dog" style="border: 1px, solid, black; overflow:hidden;">
<img src="test_float.jpg" style="float:left; margin-right:10px;"/>
<p>Contents</p>
</div>

© 2020 バテラハイシステム Powered by STINGER