HTML4 HTML5 and XHTML document structure and CSS stylesheet

h0bby1 (56)in #web • 7 years ago (edited)

HTML is a well known format used to display webpage, it's based on SGML specification made by IBM in 1986 to describe markup language definition.

Even if now HTML is used to make web application, with the co called 'web 2.0', originally the format is used to describe documents, with ability to describe enhanced text content, with a flexible layout and meta information used to easily index the content which can be embeded into different sections of the document.

Even if nowday HTML is very popular with advanced features and dynamic scripting from browser, it's important to understand its history as being used to format text content, with definition of language, authors, charset, and structuring of website containing different pages related to each others, and provide the necessary meta informations to easily index the different parts of the content in each pages.

SGML Fundementals

SGML as a markup language define documents structured by markups, each markup has a name and a set of attributes, that are defined by opening a tag, and all the content following the tag will inherit the properties associated with the tag.

The tag can then be closed using the closing tag to delimit the portion of the content that is affected by the markup.

A tag is opened with <tagname attribute1="value"> and is closed with </tagname>.

Tags can be nested within each others like in XML such as

<tag1 attribute1="value">content in tag1 <tag2>content in tag2 </tag2>content in tag1 </tag1>

Which form a hierarchy within the document.

Common attributes are

id="idname" define a unique identifier associated with the tag. Adding #idname at the end of the url will make the browser scroll to the tag on loading.
style="style definition" add the specified style to the tag.
class="classname" associate the specified class with the tag.
title="text" associate a short descrption with the tag. The text wll show in a bubble when the mouse roll over the content.

Each tag can contain either text content, or other tags.

The document must start with a root tag <html> which contain all the tags of the document, and must be closed with </html> to indicate the end of the document.

All format based on SGML must start with a DOCTYPE definition, associated with a Data Type Definition (DTD), defining the different tags and characters that can be used as part of the document speficitation.

Charset

As you probably know, all characters in a text in a computer document are represented as a number. A character table, or charset, is used to transform this number into a character.

By default, a one byte number is used to represent the character, The most basic form of such table is the ASCII table, which is probably the more universal charset, the default charset for HTML4 is ISO-8859-1, which define which character is associated with each of the one byte numbers.

This page show all the valid character with the ASCII charset.

https://www.w3schools.com/charsets/ref_html_ascii.asp

This page show all the valid character with the ISO-8859-1 charset.

https://www.w3schools.com/charsets/ref_html_8859.asp

Other charsets can be used to represent special characters used in different languages.

Additionally, to palliate with the limitation of one byte characters, the unicode standard was made to use 2 bytes instead of one to represent the character.

The inconvenient is that it double the size of text, as 2 bytes is used for each character, so UTF-8 can use the ASCII table for regular character, and use specially marked unicode characters when the ASCII or default one byte charset is not enough.

The default charset for HTML5 is UTF-8.

It's important when editing HTML documents to make sure the charset used by the editor match the charset specified either in the http response header, or in the HTML header's meta tags .

HTML entities

