Most used HTML tags

ipivanov No Comments HTML 38

Таговете са в основата на вашия HTML документ и е от голямо значение кой къде ще приложите, за да бъде вашата страница семантично правилна. Изброените тагове по долу са почти всички, които могат да се включат в играждането на един HTML документ. Към всеки таг са описани задължителнтие атрибути ако има такива.

Structure

html

Пример: Задължителни атрибути:
                   <html>
                        <head>
                            [stuff]
                        </head>
                        <body>
                            [stuff]
                        </body>
                    </html>
За HTML5 не са Задължителни атрибути за този таг.

head

Пример: Задължителни атрибути:
                   <html>
                        <head>
                            <title>Shiny Gongs</title>
                            <link rel="Shortcut Icon" type="image/ico" href="/favicon.ico" />
                            <script src="/script/somescript.js" type="text/javascript"></script>
                        </head>
                        <body>
                            [stuff]
                        </body>
                    </html>
N/A

body

Пример: Задължителни атрибути:
                    <html>
                        <head>
                        </head>
                        <body>
                            [a whole load of stuff]
                        </body>
                    </html>
N/A

div

Пример: Задължителни атрибути:
                   <body>
                        <div id="navigation">
                            [stuff]
                        </div>
                        <div id="content">
                            [stuff]
                        </div>
                    </body>
N/A

span

Пример: Задължителни атрибути:
                    <p>You could apply styles to 
                    <span class="whatever">this text</span> or <span class="whatever">tis thext</span> 
                    using the span tag.</p>
N/A

Meta Information

DOCTYPE

Пример: Задължителни атрибути:
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                    или 
                    <!DOCTYPE html>
N/A

title

Пример: Задължителни атрибути:
                   <html>
                        <head>
                            <title>Shiny Gongs</title>
                        </head>
                        <body>
                            [stuff]
                        </body>
                    </html>
N/A

link

Пример: Задължителни атрибути:
                   <link rel="stylesheet" type="text/css" href="default.css" />
N/A

meta

Пример: Задължителни атрибути:
                 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
                    <meta name="keywords" content="darwin, evolution, natural selection, species, beagle, 1859" />
                    <meta scheme="ISBN"  name="identifier" content="0-14-043205-1" />
content се използва, за да се спесифицира конкретното информационно съдържание.

style

Пример: Задължителни атрибути:
                    <style type="text/css">
                        body {
                            color: red;
                            background-color: yellow;
                            font-size: 80%;
                        }
                        p {
                            line-height: 1.5em;
                        }
                    </style>
type се използва за конкретизиране на съдържанието и то е по често: text/css.

Text

p

Пример: Задължителни атрибути:
                   <p>Big long paragraph thing.</p>
N/A

h1, h2, h3, h4, h5, and h6

Пример: Задължителни атрибути:
                   <h1>The main heading</h1>
                    <h2>A subheading</h2>
                    <p>ra ra ra ra ra</p>
                    <h2>Another subheading</h2>
N/A

strong

Пример: Задължителни атрибути:
                   <p>That's <strong>strong emphasis</strong> ladies and gentlemen.</p>
N/A

em

Пример: Задължителни атрибути:
                   <p>That's <em>emphasis</em> ladies and gentlemen.</p>
N/A

abbr

Пример: Задължителни атрибути:
                   <abbr title="HyperText Markup Language">HTML</abbr>
N/A

acronym

Пример: Задължителни атрибути:
                   <acronym title="Cascading Style Sheets">CSS</acronym>
N/A

address

Пример: Задължителни атрибути:
                    <address>77 HTML Dog Road, Ealing, London</address>
N/A

bdo

Пример: Задължителни атрибути:
                   <p>The output of this <bdo dir="rtl">word</bdo> will actually be "drow".</p>
dir се използва за направление и може да бъде: ltr (left-to-right) или rtl (right-to-left).

blockquote

Пример: Задължителни атрибути:
                   <blockquote cite="http://www.htmldog.com/reference/htmltags/blockquote/">
                        <p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div's.</p>
                        <p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>
                    </blockquote>
N/A

cite

Пример: Задължителни атрибути:
                   <p>And <cite>Bob</cite> said <q>No, I think it's a banana</q>.</p>
N/A

q

Пример: Задължителни атрибути:
                   <p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>
N/A

code

Пример: Задължителни атрибути:
                   <p>You can use the <code>code</code> tag to define computer code.</p>
