HTML

HTML#

Hyber Text Markdown Language is a format that is used to represent information. Mostly it is popular for publishing information in internet, and all that we used to understand as “browser” actually a programs to display HTML in them.

Text format#

There is a set of HTML tags that allows you to format text on a page to look in the particular way or apply special properties to the specific sections of the text.

Description	HTML Tag
Paragraph	`<p>`
Bold	`<b></b>`
Important bold	`<strong></strong>`
Italic	`<i></i>`
Important italic	`<em></em>`
Strikethrough	`<s></s>`
Deleted	`<del></del>`
Underline	`<u></u>`
Inline Code	`<code></code>`
Code Block	`<pre><code>`
Blockquote	`<blockquote></blockquote>`
Headings	`<h1></h1>` to `<h6></h6>`
Line Break	`<br>`
Horizontal Line	`<hr>`
Hyperlink	`<a href=""></a>`
Inserted to tocument	`<ins></ins>`
Style section	`<span></span>`

Check for the more accurate description in the corresponding page.

Lists#

The set of tags that are typically used to create lists in HTML pages is shows in the following table.

HTML Tag	Description	Example Usage
`<ul>`	Unordered list (bulleted list)	`<ul><li>Item</li></ul>`
`<ol>`	Ordered list (numbered list)	`<ol><li>Item</li></ol>`
`<li>`	List item (used inside `<ul>` or `<ol>`)	`<li>Item</li>`
`<dl>`	Description list	`<dl><dt>Term</dt><dd>Def</dd></dl>`
`<dt>`	Term in a description list	`<dt>HTML</dt>`
`<dd>`	Description of the term	`<dd>HyperText Markup Language</dd>`

Check more details in the corresponding page.

The following cell shows an example of the list in HTML.

%%HTML
<ul>
    <li>this</li>
    <li>is</li>
    <li>list</li>
</ul>

this
is
list

Tables#

The table below shows HTML tags that are used for building HTML tables.

HTML Tag	Description	Example Usage
`<table>`	Defines a table	`<table>...</table>`
`<tr>`	Defines a row in the table	`<tr>...</tr>`
`<td>`	Defines a standard cell (table data)	`<td>Data</td>`
`<th>`	Defines a header cell	`<th>Header</th>`
`<thead>`	Groups the header content in a table	`<thead><tr><th>...</th></tr></thead>`
`<tbody>`	Groups the body content in a table	`<tbody><tr><td>...</td></tr></tbody>`
`<tfoot>`	Groups the footer content in a table	`<tfoot><tr><td>...</td></tr></tfoot>`
`<caption>`	Adds a caption or title for the table	`<caption>Table Title</caption>`
`<col>`	Defines column properties	`<col style="width:50%">`
`<colgroup>`	Groups columns to apply styles	`<colgroup><col>...</colgroup>`

See the description with examples in the special page.

The following is a simple example of the table in HTML.

%%HTML
<table>
    <tr>
        <td>row1 cell1</td>
        <td>row1 cell2</td>
    </tr>
    <tr>
        <td>row2 cell1</td>
        <td>row2 cell2</td>
    </tr>
</table>

row1 cell1	row1 cell2
row2 cell1	row2 cell2

SVG#

Scalable Vector Graphics is a way to draw iamges in the HTML documents. The following table shows the most common tags used to create SVG graphics.

SVG Tag	Description	Example
`<svg>`	Root container for SVG graphics	`<svg width="100" height="100">...</svg>`
`<circle>`	Draws a circle	`<circle cx="50" cy="50" r="40" />`
`<rect>`	Draws a rectangle	`<rect x="10" y="10" width="80" height="50" />`
`<line>`	Draws a straight line	`<line x1="0" y1="0" x2="100" y2="100" />`
`<ellipse>`	Draws an ellipse	`<ellipse cx="50" cy="50" rx="30" ry="20" />`
`<polygon>`	Draws a closed shape with multiple points	`<polygon points="50,0 100,100 0,100" />`
`<polyline>`	Draws an open shape with multiple points	`<polyline points="0,0 50,50 100,0" />`
`<path>`	Draws complex shapes with path data	`<path d="M10 10 H 90 V 90 H 10 Z" />`
`<text>`	Adds text within the SVG	`<text x="10" y="50">Hello</text>`

For details on SVG graphics, see the mdn documentation page.

The example in the next cell shows SVG code to create a smile.

%%HTML
<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="yellow" stroke="black" stroke-width="4" />
  <circle cx="70" cy="80" r="10" fill="black" />
  <circle cx="130" cy="80" r="10" fill="black" />
  <path d="M60,130 Q100,170 140,130" stroke="black" stroke-width="5" fill="transparent" />
</svg>