![\"View](\"img_chrome.png\")
"
},
{
"type": "header",
"level": 2,
"text": "HTML Page Structure"
},
{
"type": "paragraph",
"text": "Below is a visualization of an HTML page structure:"
},
{
"type": "note",
"text": "![\"Coding](\"codingtamilan.jpg\")
"
},
{
"type": "header",
"level": 2,
"text": "How to View HTML Source"
},
{
"type": "paragraph",
"text": "Have you ever seen a Web page and wondered \"Hey! How did they do that?\""
},
{
"type": "header",
"level": 3,
"text": "View HTML Source Code:"
},
{
"type": "paragraph",
"text": "Click CTRL + U in an HTML page, or right-click on the page and select \"View Page Source\". This will open a \nnew tab \ncontaining the HTML source code of the page."
},
{
"type": "header",
"level": 3,
"text": "Inspect an HTML Element:"
},
{
"type": "paragraph",
"text": "Right-click on an element (or a blank area), and choose \"Inspect\" to see what elements are made up of (you will see both \nthe HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the \nElements or Styles panel that opens."
}
]
},
"elements": {
"title": "HTML Elements",
"blocks": [
{
"type": "intro",
"text": "An HTML element is defined by a start tag, some content, and an \nend tag."
},
{
"type": "header",
"level": 2,
"text": "HTML Elements"
},
{
"type": "paragraph",
"text": "The HTML element is everything from the start tag to the end tag:"
},
{
"type": "paragraph",
"text": "Examples of some HTML elements:"
},
{
"type": "table",
"headers": [
"Start tag",
"Element content",
"End tag"
],
"rows": [
[
"<h1>",
"My First Heading",
"</h1>"
],
[
"<p>",
"My first paragraph.",
"</p>"
],
[
"<br>",
"none",
"none"
]
]
},
{
"type": "note",
"text": "![\"Girl](\"img_typo.jpg\")
"
},
{
"type": "paragraph",
"text": "You will learn more about images in our At Coding Tamilan we always use quotes around attribute values.
" }, { "type": "header", "level": 2, "text": "Single or Double Quotes?" }, { "type": "paragraph", "text": "Double quotes around attribute values are the most common in HTML, but single \nquotes can also be used." }, { "type": "paragraph", "text": "In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:" }, { "type": "example", "title": "Example", "code": "" }, { "type": "paragraph", "text": "Or vice versa:" }, { "type": "example", "title": "Example", "code": "
"
},
{
"type": "header",
"level": 2,
"text": "Chapter Summary"
},
{
"type": "list",
"ordered": false,
"items": [
"All HTML elements can have attributes",
"The href attribute of \n <a> specifies the URL of the page the link goes to",
"The src attribute of \n <img> specifies the path to the image to be displayed",
"The width and height attributes \n of <img> provide size information for images",
"The alt attribute of \n <img> provides an alternate text for an image",
"The style attribute is used to add styles \n to an element, such as color, font, size, and more",
"The lang attribute \n of the <html> tag declares the \n language of the Web page",
"The title attribute defines some extra \n information about an element"
]
},
{
"type": "header",
"level": 2,
"text": "HTML Attribute Reference"
},
{
"type": "note",
"text": "
A complete list of all attributes for each HTML element, is listed in our:\nHTML Attribute Reference.
" } ] }, "headings": { "title": "HTML Headings", "blocks": [ { "type": "intro", "text": "HTML headings are titles or subtitles that you want to display on a webpage." }, { "type": "header", "level": 2, "text": "HTML Headings" }, { "type": "paragraph", "text": "HTML headings are defined with the<h1> to <h6> tags."
},
{
"type": "paragraph",
"text": "<h1> defines the most important heading. <h6> defines the least important heading."
},
{
"type": "example",
"title": "Example",
"code": "Heading 1
\nHeading 2
\nHeading 3
Heading 4
Heading 5
Heading 6
" }, { "type": "note", "text": "Note: Browsers automatically add some white space (a margin) before and after a heading.
" }, { "type": "header", "level": 2, "text": "Headings Are Important" }, { "type": "paragraph", "text": "Search engines use the headings to index the structure and content of your web pages." }, { "type": "paragraph", "text": "Users often skim a page by its headings. It is important to use headings to show the document structure." }, { "type": "paragraph", "text": "<h1> headings should be used for main headings, followed by <h2> headings, then the less important \n<h3>, and so on."
},
{
"type": "paragraph",
"text": "For example:"
},
{
"type": "list",
"ordered": false,
"items": [
"<h1> - Page title",
"<h2> - Section titles",
"<h3> - Sub-sections"
]
},
{
"type": "example",
"title": "Example",
"code": "Travel Guide
\nEurope
\nFrance
\nItaly
\nAsia
\nIndia
\nThailand
" }, { "type": "note", "text": "Tip: Use only one <h1> per page - it represents the main topic or title.
Note: Use HTML headings for headings only. Don't use headings to make text \n BIG or bold.
" }, { "type": "header", "level": 2, "text": "Bigger Headings" }, { "type": "paragraph", "text": "Each HTML heading has a default size. However, you can specify the size for any heading \nwith thestyle attribute, using the CSS font-size property:"
},
{
"type": "example",
"title": "Example",
"code": "Heading 1
" }, { "type": "header", "level": 2, "text": "HTML Tag Reference" }, { "type": "paragraph", "text": "Coding Tamilan' tag reference contains additional information about these tags and their attributes." }, { "type": "table", "headers": [ "Tag", "Description" ], "rows": [ [ "<html>", "Defines the root of an HTML document" ], [ "<body>", "Defines the document's body" ], [ "<h1> to <h6>", "Defines HTML headings" ] ] }, { "type": "note", "text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
" } ] }, "paragraphs": { "title": "HTML Paragraphs", "blocks": [ { "type": "intro", "text": "A paragraph always starts on a new line, and is usually a block of text." }, { "type": "header", "level": 2, "text": "HTML Paragraphs" }, { "type": "paragraph", "text": "The HTML<p> element defines a paragraph."
},
{
"type": "paragraph",
"text": "A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph."
},
{
"type": "example",
"title": "Example",
"code": "This is a paragraph.
\nThis is another paragraph.
" }, { "type": "header", "level": 2, "text": "HTML Display" }, { "type": "paragraph", "text": "You cannot be sure how HTML will be displayed." }, { "type": "paragraph", "text": "Large or small screens, and resized windows will create different results." }, { "type": "paragraph", "text": "With HTML, you cannot change the display by adding extra spaces or extra lines in your HTML code." }, { "type": "paragraph", "text": "The browser will automatically remove any extra spaces and lines when the page is \ndisplayed:" }, { "type": "example", "title": "Example", "code": "This paragraphcontains a lot of linesin the source code,but \n the browser ignores it.
This paragraphcontains \n a lot of spacesin the source \n code,but the browser ignores \n it.
" }, { "type": "header", "level": 2, "text": "HTML Horizontal Rules" }, { "type": "paragraph", "text": "The<hr> tag defines a thematic break in an HTML page, and is most often \ndisplayed as a horizontal rule."
},
{
"type": "paragraph",
"text": "The <hr> element is used to separate content (or define a change) in an HTML \npage:"
},
{
"type": "example",
"title": "Example",
"code": "This is heading 1
This is some text.
This is heading 2
This is some other text.
" }, { "type": "paragraph", "text": "The
<hr> tag is an empty tag, which means that it has no end tag."
},
{
"type": "header",
"level": 2,
"text": "HTML Line Breaks"
},
{
"type": "paragraph",
"text": "The HTML <br> element defines a line break."
},
{
"type": "paragraph",
"text": "Use <br> if you want a line break (a new line) without starting a new paragraph:"
},
{
"type": "example",
"title": "Example",
"code": "This is
a paragraph
with line breaks.
<br> tag is an empty tag, which means that it has no end tag."
},
{
"type": "header",
"level": 2,
"text": "The Poem Problem"
},
{
"type": "paragraph",
"text": "This poem will display on a single line:"
},
{
"type": "example",
"title": "Example",
"code": "My Bonnie lies over \n the ocean. My Bonnie lies over the sea. My Bonnie \n lies over the ocean. Oh, bring back my Bonnie to me.
" }, { "type": "header", "level": 2, "text": "Solution - The HTML Element"
},
{
"type": "paragraph",
"text": "The HTML <pre> element defines preformatted text."
},
{
"type": "paragraph",
"text": "The text inside a <pre> element is displayed in a fixed-width font (usually \nCourier), and it preserves both spaces and line breaks:"
},
{
"type": "example",
"title": "Example",
"code": " My Bonnie lies over the ocean.\n My Bonnie lies over the sea. My Bonnie lies over the \nocean. Oh, bring back my Bonnie to me.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Tag Reference"
},
{
"type": "paragraph",
"text": "Coding Tamilan' tag reference contains additional information about HTML elements and their attributes."
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<p>",
"Defines a paragraph"
],
[
"<hr>",
"Defines a thematic change in the content"
],
[
"<br>",
"Inserts a single line break"
],
[
"<pre>",
"Defines pre-formatted text"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
}
]
},
"styles": {
"title": "HTML Styles",
"blocks": [
{
"type": "intro",
"text": "The HTML style attribute is used to add styles to an element, such as color, font, size, and more."
},
{
"type": "header",
"level": 2,
"text": "The HTML Style Attribute"
},
{
"type": "paragraph",
"text": "Setting the style of an HTML element, can be done with the style attribute."
},
{
"type": "paragraph",
"text": "The HTML style attribute has the following syntax:"
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "paragraph",
"text": "The property is a CSS property. The value is a CSS value."
},
{
"type": "note",
"text": "You will learn more about CSS later in this tutorial.
"
},
{
"type": "header",
"level": 2,
"text": "Background Color"
},
{
"type": "paragraph",
"text": "The CSS background-color property defines the background color \nfor an HTML element."
},
{
"type": "example",
"title": "Example",
"code": "This is a heading
This is a paragraph.
"
},
{
"type": "example",
"title": "Example",
"code": "This is a heading
This is a paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "Text Color"
},
{
"type": "paragraph",
"text": "The CSS color property defines the text color for \nan HTML element:"
},
{
"type": "example",
"title": "Example",
"code": "This is a heading
\n This is a paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "Fonts"
},
{
"type": "paragraph",
"text": "The CSS font-family property defines the font to be used \nfor an HTML element:"
},
{
"type": "example",
"title": "Example",
"code": "This is a heading
This is a paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "Text Size"
},
{
"type": "paragraph",
"text": "The CSS font-size property defines the text size for \nan HTML element:"
},
{
"type": "example",
"title": "Example",
"code": "This is a heading
This is a paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "Text Alignment"
},
{
"type": "paragraph",
"text": "The CSS text-align property defines the horizontal text alignment for an HTML element:"
},
{
"type": "example",
"title": "Example",
"code": "Centered Heading
\n Centered paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "Chapter Summary"
},
{
"type": "list",
"ordered": false,
"items": [
"Use the style attribute for styling HTML elements",
"Use background-color for background color",
"Use color for text colors",
"Use font-family for text fonts",
"Use font-size for text sizes",
"Use text-align for text alignment"
]
}
]
},
"formatting": {
"title": "HTML Text Formatting",
"blocks": [
{
"type": "intro",
"text": "HTML contains several elements for defining text with a special meaning."
},
{
"type": "header",
"level": 2,
"text": "HTML Formatting Elements"
},
{
"type": "paragraph",
"text": "Formatting elements were designed to display special types of text:"
},
{
"type": "list",
"ordered": false,
"items": [
"<b> - Bold text",
"<strong> - Important text",
"<i> - Italic text",
"<em> - Emphasized text",
"<mark> - Marked text",
"<small> - Smaller text",
"<del> - Deleted text",
"<ins> - Inserted text",
"<sub> - Subscript text",
"<sup> - Superscript text"
]
},
{
"type": "header",
"level": 2,
"text": "HTML and Elements"
},
{
"type": "paragraph",
"text": "The HTML <b> element defines bold text, \nwithout any extra importance."
},
{
"type": "example",
"title": "Example",
"code": "This text is bold"
},
{
"type": "paragraph",
"text": "The HTML <strong> element defines text \nwith strong importance. The content inside is typically displayed in bold."
},
{
"type": "example",
"title": "Example",
"code": "This text is \n important!"
},
{
"type": "header",
"level": 2,
"text": "HTML and Elements"
},
{
"type": "paragraph",
"text": "The HTML <i> element defines a part of \ntext in an alternate voice or mood. The content inside is typically displayed in \nitalic."
},
{
"type": "paragraph",
"text": "Tip: The <i> tag is often used to indicate a technical term, \na phrase from another language, a thought, a ship name, etc."
},
{
"type": "example",
"title": "Example",
"code": "This text is italic"
},
{
"type": "paragraph",
"text": "The HTML <em> element defines \nemphasized text. The content inside is typically displayed in italic."
},
{
"type": "paragraph",
"text": "Tip: A screen reader will pronounce the words in <em> \nwith an emphasis, using verbal stress."
},
{
"type": "example",
"title": "Example",
"code": "This text is \n emphasized"
},
{
"type": "header",
"level": 2,
"text": "HTML Element"
},
{
"type": "paragraph",
"text": "The HTML <small> element defines \nsmaller text:"
},
{
"type": "example",
"title": "Example",
"code": "This is some smaller text."
},
{
"type": "header",
"level": 2,
"text": "HTML Element"
},
{
"type": "paragraph",
"text": "The HTML <mark> element defines text \nthat should be marked or highlighted:"
},
{
"type": "example",
"title": "Example",
"code": "Do not forget to buy milk today.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Element"
},
{
"type": "paragraph",
"text": "The HTML <del> element defines text \nthat has been deleted from a document. Browsers will usually strike a line \nthrough deleted text:"
},
{
"type": "example",
"title": "Example",
"code": "My favorite color is blue red.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Element"
},
{
"type": "paragraph",
"text": "The HTML <ins> element defines a text \nthat has been inserted into a document. Browsers will usually underline inserted \ntext:"
},
{
"type": "example",
"title": "Example",
"code": "My favorite color is blue red.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Element"
},
{
"type": "paragraph",
"text": "The HTML <sub> element defines \nsubscript text. Subscript text appears half a character below the normal line, \nand is sometimes rendered in a smaller font. Subscript text can be used for \nchemical formulas, like H2O:"
},
{
"type": "example",
"title": "Example",
"code": "This \n is subscripted text.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Element"
},
{
"type": "paragraph",
"text": "The HTML <sup> element defines \nsuperscript text. Superscript text appears half a character above the normal \nline, and is sometimes rendered in a smaller font. Superscript text can be used \nfor footnotes, like WWW[1]:"
},
{
"type": "example",
"title": "Example",
"code": "This \n is superscripted text.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Text Formatting Elements"
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<b>",
"Defines bold text"
],
[
"<em>",
"Defines emphasized text "
],
[
"<i>",
"Defines a part of text in an alternate voice or mood"
],
[
"<small>",
"Defines smaller text"
],
[
"<strong>",
"Defines important text"
],
[
"<sub>",
"Defines subscripted text"
],
[
"<sup>",
"Defines superscripted text"
],
[
"<ins>",
"Defines inserted text"
],
[
"<del>",
"Defines deleted text"
],
[
"<mark>",
"Defines marked/highlighted text"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
}
]
},
"quotations": {
"title": "HTML Quotation and Citation Elements",
"blocks": [
{
"type": "intro",
"text": "In this chapter we will go through the \n<blockquote>,<q>, <abbr>, <address>, <cite>, \nand <bdo> HTML elements."
},
{
"type": "header",
"level": 2,
"text": "HTML for Quotations"
},
{
"type": "paragraph",
"text": "The HTML <blockquote> element defines a section that \nis quoted from another source."
},
{
"type": "paragraph",
"text": "Browsers usually indent <blockquote> elements."
},
{
"type": "example",
"title": "Example",
"code": "Here is a quote from WWF's website:
\n For 60 years, WWF has worked to help people and nature thrive. As the world's \n leading conservation organization, WWF works in nearly 100 countries. At every \n level, we collaborate with people around the world to develop and deliver \n innovative solutions that protect communities, wildlife, and the places in \n which they live.
"
},
{
"type": "header",
"level": 2,
"text": "HTML for Short Quotations"
},
{
"type": "paragraph",
"text": "The HTML <q> tag defines a short quotation."
},
{
"type": "paragraph",
"text": "Browsers normally insert quotation marks around the quotation."
},
{
"type": "example",
"title": "Example",
"code": "WWF's goal is to: Build a future where people live in harmony with \n nature.
"
},
{
"type": "header",
"level": 2,
"text": "HTML for Abbreviations"
},
{
"type": "paragraph",
"text": "The HTML <abbr> tag defines an abbreviation or an acronym, like \"HTML\", \n\"CSS\", \"Mr.\", \n\"Dr.\", \"ASAP\", \"ATM\"."
},
{
"type": "paragraph",
"text": "Marking abbreviations can give useful information to browsers, translation \nsystems and search-engines."
},
{
"type": "paragraph",
"text": "Tip: Use the global title attribute to \nshow the description for the \nabbreviation/acronym when you mouse over the element. "
},
{
"type": "example",
"title": "Example",
"code": "The WHO was founded in \n 1948.
"
},
{
"type": "header",
"level": 2,
"text": "HTML for Contact Information"
},
{
"type": "paragraph",
"text": "The HTML <address> tag defines the contact information for the author/owner of a document \nor an article."
},
{
"type": "paragraph",
"text": "The contact information can be an email address, URL, physical address, phone \nnumber, social media handle, etc."
},
{
"type": "paragraph",
"text": "The text in the <address> element usually renders in italic, \nand browsers will\nalways add a line break before and after the <address> element."
},
{
"type": "example",
"title": "Example",
"code": "Written by John Doe.
Visit us at:
Example.com
\n Box 564, Disneyland
USA"
},
{
"type": "header",
"level": 2,
"text": "HTML for Work Title"
},
{
"type": "paragraph",
"text": "The HTML <cite> tag defines the title of a \ncreative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.)."
},
{
"type": "paragraph",
"text": "Note: A person's name is not the title of a work."
},
{
"type": "paragraph",
"text": "The text in the <cite> element usually renders in italic."
},
{
"type": "example",
"title": "Example",
"code": "The Scream by Edvard Munch. Painted in 1893.
"
},
{
"type": "header",
"level": 2,
"text": "HTML for Bi-Directional Override"
},
{
"type": "paragraph",
"text": "BDO stands for Bi-Directional Override."
},
{
"type": "paragraph",
"text": "The HTML <bdo> tag is used to override \nthe current text direction:"
},
{
"type": "example",
"title": "Example",
"code": "This text will be written from right to left"
},
{
"type": "header",
"level": 2,
"text": "HTML Quotation and Citation Elements"
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<abbr>",
"Defines an abbreviation or acronym"
],
[
"<address>",
"Defines contact information for the author/owner of a document"
],
[
"<bdo>",
"Defines the text direction"
],
[
"<blockquote>",
"Defines a section that is quoted from another source"
],
[
"<cite>",
"Defines the title of a work"
],
[
"<q>",
"Defines a short inline quotation"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
}
]
},
"comments": {
"title": "HTML Comments",
"blocks": [
{
"type": "intro",
"text": "HTML comments are not displayed in the browser, but they can \nhelp document your HTML source code."
},
{
"type": "header",
"level": 2,
"text": "HTML Comment Tag"
},
{
"type": "paragraph",
"text": "You can add comments to your HTML source by using the following syntax:"
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "paragraph",
"text": "Notice that there is an exclamation point (!) in the start tag, but not in the \nend tag."
},
{
"type": "note",
"text": "Note: Comments are not displayed by the browser, but they can help document your HTML source code.
"
},
{
"type": "header",
"level": 2,
"text": "Add Comments"
},
{
"type": "paragraph",
"text": "With comments you can place notifications and reminders in your HTML code:"
},
{
"type": "example",
"title": "Example",
"code": "This is a paragraph.
\n"
},
{
"type": "header",
"level": 2,
"text": "Hide Content"
},
{
"type": "paragraph",
"text": "Comments can be used to hide content."
},
{
"type": "paragraph",
"text": "This can be helpful if you hide content temporarily:"
},
{
"type": "example",
"title": "Example",
"code": "This is a paragraph.
This is a paragraph too.
"
},
{
"type": "paragraph",
"text": "You can also hide more than one line. Everything between the <!-- and the -->\nwill be hidden from the display."
},
{
"type": "example",
"title": "Example",
"code": "This is a paragraph.
This is a paragraph too.
"
},
{
"type": "paragraph",
"text": "Comments are also great for debugging HTML, because you can \ncomment out HTML lines of code, one at a time, to search for errors."
},
{
"type": "header",
"level": 2,
"text": "Hide Inline Content"
},
{
"type": "paragraph",
"text": "Comments can be used to hide parts in the middle of the HTML code."
},
{
"type": "example",
"title": "Example",
"code": "This is a paragraph.
"
}
]
},
"colors": {
"title": "HTML Colors",
"blocks": [
{
"type": "intro",
"text": "HTML colors are specified with predefined color names, or with \nRGB, HEX, HSL, RGBA, or HSLA values."
},
{
"type": "header",
"level": 2,
"text": "Color Names"
},
{
"type": "paragraph",
"text": "In HTML, a color can be specified by using a color name:"
},
{
"type": "paragraph",
"text": "Try it Yourself »"
},
{
"type": "paragraph",
"text": "HTML supports 140 standard color names."
},
{
"type": "header",
"level": 2,
"text": "Background Color"
},
{
"type": "paragraph",
"text": "You can set the background color for HTML elements:"
},
{
"type": "example",
"title": "Example",
"code": "Hello World
Lorem \n ipsum...
"
},
{
"type": "header",
"level": 2,
"text": "Text Color"
},
{
"type": "paragraph",
"text": "You can set the color of text:"
},
{
"type": "header",
"level": 3,
"text": "Hello World"
},
{
"type": "paragraph",
"text": "Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat."
},
{
"type": "paragraph",
"text": "Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat."
},
{
"type": "example",
"title": "Example",
"code": "Hello \n World
Lorem \n ipsum...
Ut wisi \n enim...
"
},
{
"type": "header",
"level": 2,
"text": "Border Color"
},
{
"type": "paragraph",
"text": "You can set the color of borders:"
},
{
"type": "header",
"level": 2,
"text": "Hello World"
},
{
"type": "header",
"level": 2,
"text": "Hello World"
},
{
"type": "header",
"level": 2,
"text": "Hello World"
},
{
"type": "example",
"title": "Example",
"code": "Hello \n World
Hello \n World
Hello \n World
"
},
{
"type": "header",
"level": 2,
"text": "Color Values"
},
{
"type": "paragraph",
"text": "In HTML, colors can also be specified using RGB values, HEX values, HSL \nvalues, RGBA values, and HSLA values."
},
{
"type": "paragraph",
"text": "The following three <div> elements have their background color set with RGB, \nHEX, and HSL values:"
},
{
"type": "paragraph",
"text": "The following two <div> elements have their background color set with RGBA \nand HSLA values, which add an Alpha channel to the color (here we have 50% \ntransparency):"
},
{
"type": "example",
"title": "Example",
"code": "...
...
...
...
...
"
},
{
"type": "note",
"text": "Learn more about Color Values
\nYou will learn more about RGB, HEX and HSL in the next chapters.
"
}
]
},
"css": {
"title": "HTML Styles - CSS",
"blocks": [
{
"type": "intro",
"text": "CSS stands for Cascading Style Sheets."
},
{
"type": "intro",
"text": "CSS saves a lot of work. It can control the layout of multiple \nweb pages all at once."
},
{
"type": "header",
"level": 2,
"text": "What is CSS?"
},
{
"type": "paragraph",
"text": "Cascading Style Sheets (CSS) is used to format the layout of a webpage."
},
{
"type": "paragraph",
"text": "With CSS, you can control the color, font, the size of text, the spacing \nbetween elements, how elements are positioned and laid out, what background \nimages or background colors are to be used, different displays for different devices \nand screen sizes, and much more!"
},
{
"type": "note",
"text": "Tip: The word cascading means that a style \napplied to a parent element will also apply to all children elements within the \nparent. So, if you set the color of the body text to \"blue\", all headings, \nparagraphs, and other text elements within the body will also get the same color (unless you specify \nsomething else)!
"
},
{
"type": "header",
"level": 2,
"text": "Using CSS"
},
{
"type": "paragraph",
"text": "CSS can be added to HTML documents in 3 ways:"
},
{
"type": "list",
"ordered": false,
"items": [
"Inline - by using the style attribute inside HTML elements",
"Internal - by using a <style> element in the <head> section",
"External - by using a <link> \n element to link to an external CSS file"
]
},
{
"type": "paragraph",
"text": "The most common way to add CSS, is to keep the styles in external CSS \nfiles. However, in this tutorial we will use inline and internal styles, because this is easier to \ndemonstrate, and easier for you to try it yourself."
},
{
"type": "header",
"level": 2,
"text": "Inline CSS"
},
{
"type": "paragraph",
"text": "An inline CSS is used to apply a unique style to a single HTML element."
},
{
"type": "paragraph",
"text": "An inline CSS uses the style attribute of an HTML element."
},
{
"type": "paragraph",
"text": "The following example sets the text color of the <h1> element to blue, \nand the text color of the <p> element to red:"
},
{
"type": "example",
"title": "Example",
"code": "A Blue Heading
A red paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "Internal CSS"
},
{
"type": "paragraph",
"text": "An internal CSS is used to define a style for a single HTML page."
},
{
"type": "paragraph",
"text": "An internal CSS is defined in the <head> section of an HTML page, \nwithin a <style> element."
},
{
"type": "paragraph",
"text": "The following example sets the text color of ALL the <h1> elements \n(on that page) to blue, and the text color of ALL the <p> elements to \nred. In addition, the page will be displayed with a \"powderblue\" background \ncolor: "
},
{
"type": "example",
"title": "Example",
"code": "This is a \n heading
This is a paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "External CSS"
},
{
"type": "paragraph",
"text": "An external style sheet is used to define the style for many HTML pages."
},
{
"type": "paragraph",
"text": "To use an external style sheet, add a link to it in the <head> section of each HTML page:"
},
{
"type": "example",
"title": "Example",
"code": "\n \nThis is a heading
This is a paragraph.
"
},
{
"type": "paragraph",
"text": "The external style sheet can be written in any text editor. The file must not contain any \nHTML code, and must be saved with a .css extension."
},
{
"type": "paragraph",
"text": "Here is what the \"styles.css\" file looks like:"
},
{
"type": "example",
"title": "\"styles.css\":",
"code": "body { background-color: powderblue;}h1 { color: blue;}p { color: red;}"
},
{
"type": "note",
"text": "Tip: With an external style sheet, you can change the look of an entire web site, by changing one file!
"
},
{
"type": "header",
"level": 2,
"text": "CSS Colors, Fonts and Sizes"
},
{
"type": "paragraph",
"text": "Here, we will demonstrate some commonly used CSS properties. You will learn \nmore about them later."
},
{
"type": "paragraph",
"text": "The CSS color property defines the text color to be used."
},
{
"type": "paragraph",
"text": "The CSS font-family property defines the font to be used."
},
{
"type": "paragraph",
"text": "The CSS font-size property defines the text size to be used."
},
{
"type": "example",
"title": "Example",
"code": "\n \n This is a heading
This is a paragraph.
"
},
{
"type": "header",
"level": 2,
"text": "CSS Border"
},
{
"type": "paragraph",
"text": "The CSS border property defines a border \naround an HTML element."
},
{
"type": "paragraph",
"text": "Tip: You can define a border for nearly all HTML elements."
},
{
"type": "example",
"title": "Example",
"code": "p { border: 2px \nsolid powderblue;}"
},
{
"type": "header",
"level": 2,
"text": "CSS Padding"
},
{
"type": "paragraph",
"text": "The CSS padding property defines a padding \n(space) between the text and the border."
},
{
"type": "example",
"title": "Example",
"code": "p { border: 2px \nsolid powderblue; padding: 30px;}"
},
{
"type": "header",
"level": 2,
"text": "CSS Margin"
},
{
"type": "paragraph",
"text": "The CSS margin property defines a margin \n(space) outside the border."
},
{
"type": "example",
"title": "Example",
"code": "p { border: 2px \nsolid powderblue; margin: 50px;\n }"
},
{
"type": "header",
"level": 2,
"text": "Link to External CSS"
},
{
"type": "paragraph",
"text": "External style sheets can be referenced with a full URL or with a path relative to the current web page."
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "note",
"text": "You can read more about file paths in the chapter HTML \nFile Paths.
"
},
{
"type": "header",
"level": 2,
"text": "Chapter Summary"
},
{
"type": "list",
"ordered": false,
"items": [
"Use the HTML style attribute for inline styling",
"Use the HTML <style> element to define internal CSS",
"Use the HTML <link> element to refer to an external CSS file",
"Use the HTML <head> element to store <style> and <link> elements",
"Use the CSS color property for text colors",
"Use the CSS font-family property for text fonts",
"Use the CSS font-size property for text sizes",
"Use the CSS border property for borders",
"Use the CSS padding property for space inside the border",
"Use the CSS margin property for space outside the border"
]
},
{
"type": "note",
"text": "Tip: You can learn much more about CSS in our CSS Tutorial.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Style Tags"
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<style>",
"Defines style information for an HTML document"
],
[
"<link>",
"Defines a link between a document and an external resource"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
}
]
},
"links": {
"title": "HTML Links",
"blocks": [
{
"type": "intro",
"text": "Links are found in nearly all web pages. Links allow users to click their way from page to page."
},
{
"type": "header",
"level": 2,
"text": "HTML Links - Hyperlinks"
},
{
"type": "paragraph",
"text": "HTML links are hyperlinks."
},
{
"type": "paragraph",
"text": "You can click on a link and jump to another document."
},
{
"type": "paragraph",
"text": "When you move the mouse over a link, the mouse arrow will turn into a little hand."
},
{
"type": "note",
"text": "Note: A link does not have to be text. A link can be an image \n or any other HTML element!
"
},
{
"type": "header",
"level": 2,
"text": "HTML Links - Syntax"
},
{
"type": "paragraph",
"text": "The HTML <a> tag defines a hyperlink. \nIt has the following syntax:"
},
{
"type": "example",
"title": "Example",
"code": "link text"
},
{
"type": "paragraph",
"text": "The most important attribute of the <a> element is the \nhref attribute, which indicates the link's destination."
},
{
"type": "paragraph",
"text": "The link text is the part that will be visible to the reader."
},
{
"type": "paragraph",
"text": "Clicking on the link text, will send the reader to the specified URL address."
},
{
"type": "example",
"title": "Example",
"code": "Visit Coding Tamilan!"
},
{
"type": "paragraph",
"text": "By default, links will appear as follows in all browsers:"
},
{
"type": "list",
"ordered": false,
"items": [
"An unvisited link is underlined and blue",
"A visited link is underlined and purple",
"An active link is underlined and red"
]
},
{
"type": "note",
"text": "Tip: Links can of course be styled with CSS, to get \n another look!
"
},
{
"type": "header",
"level": 2,
"text": "HTML Links - The target Attribute"
},
{
"type": "paragraph",
"text": "By default, the linked page will be displayed in the current browser window. \nTo change this, you must specify another target for the link."
},
{
"type": "paragraph",
"text": "The target attribute specifies where to open the linked document."
},
{
"type": "paragraph",
"text": "The target attribute can have one of the following values:"
},
{
"type": "list",
"ordered": false,
"items": [
"_self - Default. Opens the document in \n the same window/tab as it was clicked",
"_blank - Opens the document in a new window or tab",
"_parent - Opens the document in the parent frame",
"_top - Opens the document in the full body of the window"
]
},
{
"type": "example",
"title": "Example",
"code": "Visit Coding Tamilan!"
},
{
"type": "header",
"level": 2,
"text": "Absolute URLs vs. Relative URLs"
},
{
"type": "paragraph",
"text": "Both examples above are using an absolute URL (a full web address) \nin the href attribute."
},
{
"type": "paragraph",
"text": "A local link (a link to a page within the same website) is specified with a \nrelative URL (without \nthe \"https://www\" part):"
},
{
"type": "example",
"title": "Example",
"code": "Absolute URLs
\n Relative \n URLs
"
},
{
"type": "header",
"level": 2,
"text": "HTML Links - Use an Image as a Link"
},
{
"type": "paragraph",
"text": "To use an image as a link, just put the <img> \ntag inside the <a> tag:"
},
{
"type": "example",
"title": "Example",
"code": "![\"HTML](\"smiley.gif\")
"
},
{
"type": "header",
"level": 2,
"text": "Link to an Email Address"
},
{
"type": "paragraph",
"text": "Use \nmailto: inside the \nhref attribute to create a link that opens the user's email program (to \nlet them send a new email):"
},
{
"type": "example",
"title": "Example",
"code": "Send email"
},
{
"type": "header",
"level": 2,
"text": "Button as a Link"
},
{
"type": "paragraph",
"text": "To use an HTML button as a link, you have to add some JavaScript code."
},
{
"type": "paragraph",
"text": "JavaScript allows you to specify what happens at certain events, such as a click of a button:"
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "note",
"text": "Tip: Learn more about JavaScript in our JavaScript Tutorial.
"
},
{
"type": "header",
"level": 2,
"text": "Link Titles"
},
{
"type": "paragraph",
"text": "The title attribute specifies extra information about an element.\nThe information is most often shown as a tooltip text when the mouse moves over the element."
},
{
"type": "example",
"title": "Example",
"code": "Visit our HTML Tutorial"
},
{
"type": "header",
"level": 2,
"text": "More on Absolute URLs and Relative URLs"
},
{
"type": "example",
"title": "Example",
"code": "HTML tutorial"
},
{
"type": "example",
"title": "Example",
"code": "HTML tutorial"
},
{
"type": "example",
"title": "Example",
"code": "HTML tutorial"
},
{
"type": "note",
"text": "You can read more about file paths in the chapter HTML \nFile Paths.
"
},
{
"type": "header",
"level": 2,
"text": "Chapter Summary"
},
{
"type": "list",
"ordered": false,
"items": [
"Use the <a> element to define a link",
"Use the href attribute to define the link address",
"Use the target attribute to define where to open the linked document",
"Use the <img> element (inside <a>) \n to use an image as a link",
"Use the \n mailto: scheme inside the \nhref attribute to create a link that opens the user's email program"
]
},
{
"type": "header",
"level": 2,
"text": "HTML Link Tags"
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<a>",
"Defines a hyperlink"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
}
]
},
"images": {
"title": "HTML Images",
"blocks": [
{
"type": "intro",
"text": "Images can improve the design and the appearance of a web page."
},
{
"type": "example",
"title": "Example",
"code": "![](\"pic_trulli.jpg\")
"
},
{
"type": "example",
"title": "Example",
"code": "![](\"img_girl.jpg\")
"
},
{
"type": "example",
"title": "Example",
"code": "![](\"img_chania.jpg\")
"
},
{
"type": "header",
"level": 2,
"text": "HTML Images Syntax"
},
{
"type": "paragraph",
"text": "The HTML <img> tag is used to embed an \nimage in a web page."
},
{
"type": "paragraph",
"text": "Images are not technically inserted into a web page; images are linked to web \npages. The <img> tag creates a holding \nspace for the referenced image."
},
{
"type": "paragraph",
"text": "The <img> tag is empty, it contains attributes only, and does not \nhave a closing tag."
},
{
"type": "paragraph",
"text": "The <img> tag has two required \nattributes:"
},
{
"type": "list",
"ordered": false,
"items": [
"src - Specifies the path to the image",
"alt - Specifies an alternate text for the image"
]
},
{
"type": "example",
"title": "Syntax",
"code": "![\"alternatetext\"](\"url\")
"
},
{
"type": "header",
"level": 2,
"text": "The src Attribute"
},
{
"type": "paragraph",
"text": "The required src attribute specifies the path (URL) to the image."
},
{
"type": "paragraph",
"text": "Note: When a web page loads, it is the browser, at that \nmoment, that gets the image from a web server and inserts it into the page. \nTherefore, make sure that the image actually stays in the same spot in relation \nto the web page, otherwise your visitors will get a broken link icon. The broken \nlink icon and the alt text are shown if the browser cannot find the image."
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "header",
"level": 2,
"text": "The alt Attribute"
},
{
"type": "paragraph",
"text": "The required alt attribute provides an alternate text for an image, if the user for \nsome reason cannot view it (because of slow connection, an error in the src \nattribute, or if the user uses a screen reader)."
},
{
"type": "paragraph",
"text": "The value of the alt attribute should describe the image:"
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "paragraph",
"text": "If a browser cannot find an image, it will display the value of the alt \nattribute:"
},
{
"type": "example",
"title": "Example",
"code": "![\"Flowers](\"wrongname.gif\")
"
},
{
"type": "note",
"text": "Tip: A screen reader is a software program that reads the HTML code, and allows the user to \"listen\" to the content. Screen readers are useful \nfor people who are visually impaired or learning disabled.
"
},
{
"type": "header",
"level": 2,
"text": "Image Size - Width and Height"
},
{
"type": "paragraph",
"text": "You can use the style attribute to specify the width and \nheight of an image."
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "paragraph",
"text": "Alternatively, you can use the width and height attributes:"
},
{
"type": "example",
"title": "Example",
"code": ""
},
{
"type": "paragraph",
"text": "The width and height attributes always define the width and height of the \nimage in pixels."
},
{
"type": "note",
"text": "Note: Always specify the width and height of an image. If width and height are not specified, the \n web page \n might flicker while the image loads.
"
},
{
"type": "header",
"level": 2,
"text": "Width and Height, or Style?"
},
{
"type": "paragraph",
"text": "The width, height, and style attributes are \nall valid in HTML."
},
{
"type": "paragraph",
"text": "However, we suggest using the style attribute. It prevents styles sheets from changing \nthe size of images:"
},
{
"type": "example",
"title": "Example",
"code": "![\"HTML5](\"html5.gif\")
"
},
{
"type": "header",
"level": 2,
"text": "Images in Another Folder"
},
{
"type": "paragraph",
"text": "If you have your images in a sub-folder, you must include the folder \nname in the src attribute:"
},
{
"type": "example",
"title": "Example",
"code": "![](\"/images/html5.gif\")
"
},
{
"type": "header",
"level": 2,
"text": "Images on Another Server/Website"
},
{
"type": "paragraph",
"text": "Some web sites point to an image on another server."
},
{
"type": "paragraph",
"text": "To point to an image on another server, you must specify an absolute (full) \nURL in the src attribute:"
},
{
"type": "example",
"title": "Example",
"code": "![\"Coding](\"https://www.codingtamilan.com/images/codingtamilan_green.jpg\")
"
},
{
"type": "paragraph",
"text": "Notes on external images: External images might be under \ncopyright. If you do not get permission to use it, you may be in violation of \ncopyright laws. In addition, you cannot control external images; they can suddenly \nbe removed or changed."
},
{
"type": "header",
"level": 2,
"text": "Animated Images"
},
{
"type": "paragraph",
"text": "HTML allows animated GIFs:"
},
{
"type": "example",
"title": "Example",
"code": "![\"Computer](\"programming.gif\")
"
},
{
"type": "header",
"level": 2,
"text": "Image as a Link"
},
{
"type": "paragraph",
"text": "To use an image as a link, put the <img> tag inside the <a> \ntag:"
},
{
"type": "example",
"title": "Example",
"code": " "
},
{
"type": "header",
"level": 2,
"text": "Image Floating"
},
{
"type": "paragraph",
"text": "Use the CSS float property to let the image float to the right or to the left of a text:"
},
{
"type": "example",
"title": "Example",
"code": "\n The image will float to the right of \nthe text.
\n The image will float to the left of \nthe text.
"
},
{
"type": "note",
"text": "Tip: To learn more about CSS Float, read our CSS Float Tutorial.
"
},
{
"type": "header",
"level": 2,
"text": "Common Image Formats"
},
{
"type": "paragraph",
"text": "Here are the most common image file types, which are supported in all browsers \n(Chrome, Edge, Firefox, Safari, Opera):"
},
{
"type": "table",
"headers": [
"Abbreviation",
"File Format",
"File Extension"
],
"rows": [
[
"APNG",
"Animated Portable Network Graphics",
".apng"
],
[
"GIF",
"Graphics Interchange Format",
".gif"
],
[
"ICO",
"Microsoft Icon",
".ico, .cur"
],
[
"JPEG",
"Joint Photographic Expert Group image",
".jpg, .jpeg, .jfif, .pjpeg, .pjp"
],
[
"PNG",
"Portable Network Graphics",
".png"
],
[
"SVG",
"Scalable Vector Graphics",
".svg"
]
]
},
{
"type": "header",
"level": 2,
"text": "Chapter Summary"
},
{
"type": "list",
"ordered": false,
"items": [
"Use the HTML <img> element to define an image",
"Use the HTML src attribute to define the URL of the image",
"Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed",
"Use the HTML width and height attributes \n or the CSS width and height \n properties to define the size of the image",
"Use the CSS float property to let the image float \n to the left or to the right"
]
},
{
"type": "note",
"text": "Note: Loading large images takes time, and can slow down your \n web page. Use images carefully.
"
},
{
"type": "header",
"level": 2,
"text": "HTML Image Tags"
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<img>",
"Defines an image"
],
[
"<map>",
"Defines an image map"
],
[
"<area>",
"Defines a clickable area inside an image map"
],
[
"<picture>",
"Defines a container for multiple image resources"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
},
{
"type": "header",
"level": 2,
"text": "Video: HTML Images"
}
]
},
"tables": {
"title": "HTML Tables",
"blocks": [
{
"type": "intro",
"text": "HTML tables allow web developers to arrange data into rows and \ncolumns."
},
{
"type": "header",
"level": 2,
"text": "Define an HTML Table"
},
{
"type": "paragraph",
"text": "A table in HTML consists of table cells inside rows and columns."
},
{
"type": "example",
"title": "Example",
"code": " \n Company \n Contact Country \n \n \n Alfreds Futterkiste \n Maria \n Anders Germany \n \n Centro \n comercial Moctezuma \n Francisco \n Chang Mexico \n
"
},
{
"type": "header",
"level": 2,
"text": "Table Cells"
},
{
"type": "paragraph",
"text": "Each table cell is defined by a\n<td> and a </td> tag."
},
{
"type": "note",
"text": "td \nstands for table data.
"
},
{
"type": "paragraph",
"text": "Everything between <td> and </td> \nis the content of a table cell."
},
{
"type": "example",
"title": "Example",
"code": " \n Emil \n Tobias Linus \n \n
"
},
{
"type": "note",
"text": "Note: A table cell can contain \nall sorts of HTML elements: text, images, lists, links, other tables, etc.
"
},
{
"type": "header",
"level": 2,
"text": "Table Rows"
},
{
"type": "paragraph",
"text": "Each table row starts with a \n<tr> and ends with a </tr> tag."
},
{
"type": "note",
"text": "tr \nstands for table row.
"
},
{
"type": "example",
"title": "Example",
"code": " \n Emil \n Tobias Linus \n \n \n 16 \n 14 10 \n \n
"
},
{
"type": "paragraph",
"text": "You can have as many rows as you like in a table; just make sure that the number of cells are the same in each row."
},
{
"type": "note",
"text": "Note: There are times when a row can have less or more cells than another. You will learn about that in a later chapter.
"
},
{
"type": "header",
"level": 2,
"text": "Table Headers"
},
{
"type": "paragraph",
"text": "Sometimes you want your cells to be table header cells. In those cases use the\n<th> tag instead of the\n<td> tag:"
},
{
"type": "note",
"text": "th \nstands for table header.
"
},
{
"type": "example",
"title": "Example",
"code": " \n Person 1 \n Person 2 Person \n 3 \n \n \n Emil \n Tobias Linus \n \n \n 16 \n 14 10 \n \n
"
},
{
"type": "paragraph",
"text": "By default, the text in <th> elements \nare bold and centered, but you can change that with CSS."
},
{
"type": "header",
"level": 2,
"text": "HTML Table Tags"
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<table>",
"Defines a table"
],
[
"<th>",
"Defines a header cell in a table"
],
[
"<tr>",
"Defines a row in a table"
],
[
"<td>",
"Defines a cell in a table"
],
[
"<caption>",
"Defines a table caption"
],
[
"<colgroup>",
"Specifies a group of one or more columns in a table for formatting"
],
[
"<col>",
"Specifies column properties for each column within a <colgroup> element"
],
[
"<thead>",
"Groups the header content in a table"
],
[
"<tbody>",
"Groups the body content in a table"
],
[
"<tfoot>",
"Groups the footer content in a table"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
}
]
},
"lists": {
"title": "HTML Lists",
"blocks": [
{
"type": "intro",
"text": "HTML lists allow web developers to group a set of related items in lists."
},
{
"type": "header",
"level": 2,
"text": "Unordered HTML List"
},
{
"type": "paragraph",
"text": "An unordered list starts with the <ul> tag. Each list item starts with the \n<li> tag."
},
{
"type": "paragraph",
"text": "The list items will be marked with bullets (small black circles) by default:"
},
{
"type": "example",
"title": "Example",
"code": "\n \n- Coffee
- Tea
\n \n- Milk
\n
"
},
{
"type": "header",
"level": 2,
"text": "Ordered HTML List"
},
{
"type": "paragraph",
"text": "An ordered list starts with the <ol> tag. Each list item starts with the <li> tag."
},
{
"type": "paragraph",
"text": "The list items will be marked with numbers by default:"
},
{
"type": "example",
"title": "Example",
"code": "\n \n- Coffee
- Tea
\n \n- Milk
\n
"
},
{
"type": "header",
"level": 2,
"text": "HTML Description Lists"
},
{
"type": "paragraph",
"text": "HTML also supports description lists."
},
{
"type": "paragraph",
"text": "A description list is a list of terms, with a description of each term."
},
{
"type": "paragraph",
"text": "The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> \ntag describes each term:"
},
{
"type": "example",
"title": "Example",
"code": "\n \n- Coffee
\n \n- - black hot drink
\n \n- Milk
\n \n- - white cold drink
\n
"
},
{
"type": "header",
"level": 2,
"text": "HTML List Tags"
},
{
"type": "table",
"headers": [
"Tag",
"Description"
],
"rows": [
[
"<ul>",
"Defines an unordered list"
],
[
"<ol>",
"Defines an ordered list"
],
[
"<li>",
"Defines a list item"
],
[
"<dl>",
"Defines a description list"
],
[
"<dt>",
"Defines a term in a description list"
],
[
"<dd>",
"Describes the term in a description list"
]
]
},
{
"type": "note",
"text": "For a complete list of all available HTML tags, visit our HTML Tag Reference.
"
}
]
},
"blocks": {
"title": "HTML Block and Inline Elements",
"blocks": [
{
"type": "intro",
"text": "Every HTML element has a default display value, depending on what type \nof element it is."
},
{
"type": "intro",
"text": "The two most common display values are block and inline."
},
{
"type": "header",
"level": 2,
"text": "Block-level Elements"
},
{
"type": "paragraph",
"text": "A block-level element always starts on a new line, and the browsers \nautomatically add some space (a margin) before and after the element."
},
{
"type": "paragraph",
"text": "A block-level element always takes up the full width available \n(stretches out to the left and right as far as it can)."
},
{
"type": "paragraph",
"text": "Two commonly used block elements are: <p> \nand <div>."
},
{
"type": "paragraph",
"text": "The <p> element defines a paragraph in an \nHTML document."
},
{
"type": "paragraph",
"text": "The <div> element defines a division \nor a section in an HTML document."
},
{
"type": "paragraph",
"text": "The <p> element is a block-level element."
},
{
"type": "example",
"title": "Example",
"code": "Hello World
Hello World"
},
{
"type": "paragraph",
"text": "Here are the block-level elements in HTML:"
},
{
"type": "code",
"code": "\n \n