N/A

ins

Пример: Задължителни атрибути:
                   <p>It really was <ins cite="rarara.html" datetime="20031024">very</ins> good.</p>
N/A

del

Пример: Задължителни атрибути:
                   <p>It really was<del cite="rarara.html" datetime="20031023">n't</del> very good.</p>
N/A

dfn

Пример: Задължителни атрибути:
                   <p><dfn title="Microsoft web browser">Internet Explorer</dfn> is the most popular browser used underwater.</p>
N/A

kbd

Пример: Задължителни атрибути:
                   <p>Type <kbd>www.htmldog.com</kbd> into your browser.</p>
N/A

pre

Пример: Задължителни атрибути:
                   <p>The basic structure of an HTML document:</p>
                    <pre>
                    <code>&lt;html&gt;</code>
                        <code>&lt;head&gt;</code>
                        <code>&lt;/head&gt;</code>
                        <code>&lt;body&gt;</code>
                            <code>[stuff]</code>
                        <code>&lt;/body&gt;</code>
                    <code>&lt;/html&gt; </code>
                    </pre>
N/A

samp

Пример: Задължителни атрибути:
                   <p>If you select the 'champion' option, you will receive the message <samp>The monkey is not a caterpillar</samp>.</p>
N/A

var

Пример: Задължителни атрибути:
                   <code><var>wordcount</var> = 6878;</code>
N/A

br

Пример: Задължителни атрибути:
                   <p>some text ra ra<br />
                    and some more ra ra</p>
N/A

Links

a

Пример: Задължителни атрибути:
                   <p><a href="http://www.htmldog.com">Link to a URI</a></p>
                    <p><a href="#content">Link to a page anchor</a></p>
N/A

base

Пример: Задължителни атрибути:
                    <head>
                        <title>Peppers</title>
                        <base href="http://www.somedomain.com/directory/" />
                    </head>
                    <body>
                        <p><a href="someplace.html">This</a> will actually link to http://www.somedomain.com/directory/someplace.html.</p>
                        <div><img src="someimage.jpg" alt="Some image" /></div>
                        <p> The location of the above image will be actually be http://www.somedomain.com/directory/someimage.jpg.</p>
                    </body>
href се използва за да се спесифицира локацията на базовото URI.

Images and Objects

img

Пример: Задължителни атрибути:
                   <img src="http://www.htmldog.com/images/logo.gif" alt="HTML Dog" />
src се използва за да се определи положението на img файла,
alt се използва за да се спесифицира алтернативния текст, който трябва да се показва ако изображението не се зарди.

area

Пример: Задължителни атрибути:
                   <map id ="atlas">
                        <area shape ="rect" coords ="0,0,115,90" href ="northamerica.html" alt="North America" />
                        <area shape ="poly" coords ="113,39,187,21,180,72,141,77,117,86" href ="europe.html" alt="Europe" />
                        <area shape ="poly" coords ="119,80,162,82,175,102,183,102,175,148,122,146" href ="africa.html" alt="Africa" />
                    </map>
alt се използва да се дефинира алтернативен текст, който трябва да е кратко описание.

map

Пример: Задължителни атрибути:
                   <map id ="atlas">
                        <area shape ="rect" coords ="0,0,115,90" href ="northamerica.html" alt="North America" />
                        <area shape ="poly" coords ="113,39,187,21,180,72,141,77,117,86" href ="europe.html" alt="Europe" />
                        <area shape ="poly" coords ="119,80,162,82,175,102,183,102,175,148,122,146" href ="africa.html" alt="Africa" />
                    </map>
N/A

object

Пример: Задължителни атрибути:
                   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="someplace/swflash.cab" width="200" height="300" id="penguin">
                        <param name="movie" value="flash/penguin.swf" />
                        <param name="quality" value="high" />
                        <img src="images/penguin.jpg" width="200" height="300" alt="Penguin" />
                    </object>
N/A

param

Пример: Задължителни атрибути:
                   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="someplace/swflash.cab" width="200" height="300" id="penguin">
                        <param name="movie" value="flash/penguin.swf" />
                        <param name="quality" value="high" />
                        <img src="images/penguin.jpg" width="200" height="300" alt="Penguin" />
                    </object>
name се използва за референция на елемента.

Lists

ul