Additionally to the characters defined in the charset, HTML define another way to write a charcter, called HTML entities. They are encoded such as &marker`;'.

Some example of HTML entities

*apostrophe can be marked as '

quote as "
coma as &coma;
'<' as <
'>' as >
' ' as   as non breaking space.

Other entities are defined there

https://www.w3schools.com/html/html_entities.asp

The DTD associated with the document define all the entities that will be recognized inside of the document.

CDATA

Some part of the document might need to contain some form of raw text or data that shouldn't be interpreted by the browser as html. Such content might be scripts, or other data that can contain characters that has be to differentiated from HTML markups.

CDATA blocks can be used for such purpose as :

<![CDATA[ Raw text content ]]>

HTML versions

There are essentially 3 versions of the HTML format commonly used

HTML4

HTML4 is what can be called vanilla HTML, it's made to be a leniant form of SGML that can easily be parsed by web browser with loose interpretation of SGML standard, and able to use browser specific tags and objects specific to each browser.

A well formed HTML4 document must start with this line :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> meta informations </head>
<body> content </body>
</html>

the url http://www.w3.org/TR/html4/strict.dtd give the address of the data type definition.

Meta informations

<title> page title </title> , the page title is the name that will appear in the browser window, and also be used to identify the page .

The meta tag can be used to specify some information about the document, or emulate specific http response header. In HTML4, they don't have to be closed.

charset <meta charset="utf-8"> specify the charset used in the document text content.
application-name <meta name="application-name" content="application name "> specify application name.
author <meta name="author" content=" author name "> specify document author.
description <meta name="description" content=" description "> specify a short description of the document.
keywords <meta name="keywords" content=" word1,word2 "> specify a coma separated list of keywords associated with the document.

Meta tags with http-equiv attribute can be used to override the value of HTTP response headers, which can affect the description of the document.

I explain the HTTP protocol response header in this post

https://steemit.com/programming/@h0bby1/http-protocol-and-servers-for-web-application-developpers-beginners

content-type <meta http-equiv="content-type" content=" text/html; charset=UTF-8 "> override HTTP content type.
cache control <meta http-equiv="cache-control" content="max-age= max cache age "> override HTTP cache control.
refresh <meta http-equiv="refresh" content=" refresh after X seconds ;URL=" new location"> override HTTP redirect.

External resources

Additionally to meta informations, the HTML<head> tag can contain tags to include or define stylesheets and scripts.

The <script >tag can be used to include additional script from external file.

<script src="/path/script.js" type="text/javascript" >

Scripts can also be inlined inside of the body or head

<script type="text/javascript" >
script code
</script>

When inlined, the content of <script> tag is considered as CDATA block, and will not be parsed as HTML content.

The <link > tag can be used to add hyperlinks into the head of the document, which can be used for various purpose, most often to load a page icon or a stylesheet that will be applied to tags in the document.

<link rel="stylesheet" type="text/css" href="/path/style.css" type="text/css" >

Or icons like to display the page icon in the tabs or page preview

<link rel="icon" type="image/png" href="path/to/file.png" type="image/png" >

Style definition can also be inlined inside of the document

<style>
style definition
</style>

When inlined, the content of <style> tag is considered as CDATA block, and will not be parsed as HTML content.

HTML5

HTML5 is a more recent standard that is all together very loosely defined, it parted away from SGML in order to accomodate the rapid evolution of web browser and increasing needs for flexibility in definition of webpages, and embed more built in multi media object such as <audio> or <video>, and other tags to improve document structuring with meta informations.

It's designed to take full advantage of Document Object Model (DOM) as ability for modern browser to treat tags as objects, and is made for extensive use of dynamically scripted pages.

<!DOCTYPE html>
<html lang="en">
<head> meta informations </head>
<body> content </body>
</html>

HTML5 added the viewport meta, allowing to make styles that are selected according to the width of the device's viewport.

viewport <meta name="viewport" content="width=device-width, initial-scale=1.0" > will set the document's style width to the device width and initial viewport sale to 1.0 (original scale).

Albeit HTML5 allow more features, it's also considered rather experimental, and leave many interpretation of the markup up to the browser.

The head format is the same than HTML4, even if HTML5 allow <meta> to appear anywhere in the page and not only in the header.

Basically HTML5 allow pretty much anything as being HTML5 document, but the result might vary more between browser.

XHTML

XHTML is a standard that appeared after hTML4, it's based on HTML4 markup, but has strict compliance with XML standard.

Noticeable difference with HTML4 is that all non empty tags must be closed in the same tag than where they are opened, tag name and attribute name must be lower case, and technically an XHTML document can be parsed just like an XML document.

A well formed XHTML document must start with :

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> meta informations</head>
<body> content </body>
</html>

Stylesheet within an XHTML document can be defined with <?xml-stylesheet ?> at the beginning of the document.

<?xml-stylesheet href="/path/to/file.css" title="title" type="text/css" ?>

Or inlned style tag can be used with its id declared as a style using

<?xml-stylesheet href="#s1" type="text/css" ?>

<style id="s1"> styles definition </style>

Metas and headers information are the same than HTML4, except the tag meta must be self enclosed such as

<meta name="" content=""/>
<meta http-equiv="" content="" />

As with other tags, when using <script> or <link> in XHTML documents it must self closed with

<script src="" type="" ></script>
<link rel="" type="" href=""/>

And the charset should be defined using <?xml version="1.0" encoding="UTF-8"?> at the beginning of the document.

XHTML is more used for the publication of formal document, where a strict parsing of the document is required.

HTML4 and HTML5 leave lot open to client browser interpretation, and allow more lenient definition of tags such as it can leave it up to the browser how those tags will affect which part of the content.

HTML5 isn't even associated with a DTD.

Stylesheets

Style sheets are used to associate a style definition to an HTML tag.

They can be defined in an external css file and included in the page header as shown above, or defined inline using the <style> tag.

A tag can also have a style attribute to specify a style inside of the tag itself.

A style is a set of key-value pairs, separated by a semi colon, that define the different properties of the element's style.

A style definition is a class, which may be prefixed by a character to specify which tags it will be matched with.

If the style name is prefixed with a dot, such as '.StyleName { key : value; } ' , all tags which class attribute's value match style name will be associated with the style.
If the style name is prefixed with a sharp, such as '#StyleName { key : value; }' , the tag which id attribute's value match style name will be associated with the style.
If the style name is not prefixed such as 'StyleName { key : value; }' , the tags which name match style name will be associated with the style.
If a style declaration is followed by a space and another style declaration such as 'StyleName SubStyleName{ key : value; }' , the tags which name match the second style name inside of the tags matched by the first style name will be associated with the style.
If a style declaration is followed by a colon, such as 'StyleName:property { key : value; }', the style will apply only if the element is in a certain state. 'StyleName:hover { key : value; }' will apply when mouse pass over a link. 'StyleName:visited { key : value; }' will apply when a link has being visited, to mark links that has already been clicked on. A transition key in the style can be used for smooth transition of the value .

For example, with the following css file Included in an HTML document

.red-color
{
color:red;
}

#tag-id
{
color:green;
}

a
{
font-weight:bold;
}

.menu a
{
color:blue;
}

.menu a:hover
{
color:green;
}

Text inside of tags with <tag class="red-color"> text</tag> will have red color.
Text inside of tags with <tag id="tag-id"> text</tag> will have green color.
Text inside of all <a> tags as <a>text </a> will have bold font.
Text inside of all <a> tags inside of a tag with class attribute's value menu as <div class="menu"><a>text </a></div> will have blue color, and green color when the mouse roll over it.

@media can be used to select a style definition based on view port properties, associated with the HTML5's viewport meta.

@media only screen and (max-width: 500px) {

Style
{

}

}

Styles can affect different aspect of the tag, either the style of the text it contain, it's positioning, display, alignment, border, margin and padding, background etc

The style associated with the tag will affect all the content that come after it, until the tag is closed or another tag set the style property at the same level of the document.

Color definition

Color in css can be represented in 3 manners.

rgb(red,green,blue)
hexcode with prefix #, where each number represent reg green and blue value, such #F00 for red, #0F0 for green.
color name in a set of valid HTML color name.

Text style

style key	values	description	example
color	color code	color of text inside of the tag	`color:#FFF;`
font-size	size px	size of the font in pixel	font-size:12px;
font-size	size em	size of the font relative to the parent tag's font size	font-size:1.2em;
font-weight	lighter light bold bolder	weight of the font	font-weight:bold;
font-familly	font name	name of the font used for the text	font-familly:Arial;
text decoration	line-through underline overline	Add line under, over, or throught the text	text-decoration:underline;
text-shadow	Horizontal-sizepx Vertical-sizepx color code	cast a shadow around the text	`text-shadow : 3px 2px #000;`

