HTML- Hypertext Markup Language.
HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, etc. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.
Let’s talk about the web, The web is this fast network of connected computers, and as of now there literally more than a billion website available on public.
So what is the web exactly? well it’s a bunch of connected computers that have websites and spitting out a website, we call that computer a server because it’s serving the website. A website is written using three languages. HTML, for marking up the website content. CSS,for styling it. and JavaScript for making it interactive.
Example of HTML Format and Tag
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>All about rabbits!!</title>
</head>
<body>
<h1>All about rabbits!</h1>
<h2>Basic info</h2>
<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.</p>
<h2>Songs</h2>
<p>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>
</body>
</html>
All about rabbits!
Basic info
Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.
Songs
Little Bunny Foo Foo,
I don’t want to see you
scooping up the field mice
and bopping them on the head!
HTML Tags:
The contents of an HTML tag are the stuff that goes between the opening and closing tags – this is what we mean when we say “inside” a tag. The contents of a tag can be normal text or a mix of other tags.
Example p tag : <p> content </p>
The closing tag always comes after the content of the tag – it’s how the browser knows that you want the tag to end.
Any content that is visible on your web page should go between the opening <body> tag and the closing </body> tag.
The <h1> and <p> tags are the contents of the <body> tag.
Basic HTML
| Tag | Description |
|---|---|
| <!DOCTYPE> | Defines the document type |
| <html> | Defines an HTML document |
| <head> | Defines information about the document |
| <title> | Defines a title for the document |
| <body> | Defines the document’s body |
| <h1> to <h6> | Defines HTML headings |
| <p> | Defines a paragraph |
| <br> | Inserts a single line break |
| <hr> | Defines a thematic change in the content |
| <!–…–> | Defines a comment |
Formatting
| Tag | Description |
|---|---|
| <acronym> | Not supported in HTML5. Use <abbr> instead. Defines an acronym |
| <abbr> | Defines an abbreviation or an acronym |
| <address> | Defines contact information for the author/owner of a document/article |
| <b> | Defines bold text |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Not supported in HTML5. Use CSS instead. Defines big text |
| <blockquote> | Defines a section that is quoted from another source |
| <center> | Not supported in HTML5. Use CSS instead. Defines centered text |
| <cite> | Defines the title of a work |
| <code> | Defines a piece of computer code |
| <del> | Defines text that has been deleted from a document |
| <dfn> | Represents the defining instance of a term |
| <em> | Defines emphasized text |
| <font> | Not supported in HTML5. Use CSS instead. Defines font, color, and size for text |
| <i> | Defines a part of text in an alternate voice or mood |
| <ins> | Defines a text that has been inserted into a document |
| <kbd> | Defines keyboard input |
| <mark> | Defines marked/highlighted text |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <small> | Defines smaller text |
| <strike> | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text |
| <strong> | Defines important text |
| <sub> | Defines subscripted text |
| <sup> | Defines superscripted text |
| <template> | Defines a template |
| <time> | Defines a date/time |
| <tt> | Not supported in HTML5. Use CSS instead. Defines teletype text |
| <u> | Defines text that should be stylistically different from normal text |
| <var> | Defines a variable |
| <wbr> | Defines a possible line-break |
Forms and Input
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <button> | Defines a clickable button |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Frames
| Tag | Description |
|---|---|
| <frame> | Not supported in HTML5. Defines a window (a frame) in a frameset |
| <frameset> | Not supported in HTML5. Defines a set of frames |
| <noframes> | Not supported in HTML5. Defines an alternate content for users that do not support frames |
| <iframe> | Defines an inline frame |
Images
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines a client-side image-map |
| <area> | Defines an area inside an image-map |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content |
| <picture> | Defines a container for multiple image resources |
| <svg> | Defines a container for SVG graphics |
Audio / Video
| Tag | Description |
|---|---|
| <audio> | Defines sound content |
| <source> | Defines multiple media resources for media elements (<video>, <audio> and <picture>) |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <video> | Defines a video or movie |
Links
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
| <link> | Defines the relationship between a document and an external resource (most used to link to style sheets) |
| <nav> | Defines navigation links |
Lists
| Tag | Description |
|---|---|
| <ul> | Defines an unordered list |
| <ol> | Defines an ordered list |
| <li> | Defines a list item |
| <dir> | Not supported in HTML5. Use <ul> instead. Defines a directory list |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <dd> | Defines a description of a term/name in a description list |
Tables
| Tag | Description |
|---|---|
| <table> | Defines a table |
| <caption> | Defines a table caption |
| <th> | Defines a header cell in a table |
| <tr> | Defines a row in a table |
| <td> | Defines a cell in a table |
| <thead> | Groups the header content in a table |
| <tbody> | Groups the body content in a table |
| <tfoot> | Groups the footer content in a table |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
Styles and Semantics
| Tag | Description |
|---|---|
| <style> | Defines style information for a document |
| <div> | Defines a section in a document |
| <span> | Defines a section in a document |
| <header> | Defines a header for a document or section |
| <footer> | Defines a footer for a document or section |
| <main> | Specifies the main content of a document |
| <section> | Defines a section in a document |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| <details> | Defines additional details that the user can view or hide |
| <dialog> | Defines a dialog box or window |
| <summary> | Defines a visible heading for a <details> element |
| <data> | Links the given content with a machine-readable translation |
Meta Info
| Tag | Description |
|---|---|
| <head> | Defines information about the document |
| <meta> | Defines metadata about an HTML document |
| <base> | Specifies the base URL/target for all relative URLs in a document |
| <basefont> | Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document |
Programming
| Tag | Description |
|---|---|
| <script> | Defines a client-side script |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <applet> | Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet |
| <embed> | Defines a container for an external (non-HTML) application |
| <object> | Defines an embedded object |
| <param> | Defines a parameter for an object |
Loading...
Reload document
Open in new tab More HTML tags
Example - HTML lists
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>HTML: Lists</title>
</head>
<body>
<h1>All about rabbits!</h1>
<h2>Why rabbits make great pets</h2>
<ul>
<li>They’re furry!</li>
<li>Great listeners!</li>
<li>Eat all your leftover carrots!</li>
</ul>
<h3>Top 3 most famous rabbits</h3>
<ol>
<li>Bugs bunny</li>
<li>Easter Bunny</li>
<li>Thumper</li>
</ol>
<h2>Basic info</h2>
<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human <em>ever</em> has</strong>.</p>
<h2>Songs</h2>
<p>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>
</body>
</html>
All about rabbits!
Why rabbits make great pets
- They’re furry!
- Great listeners!
- Eat all your leftover carrots!
Top 3 most famous rabbits
- Bugs bunny
- Easter Bunny
- Thumper
Basic info
Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.
Songs
Little Bunny Foo Foo,
I don’t want to see you
scooping up the field mice
and bopping them on the head!
Example HTML - Images
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>HTML: Images</title>
</head>
<body>
<h1>All about rabbits!</h1>
<img src=”https://www.kasandbox.org/programming-images/animals/rabbit.png” alt=”Rabbit with lop ears in barn” width=”203″>
</body>
</html>
All about rabbits!
CSS - Cascading Style Sheets
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS - ID - # - Example
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS: Selecting by id</title>
<style>
h2 {
color: rgb(0, 232, 15);
}
p {
color: rgb(191, 0, 255);
}
#rabbits-song {
background-color: yellow;
}
#rabbits-info-heading {
background-color: purple;
}
</style>
</head>
<body>
<h1>All about rabbits!</h1>
<h2 id=”rabbits-info-heading”>Basic info</h2>
<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human <em>ever</em> has</strong>.</p>
<h2>Songs</h2>
<p id=”rabbits-song”>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>
<img src=”https://www.kasandbox.org/programming-images/animals/rabbit.png” alt=”Rabbit with lop ears in barn” width=”203″>
<h3>Why rabbits make great pets</h3>
<ul>
<li>They’re furry!</li>
<li>Great listeners!</li>
<li>Eat all your leftover carrots!</li>
</ul>
<h3>Top 3 most famous rabbits</h3>
<ol>
<li>Bugs bunny</li>
<li>Easter Bunny</li>
<li>Thumper</li>
</ol>
</body>
</html>
All about rabbits!
Basic info
Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.
Songs
Little Bunny Foo Foo,
I don't want to see you
scooping up the field mice
and bopping them on the head!
Why rabbits make great pets
- They're furry!
- Great listeners!
- Eat all your leftover carrots!
Top 3 most famous rabbits
- Bugs bunny
- Easter Bunny
- Thumper
CSS - CLASS - . dot- Group - Example
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>CSS: Selecting by class</title>
<style>
#rabbits-info-heading {
background-color: purple;
}
.song-lyrics {
background-color: yellow;
}
</style>
</head>
<body>
<h1>All about rabbits!</h1>
<h2 id=”rabbits-info-heading”>Basic info</h2>
<p>Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in <em>our</em> world, and <strong>they reproduce more than any human <em>ever</em> has</strong>.</p>
<h2>Songs</h2>
<p class=”song-lyrics”>Little Bunny Foo Foo, <br>
I don’t want to see you <br>
scooping up the field mice <br>
and bopping them on the head!</p>
<p class=”song-lyrics”>And down came the Good Fairy <br>
And she said <br>
“Little bunny Foo Foo <br>
I don’t like you’re attitude <br>
Scooping up the field mice <br>
And bopping ’em on the head” <br>
</p>
<p class=”song-lyrics”>I’ll give you 3 chances. <br>
Then I’ll turn you into a goon! <br>
The next day…</p>
<img src=”https://www.kasandbox.org/programming-images/animals/rabbit.png” alt=”Rabbit with lop ears in barn” width=”203″>
<h3>Why rabbits make great pets</h3>
<ul>
<li>They’re furry!</li>
<li>Great listeners!</li>
<li>Eat all your leftover carrots!</li>
</ul>
<h3>Top 3 most famous rabbits</h3>
<ol>
<li>Bugs bunny</li>
<li>Easter Bunny</li>
<li>Thumper</li>
</ol>
</body>
</html>
All about rabbits!
Basic info
Rabbits are little creatures with long ears and puffy tails, and they move their nose up and down in an adorable way. They eat the most orange vegetables in our world, and they reproduce more than any human ever has.
Songs
Little Bunny Foo Foo,
I don't want to see you
scooping up the field mice
and bopping them on the head!
And down came the Good Fairy
And she said
"Little bunny Foo Foo
I don't like you're attitude
Scooping up the field mice
And bopping 'em on the head"
I'll give you 3 chances.
Then I'll turn you into a goon!
The next day…
Why rabbits make great pets
- They're furry!
- Great listeners!
- Eat all your leftover carrots!
Top 3 most famous rabbits
- Bugs bunny
- Easter Bunny
- Thumper
English 
简体中文