Пример: Задължителни атрибути:
                   <ul>
                        <li>This</li>
                        <li>That</li>
                        <li>The other</li>
                    </ul>
N/A

ol

Пример: Задължителни атрибути:
                   <ol>
                        <li>First item</li>
                        <li>Second item</li>
                        <li>Third item</li>
                    </ol>
N/A

li

Пример: Задължителни атрибути:
                   <ul>
                        <li>This</li>
                        <li>That</li>
                        <li>The other</li>
                    </ul>
N/A

dl

Пример: Задължителни атрибути:
                   <dl>
                        <dt>Dog</dt>
                        <dd>A carnivorous mammal of the family Canidae.</dd>
                    </dl>
N/A

dt

Пример: Задължителни атрибути:
                   <dl>
                        <dt>Dog</dt>
                        <dd>A carnivorous mammal of the family Canidae.</dd>
                    </dl>
N/A

dd

Пример: Задължителни атрибути:
                   <dl>
                        <dt>Dog</dt>
                        <dd>A carnivorous mammal of the family Canidae.</dd>
                    </dl>
N/A

Tables

table

Пример: Задължителни атрибути:
                   <table>
                        <tr>
                            <th>Question</th>
                            <th>Answer</th>
                            <th>Correct?</th>
                        </tr>
                        <tr>
                            <td>What is the capital of Burundi?</td>
                            <td>Bujumburra</td>
                            <td>Yes</td>
                        </tr>
                        <tr>
                            <td>What is the capital of France?</td>
                            <td>F</td>
                            <td>Erm... sort of</td>
                        </tr>
                    </table>
N/A

tr

Пример: Задължителни атрибути:
                   <table>
                        <tr>
                            <th>Question</th>
                            <th>Answer</th>
                            <th>Correct?</th>
                        </tr>
                        <tr>
                            <td>What is the capital of Burundi?</td>
                            <td>Bujumburra</td>
                            <td>Yes</td>
                        </tr>
                        <tr>
                            <td>What is the capital of France?</td>
                            <td>F</td>
                            <td>Erm... sort of</td>
                        </tr>
                    </table>
N/A

td

Пример: Задължителни атрибути:
                   <table>
                        <tr>
                            <th>Question</th>
                            <th>Answer</th>
                            <th>Correct?</th>
                        </tr>
                        <tr>
                            <td>What is the capital of Burundi?</td>
                            <td>Bujumburra</td>
                            <td>Yes</td>
                        </tr>
                        <tr>
                            <td>What is the capital of France?</td>
                            <td>F</td>
                            <td>Erm... sort of</td>
                        </tr>
                    </table>
N/A

th

Пример: Задължителни атрибути:
                   <table>
                        <tr>
                            <th>Question</th>
                            <th>Answer</th>
                            <th>Correct?</th>
                        </tr>
                        <tr>
                            <td>What is the capital of Burundi?</td>
                            <td>Bujumburra</td>
                            <td>Yes</td>
                        </tr>
                        <tr>
                            <td>What is the capital of France?</td>
                            <td>F</td>
                            <td>Erm... sort of</td>
                        </tr>
                    </table>
N/A

tbody

Пример: Задължителни атрибути:
                   <table>
                        <thead>
                            <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                <th>Header 3</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td>Footer 1</td>
                                <td>Footer 2</td>
                                <td>Footer 3</td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>Cell data 1</td>
                                <td>Cell data 2</td>
                                <td>Cell data 3</td>
                            </tr>
                            <tr>
                                <td>Cell data 4</td>
                                <td>Cell data 5</td>
                                <td>Cell data 6</td>
                            </tr>
                            <tr>
                                <td>Cell data 7</td>
                                <td>Cell data 8</td>
                                <td>Cell data 9</td>
                            </tr>
                        </tbody>
                    </table>
N/A

tfoot

Пример: Задължителни атрибути:
                   <table>
                        <thead>
                            <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                <th>Header 3</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td>Footer 1</td>
                                <td>Footer 2</td>
                                <td>Footer 3</td>
                            </tr>
                        </tfoot>
                        <tbody>
                            <tr>
                                <td>Cell data 1</td>
                                <td>Cell data 2</td>
                                <td>Cell data 3</td>
                            </tr>
                            <tr>
                                <td>Cell data 4</td>
                                <td>Cell data 5</td>
                                <td>Cell data 6</td>
                            </tr>
                            <tr>
                                <td>Cell data 7</td>
                                <td>Cell data 8</td>
                                <td>Cell data 9</td>
                            </tr>
                        </tbody>
                    </table>