Display style

style key	values	description	example
display	none	hide the tag	display:none;
display	block	display the tag as block. it mean it will display on begin of the line, and alone on the line.	display:none;
display	inline	display the tag as inline. it mean it will display on the same line as previous content or tag, following alignment	display:inline;
display	inline-block	display the tag as inline, following alignment, but with fixed extents as a block	display:inline-block;
display	table-cell	display the tag as a table cell, usefull for vertical align property.	display:table-cell;
visibility	hidden	hide the tag content	visibility:hidden;
visibility	visible	show the tag content	visibility:visible;

Position and size

style key	values	description	example
width	size px	width of the tag in pixel.	width:24px;
width	size %	width of the tag in % of the parent's tag width.	width:50%;
height	size px	height of the tag in pixel.	height:24px;
height	size %	height of the tag in % of the parent's tag height.	height:50%;
position	static	display the tag as it appear in the dcument flow	position:static;
position	relative	display the tag with position relative to parent's tag	position:relative;
position	fixed	display the tag with a fixed position relative to viewport. (ignore scrolling)	position:static;
position	absolute	display the tag with position absolute in the viewport, and overlapping other tags at the same position.	position:absolute;
top\|left\|bottom\|right	position px.	position of the tag.	top:12px;left:8px;
overflow	visible \|hidden\|scroll	specify how the browser will deal with content that overflow the tag's specified size. _hidden_ will crop the content to the tag's size _scroll_ will add a scroll bar to scroll wihtin the tag. overflow-x and overflow-y can be used to apply only to horizontal or vertical overflow.	overflow:hidden;

