This page gives a very basic, practical introduction to HTML.
HTML is a very simple markup language. Here's a example. Save the following text in a file, name it sample.html, then open the file in a browser.
<!DOCTYPE HTML> <html> <head> <title>Sample HTML</title> </head> <body> <h1>Sample HTML</h1> <p>Earth is round!</p> </body> </html>
Basically, text are enclosed by tags. For example, in the above,
the <html>…</html> wraps around the whole file indicating that the whole file is a HTML file.
The <head>…</head> contains some meta info about the file. The
<title>…</title> gives the title of the file.
What's between <body> and </body> are the content of the file.
The <h1>…</h1> is the header of the content. The <p> is a paragraph.
Each of the <…> is called a tag.
The opening and closing tag together is called a element. ⁖ <p>…</p> is called the “p element”.
HTML is extremely simple.
Here's some of the most commonly used elements.
<h1>“h1” is for header.</h1> <h2>“h2” is for subsection header. Then, there's “h3”, “h4”, …, up to “h6”.</h2> <p>“p” is for paragraph.<br /> The “br” is for line break inside paragraph. Text can be marked bold by “b” tag, like this: <b>to boldly go …</b>. There's also “i” for <i>making text slanted/italicized</i>. </p> <pre class="xyz"> “pre” is for text formatted with linebreaks usually for computer code or poetry </pre> <div> inline image is done like this: <img src="‹image file path or URL›" alt="short description of image for blind" /> </div> <div>“div” is a general markup for a block of text. It is similar to “p”. “div” is usually used to group other elements inside.</div> <p><span class="abc">“span” is a general markup for inline text. Similar to the bold tag “b”</span></p> <ul> <li>“ul” and “li” is for a list of unordered items.</li> <li>If you want a list of ordered items, use “ol” instead of “ul”.</li> </ul>
For a complete list of elements, see: HTML5 Tags.
Each element may have “attributes”.
Attributes are name/value pairs.
The syntax for attributes is like this: <p ‹name›="‹value›">…</p>.
What attributed are allowed for each elements depends on the element.
Here's two of the most important attributes, can be used on any element:
<p class="xyz">“class” is for mark a element so that it can be used with CSS to control it's rendering/format.</p> <p id="x34">“id” is used to mark a element. ID value must be unique per HTML page. It is used by CSS or JavaScript to uniquely identify a element to control it's appearance or behavior.</p>
See also: Case Sensitivity in HTML5/XML/CSS/Javascript and Allowed Characters in Attribute Names.
There are many versions of HTML and XHTML, and it is really a mess. If you are creating new pages, not maintaining old websites, i recommend HTML5. Put the following line at the beginning of your file.
<!DOCTYPE HTML>
See: HTML5 Tags.