N/A

col

Пример: Задължителни атрибути:
                   <table>
                        <colgroup>
                            <col class="column1" />
                            <col class="column2" />
                            <col class="columns3and4" span="2" />
                        </colgroup>
                        <tr>
                            <th>lime</th>
                            <th>lemon</th>
                            <th>orange</th>
                            <th>blood orange</th>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>7</td>
                            <td>12</td>
                            <td>5</td>
                        </tr>
                        ...
                    </table>
N/A

colgroup

Пример: Задължителни атрибути:
                   <table>
                        <colgroup span="2" class="columns1and2"></colgroup>
                        <tr>
                            <th>lime</th>
                            <th>lemon</th>
                            <th>orange</th>
                            <th>blood orange</th>
                        </tr>
                        <tr>
                            <td>8</td>
                            <td>7</td>
                            <td>12</td>
                            <td>5</td>
                        </tr>
                        ...
                    </table>
N/A

caption

Пример: Задължителни атрибути:
                   <table>
                        <caption>Mushroom sales</caption>
                        ...
                    </table>
N/A

Forms

form

Пример: Задължителни атрибути:
                   <form action="/somedirectory/somformprocessingscript.php" method="post">
                        <div>House number: <input type="text" name="housenumber" /></div>
                        <div>Street: <input type="text" name="street" /></div>
                        <div><input type="submit" /></div>
                    </form>
action се използва за да се спесифицира къде ще се изпраща тази форма.

input

Пример: Задължителни атрибути:
                    <form action="somescript.php" />
                        <p>Do you like pie?</p>
                        <div>yes <input type="radio" name="pie" value="yes" checked="checked" /></div>
                        <div>no <input type="radio" name="pie" value="no" /></div>
                        <div>Your name: <input type="text" name="name" /></div>
                        <div><input type="image" name="submitimage" src="someimage.gif" /></div>
                    </form>
N/A

textarea

Пример: Задължителни атрибути:
                   <form action="somescript.php" />
                        <p>Your address</p>
                        <div><textarea name="address"cols="30" rows="4"></textarea></div>
                        <div><input type="submit" /></div>
                    </form>
rows се използват за да се дефинира броя на редовете,
cols се използва за да се дефинира броя на колоните.

select

Пример: Задължителни атрибути:
                   <select name="dogs">
                        <option>Domestic Dog</option>
                        <option>Arctic Fox</option>
                        <option>Maned Wolf</option>
                        <option>Grey Wolf</option>
                        <option>Red Fox</option>
                        <option>Fennec</option>
                    </select>
N/A

option

Пример: Задължителни атрибути:
                   <select name="dogs">
                        <option>Domestic Dog</option>
                        <option>Arctic Fox</option>
                        <option>Maned Wolf</option>
                        <option>Grey Wolf</option>
                        <option>Red Fox</option>
                        <option>Fennec</option>
                    </select>
N/A

optgroup

Пример: Задължителни атрибути:
                   <select name="catsndogs">
                        <optgroup label="Cats">
                            <option>Tiger</option>
                            <option>Leopard</option>
                            <option>Lynx</option>
                        </optgroup>
                        <optgroup label="Dogs">
                            <option>Grey Wolf</option>
                            <option>Red Fox</option>
                            <option>Fennec</option>
                        </optgroup>
                    </select>
label се използва за да се пресъедини заглавие на съответната група.

button

Пример: Задължителни атрибути:
                   <button>Push my <strong>button</strong> baby</button>
N/A

label

Пример: Задължителни атрибути:
                   <label for="email">Email address</label><input type="text" name="email" id="email" />
N/A

fieldset

Пример: Задължителни атрибути:
                   <fieldset>
                        <div>First name: <input /></div>
                        <div>Surname: <input /></div>
                    </fieldset>
N/A

legend

Пример: Задължителни атрибути:
                   <fieldset>
                        <legend>Name</legend>
                        <div>First name: <input name="firstname" /></div>
                        <div>Surname: <input name="surname" /></div>
                    </fieldset>
N/A

В графата “Задължителни атрибути” ще видите тези атрибути, които трябва да се включат при създаването на определения таг, но това не са всички атрибути, които може да срещнете за същия таг.

Leave a Reply Text

Leave a Reply