Alignment

Only apply to inline tags.

style key	values	description	example
text-align	left center right	define horizontal alignment of the text.	text-align:center;
vertical-align	top middle baseline bottom	define vertical alignment of the text. Only works within tag with table-cell display.	vertical-align:top;
float	left\|right\|middle	float the tag in the given direction.	float:left;
clear	none\|left\|right\|both	Clear the float style of previous tags..	clear:both;

Borders margin and padding

style key	values	description	example
border	size px solid\|dashed\|dotted\|double color code	style, size and color of the border	`border:1px solid #000;`
border-radius	size px	size of rounded corder of the border	border-radius:4px;
box-shadow	[inset] horizontal size px vertical size px shadow size px color	Display a shadow outside of the tag, or inside if the inset property is present	box-shadow:4px 4px 4px #000;
padding	top px left px bottom px right px	size of space inside the tag around the content	padding:4px 8px 4px 8px;
margin	top px left px bottom px right px	size of space around the tag	margin:4px 8px 4px 8px;

All those styles can be suffixed with -top -left -right -bottom for them to only applie to one side of the tag. Such as

border-bottom:1px solid #000;
padding-top:8px;

Background

style key	values	description	example
background-color	color code	color of the tag's background	`background-color:#000;`
background	image URL, [no-repeat\|repeat-x\|repeat-y]	background image of the tag	background:url(/path/to/image.png no-repeat;
opacity	0.0 - 1.0	opacity of the tag background and content	opacity:0.4;

List style

Apply to <ul> tag.

style key	values	description	example
list-style	squared\|circle\|url inside\|outside	style of list element bullets	list-style:squared inside;
list-style-image	url('image.gif')	image used for list element bullets	list-style-image:url('image.gif');

Document content

Unlike other format of document that are made to be printed on paper of fixed size, HTML is made to adapt to any display device, and positioning of element is not mainly made using absolute coordinate on the viewport, but by dividing the space of the viewport in blocks, associated with styles that define the layout of the content inside.

There are essentially different types of element to define HTML document

Iframes

IFrames can be used to embeded a whole new document inside of one document.

HTML code embeded into an iframe must contain its own head, body and is considered as a whole another document.

The target attribute of links or formular can be set to the value of id and name attributes of an iframe tag to load the new content inside of the iframe instead of reloading the current browser window.

In old websites, iframes were often used to have the menu links in the main page, and loading the content in an iframe using the link's target attribute.

The src attribute of the <iframe> tag can be used to load an external HTML document inside of it.

Blocks

Block elements are used as subdivision of the viewport. They generally start at the beginning of the line in the parent block.

<div>content</div> is the base block element. It's used to defined a subspace into the page.

<p>text</p>is used to make a paragraph.

<blockquote cite="http://address of the source">content</blockquote> can be used to indicate the quoting of a reference text inside of the document.

Typically blocks element will define a subspace of delimited extents and position containing text elements inside of inline tags .

Inline

Inline element are used to apply specific style to inlined text content without affecting their positionning.

<span>text</span> can be used as the basic inline tag.

<a href="url">text</a>is a link, and is also an inline element. The attribute target can be set to _blank to load the link in a new window, or to the value of id and name attributes of an iframe to load the content in an iframe.

The way the url is formatted into a link may have some importance for how browser and content indexing will consider the link.

absolute url start with http://domain.com/path/to/page.html. If the link target a page of the same site or domain, it's not recommanded to use absolute url because browser or indexers will consider the link as being external link, and it might affect how the browser cache the file too.
root URL start with a '/' as /path/to/page.html and indicate a link to the same domain, but different unrelated sites could be hosted on the same domain, so if the link point to a document that is related to the curent page, it's better to use relative url.
relative url doesn't start with / or http://, and will link to a path relative to the current location. For example if a page is located at the address /path/to/page.html , href="subdir/page2.html" will link to /path/to/subdir/page2.html , and href="../page2.html" will link to /path/page2.html .

When the link target a page of the same website, it's generally better to use relative links, as it will make it clear for the indexer and browser that the target document is part of the same website.

<ins>text</ins> can be used to mention an insertion from original document.

<del>text</del> can be used to mention a deletion from original document.

<br/> can be used to insert a line break inside of a block.

Lists

List elements are used to display content as a set of block in a list .

Unordered list

<ul>
<li>List element 1</li>
<li>List element 2</li>
</ul>

List element 1
List element 2

Ordered list

<ol>
<li>List element 1</li>
<li>List element 2</li>
</ol>

List element 1
List element 2

Definition List

<dl>
<dt>Term1</dt>
<dd>Term1 definition</dd>
<dt>Term2</dt>
<dd>Term2 definition</dd>
</dl>

Tables

Table elements are used to display content in a grid of row and colums, all the cell of the same columns are aligned with the other cells in the same column.

A table generally contain

a head, which is displayed as the first row used to give a description of the content in each column.
one or several bodies that contain the rows of the actual content.
a footer displayed as the last row of the table.

A table is opened with the tag <table>, the head of the table is delimited by <thead></thead>, a body of the table is delimited by <tbody></tbody>, the footer of the table is delimited by <tfoot></tfoot>.

Each of the header, body and footer are composed by rows, the header and footer may contain only one row.

A row is inserted with the tag <tr>, and cells are inserted in a row using <th> for header cells, or <td> for body cells.

All rows of the same table must contain the same number of column, even if a cell can be made to use the space of several cells from other rows using the attribute colpan= number of cells.

<table>
<thead>
<tr> <th>column1</th> <th>column2</th> </tr>
</thead>

<tbody>
<tr> <td>element1 </td> <td>element2</td> </tr>
<tr> <td>element1 </td> <td>element2</td> </tr>
<tr> <td>element1 </td> <td>element2</td> </tr>
</tbody>

<tfoot>
<tr> <td colspan="2" >footer</td> </tr>
</tfoot>

</table>

column1	column2
row element1	row element2
row element1	row element2
row element1	row element2
footer

Sections

Section elements doesn't affect the layout of the content, but are used by indexer or browser to get more informations about the document.

HTML4

Tags h1-h6 are the base elements used to delimit different section of the documents.

In HTML4 and XHTML, all the content that follow a heading tag is considered as part of the section described in the heading, until another heading of the same level is found.

The first <h1> is generally considered as important for search engine to index the content of the page. Most web page will contain an <h1> tag early in the top banner alongside with the logo. HTML4 is supposed to encourage the use of only one h1 tag to describe the gloal heading of the document.

<hr>tag can also be used to indicate a significant separation in the page content.

<h1>Main heading</h1>
<p>Content part of heading 1 </p>

<h2>Heading 1.1 </h2>
<p>Content part of heading 1.1 </p>

<h2>Heading 1.2 </h2>
<p>Content part of heading 1.2 </p>

<h3>Heading 1.2.1 </h3>
<p>Content part of heading 1.2.1 </p>

<h3>Heading 1.2.2 </h3>
<p>Content part of heading 1.2.2</p>

<h2>Heading 1.3 </h2>
<p>Content part of heading 1.3</p>

Proper using of heading tag is relatively important for search engines.

HTML5

HTML5 changed the way to organize page heading. Instead of having headings global to the whole document, it encourage to divide all part of the document by enclosing them in a <section></section> tags.

Additionally to the heading and <section>, other tags can be used to delimit different section of the page, alongside with <article> to indicate that the content is the actual article, <address>to indicate contact address, <nav>to indicate menu or navigation links.

The heading tags are normally relative to <article></article>, and each section delimited by <article>tags should be standalone and contain their own hierarchy of headings.

Each <section> should begin with an <h1> , and lower important heading tags should also be included in a child <section> tag, instead of heading being global to the whole document.

Objects

Object tags are used to embed multimedia content in the document, using the browser as a proxy for system components.

Such tags include

<img src="/path/to/image.png" alt="image text" title="image" />
<audio src="/path/to/audiofile.mp3" />
<video src="/path/to/videofile.mp4" />

System components such as flash, ActiveX or Mozilla XPCOM plugins can be embeded using the <object data="myfile.swf" type="application/x-shockwave-flash" />

Formulars

Formulars can be used to define a set of user input fields, and how to send the entered data to a server script.

I define the in depth process of formular processing in this post

https://steemit.com/programming/@h0bby1/web-application-programming-in-php-for-beginners-developpers

A formular is started with a <form> tag, contain a set of <input> tags associated with a <label for="input-name"> tag to give a short description of the field, as well as a submit button.

<input> and <label> tags are generally enclosed in a <fieldset> tag, which may start with a <legend> Form description</legend> tag.

Each <input>tag should contain a name attribute that will correspond to a variable name in the server script, as well as a type attribute to specify the type of the input, and a value attribute.

The type attribute can be one of those

type="text" specify text input.
type="password" specify masked text input.
type="checkbox" specify a checkbox. The variable in the server script will be set to the content of the value attribute if the box is checked. The attribute checked="checked"_ can be used to precheck the input.
type="radio" specify a multiple choice selection. All the radio input to select between possible value should have the same name attribute, and only one of the radio group can be selected. The value of the variable in the server script will be set to the value of the selected radio button.The attribute checked="checked"_ can be used to precheck the input.
type="file" specify a file input, with a browse button to select a file from the computer. If a file input is present in the formular, the attribute enctype="multipart/form-data" must be present in the opening <form>tag.
type="submit" specify the submit button. The value attribute will specify the text displayed on the button. The form data will be sent to the script specified in the action attribute of the <form> tag when this button is pressed.

<textarea></textarea> tag can be used to specify multiline text input for posting long text such as post on steemit or forums. It should contain also a name attribute to sepcify the target variable for the server script.

A dropdown menu can also be made using the <select>tag, which will contain a number of <option>tags.

The name attribute of the <select> tag specify the name of the variable in the server script.

The value attribute of each of the <option> tag specify the value the variable will take if the option is selected, and the text content enclosed in the <option value="1">text for choice 1 </option> will be the displayed label in the dropdown menu.

The attribute selected="selected" can be used to preselect an <option> tag.

<form action="script.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>my formular</legend>

<label for="mytext">enter a text :</label>
<input type="text" name="mytext" value="default value" />

<label for="mypassword">enter a password :</label>
<input type="password" name="mypassword" value="" />

<label for="mycheckbox">check this box:</label>
<input type="checkbox" name="mycheckbox" value="boxchecked" />

<label for="myfile">select a file:</label>
<input type="file" name="myfile" />

<label for="myradio">select an option:</label>
<input type="radio" name="myradio" value="radio1" > option1</input>
<input type="radio" name="myradio" value="radio2" > option2</input>

<label for="myselect">select an entry:</label>
<select name="myselect">
<option value="option1" selected="selected">text1</option>
<option value="option2">text2</option>
</select>

</fieldset>
</form>