Podcast
Questions and Answers
What does HTML stand for?
What does HTML stand for?
- High-level Text Management Language
- Hyperlink Transfer Management Language
- Hyper Text Markup Language (correct)
- Home Tool Markup Language
What is the primary function of HTML?
What is the primary function of HTML?
- To style web pages
- To add interactivity to web pages
- To manage server-side operations
- To define the structure of a web page (correct)
Which of the following tags is used to define the most important heading in HTML?
Which of the following tags is used to define the most important heading in HTML?
- `<h6>`
- `<h2>`
- `<h1>` (correct)
- `<h3>`
What tag is used to define a paragraph in HTML?
What tag is used to define a paragraph in HTML?
Which tag is used to create a hyperlink in HTML?
Which tag is used to create a hyperlink in HTML?
What is the purpose of the href attribute in an <a> tag?
What is the purpose of the href attribute in an <a> tag?
What is the correct HTML element for inserting a line break?
What is the correct HTML element for inserting a line break?
Which HTML element is used to define emphasized text?
Which HTML element is used to define emphasized text?
Which HTML element is used to define important text?
Which HTML element is used to define important text?
What is the correct HTML for creating an unordered list?
What is the correct HTML for creating an unordered list?
In HTML, what does the <div> element typically represent?
In HTML, what does the <div> element typically represent?
Which of the following is a structural element in HTML5?
Which of the following is a structural element in HTML5?
What is the purpose of the <table> element in HTML?
What is the purpose of the <table> element in HTML?
Which HTML tag is used to define a table row?
Which HTML tag is used to define a table row?
Which HTML tag is used to define a table header cell?
Which HTML tag is used to define a table header cell?
Which attribute is used to make a cell span across multiple columns in an HTML table?
Which attribute is used to make a cell span across multiple columns in an HTML table?
Within an HTML table, which tag is used to define the table body?
Within an HTML table, which tag is used to define the table body?
In HTML, which tag is used to define the table header?
In HTML, which tag is used to define the table header?
What is the purpose of the HTML <!DOCTYPE html> declaration?
What is the purpose of the HTML <!DOCTYPE html> declaration?
HTML stands for Hyper Text Makeup Language.
HTML stands for Hyper Text Makeup Language.
HTML describes the structure of a web page.
HTML describes the structure of a web page.
The <body> tag contains the page's metadata.
The <body> tag contains the page's metadata.
Browsers display HTML tags to the user.
Browsers display HTML tags to the user.
All HTML elements must have both a start tag and an end tag.
All HTML elements must have both a start tag and an end tag.
HTML elements can be nested within each other.
HTML elements can be nested within each other.
The <html> element is the root element of an HTML page.
The <html> element is the root element of an HTML page.
HTML attributes provide additional information about HTML elements.
HTML attributes provide additional information about HTML elements.
The href attribute in an <a> tag specifies the image source.
The href attribute in an <a> tag specifies the image source.
Block-level elements are displayed inline by default.
Block-level elements are displayed inline by default.
A <p> element is a block-level element.
A <p> element is a block-level element.
Inline elements start on a new line.
Inline elements start on a new line.
The <h1> tag defines the least important heading.
The <h1> tag defines the least important heading.
HTML paragraphs are defined with the <paragraph> tag.
HTML paragraphs are defined with the <paragraph> tag.
The <blockquote> element is used to display emphasized text.
The <blockquote> element is used to display emphasized text.
The <a> tag is used to define hyperlinks.
The <a> tag is used to define hyperlinks.
An absolute link points to another website.
An absolute link points to another website.
In HTML lists, the <li> tag is used to define a description.
In HTML lists, the <li> tag is used to define a description.
The <div> element is a container for other HTML elements.
The <div> element is a container for other HTML elements.
The <footer> element typically contains the main content of the page.
The <footer> element typically contains the main content of the page.
Flashcards
What is HTML?
What is HTML?
A standard markup language used for creating web pages, describing the structure of a webpage using elements.
What are Web Browsers for?
What are Web Browsers for?
Read HTML documents and display them correctly, interpreting HTML tags to determine how content is shown.
HTML Document structure
HTML Document structure
They must start with a document type declaration: <!DOCTYPE html>. The <html> tag is the root element.
What is an HTML Element?
What is an HTML Element?
Signup and view all the flashcards
Nested HTML Elements
Nested HTML Elements
Signup and view all the flashcards
HTML Attributes
HTML Attributes
Signup and view all the flashcards
Block-level Element
Block-level Element
Signup and view all the flashcards
Inline Element
Inline Element
Signup and view all the flashcards
HTML Headings
HTML Headings
Signup and view all the flashcards
HTML Paragraphs
HTML Paragraphs
Signup and view all the flashcards
HTML
HTML
Signup and view all the flashcards
HTML Links
HTML Links
Signup and view all the flashcards
Absolute link
Absolute link
Signup and view all the flashcards
Relative Link
Relative Link
Signup and view all the flashcards
HTML Line Break Element
HTML Line Break Element
Signup and view all the flashcards
tag
tag
Signup and view all the flashcards
HTML Lists
HTML Lists
Signup and view all the flashcards
Unordered HTML List
Unordered HTML List
Signup and view all the flashcards
Ordered HTML List
Ordered HTML List
Signup and view all the flashcards
HTML Div Element
HTML Div Element
Signup and view all the flashcards
HTML Entity Characters
HTML Entity Characters
Signup and view all the flashcards
HTML link - href attribute
HTML link - href attribute
Signup and view all the flashcards
Mailto link
Mailto link
Signup and view all the flashcards
Tel link
Tel link
Signup and view all the flashcards
Signup and view all the flashcards
Element
Signup and view all the flashcards
Element
Signup and view all the flashcards
Signup and view all the flashcards
HTML Tables
HTML Tables
Signup and view all the flashcards
Tag
Signup and view all the flashcards
Tags
Signup and view all the flashcards
Colspan Attribute
Colspan Attribute
Signup and view all the flashcards
Rowspan Attribute
Rowspan Attribute
Signup and view all the flashcards
Signup and view all the flashcards
tag
Signup and view all the flashcards
tag
Signup and view all the flashcards
Valid HTML Benefit
Signup and view all the flashcards
Study Notes
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating web pages
- HTML describes the structure of a web page
- HTML consists of elements that tell the browser how to display content
- HTML elements label pieces of content like headings, paragraphs, and links
Simple HTML Document
- HTML documents begin with
<!DOCTYPE html>.
- The HTML document starts with
<html> and ends with </html>.
- The visible part of the HTML document is between
<body> and </body>.
- The content inside the
<body> section will be displayed in a browser
- The content inside the
<title> element will be shown in the browser's title bar or in the page's tab.
HTML Elements
- An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>- The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
- Certain HTML elements lack content, such as the
<br> element, and are termed empty elements, thus not requiring closing tags.
Web Browsers
- Web browsers (Chrome, Edge, Firefox, Safari) read HTML documents and display them correctly
- Browsers use HTML tags to determine document display, but do not show the actual tags themselves
Special Entity Characters
- Special characters like quotes and the copyright symbol can be displayed using entity codes
© displays the copyright symbol ©
Nested HTML Elements
- HTML elements can be nested, meaning an element can contain other elements.
- All HTML documents consist of nested HTML elements
- Example of nested elements:
<html> <body> <h1></h1> <p></p> </body> </html>
- The
<html> element is the root element and defines the whole HTML document with start and end tags, containing a <body> element.
HTML Attributes
- HTML attributes provide additional information about elements and are specified in the start tag
- Attributes follow a name="value" format
- The
<a> tag defines a hyperlink, its href attribute specifying the URL to which a link navigates: <a href="https://www.google.com">Visit google</a>
- The
<img> tag may include width and height attributes specifying image dimensions: <img src="img.jpg" width="500" height="600">
Block and Inline Elements
- Every HTML element has a default display value, depending on its type
Block-Level Elements
- Block-level elements always start on a new line, with browsers automatically adding some space (margin) before and after the element
- Example:
<p> <div>
<p> defines a paragraph in an HTML document<div> defines a division or a section in an HTML document
Inline Elements
- Inline elements do not start on a new line and take up only as much width as necessary
- Example:
<span>Hello World</span>
HTML Headings
- Display titles or subtitles on a webpage via heading tags
- Headings are defined with the
<h1> to <h6> tags.
<h1> defines the most important heading<h6> defines the least important heading
- Example:
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>
HTML Paragraphs
- Paragraphs are defined with the
<p> tag
- Example:
<p>This is a paragraph.</p><p>This is another paragraph.</p>
HTML Quotations
- The
<blockquote> element defines a section that is quoted from another source
- Browsers usually indent
<blockquote> elements
HTML Links
- The
<a> tag creates hyperlinks to allow users to navigate
- Links are defined with the
<a> tag:
- Absolute links point to other websites
<a href="https://yahoo.com">Yahoo</a>
- Relative links point to pages on your own site:
<a href="index.html">Home</a>
HTML Links for Emails
<a> can create links for email addresses and phone numbers- The
mailto: protocol creates a link that opens the default email client with the specified email address pre-filled: <a href="mailto:[email protected]">This is a link</a>
HTML Links for Phone Numbers
- The
tel: protocol creates a clickable phone number link on mobile devices: <a href="tel:+97470070070">Call Us</a>
HTML Line Break Element
<br> creates a line break and is a stand-alone tag- In HTML5 it is called a void element
- Causes the next element or text to display on a new line
HTML Horizontal Rule Element
<hr> configures a horizontal line and is a void element- Should indicate a thematic break at the paragraph level in HTML5
HTML Phrase Elements
-
Indicate the context and meaning of the text and display inline with the text
-
<b></b> - This text is displayed in bold font
-
<strong></strong> - This text has strong importance and is displayed in bold
-
<i></i> - This text is displayed in italic font
-
<em></em> - This text has emphasis and is displayed in italic font
HTML Lists
- HTML lists allow web developers to group a set of related items in lists
- Unordered Lists
- Description Lists
- Ordered Lists
Unordered HTML Lists
- An unordered list starts with the
<ul> tag and each list item starts with the <li> tag
- The list items are marked with bullets (small black circles) by default:
- Example:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>- Result:
- Coffee
- Tea
- Milk
Ordered HTML Lists
- An ordered list starts with the
<ol> tag and each list item starts with the <li> tag
- The list items are marked with numbers by default
- Example:
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>- Result:
-
- Coffee
-
- Tea
-
- Milk
HTML Description Lists
- A description list is a list of terms, with a description of each term
- The
<dl> tag defines the description list
- The
<dt> tag defines the term (name), and the <dd> tag describes each term
- Example:
<dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dt>Milk</dt> <dd>white cold drink</dd> </dl>- Result:
- Coffee black hot drink
- Milk white cold drink
HTML Div Element
- The
<div> element is used as a container for other HTML elements
- The
<div> element is by default a block element, meaning it takes all available width, and comes with line breaks before and after
- It can contain other block display and inline display elements
- There can be many
<div> containers on the same page
Structural Elements
- Structural elements include:
- Header -
<header></header>
- Nav -
<nav></nav>
- Main -
<main></main>
- Footer -
<footer></footer>
HTML Tables
- HTML tables arrange data into rows and columns for logical grouping
- Table data is best presented via tabular form
Creating tables
- Tables are created with the
<table></table> tags, acting as a container for table rows
- Table rows are created with
<tr></tr> tags, providing a container for table data cells
- Table data cells are created with
<td></td> tags, enclosing the actual data
- Creating tables example:
<table>
<tr>
<td>Month</td>
<td>Sales</td>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
</table>
- Output:
Month Sales
January $10,000
Enhancing tables
- Optionally, the
</td> and </tr> closing tags can be omitted
- Table titles are specified with the
<caption></caption> tags, and row/column headings with <th></th> tags
- Caption must immediately follow the opening
<table> tag
- Table title can be specified with
- Column headings can be added using
- Table headers and footers can be enhanced with special rows using and
- Standard rows are enclosed using after those elements are used
- Keypoints for enhancement
- Multiple elements can group rows for long tables
- Headers and footers repeat on each page when printed
-
must appear before , but after
if applicable
- Enhancements improve readability and organization
Table Colspan & Rowspan
- Colspan makes a cell span over multiple columns
- Rowspan makes a cell span over multiple rows
Studying That Suits
You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
More Like This
Use Quizgecko on...
Browser
Signup and view all the flashcards
tag
Signup and view all the flashcards
tag
Signup and view all the flashcards
Valid HTML Benefit
Signup and view all the flashcards
Study Notes
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating web pages
- HTML describes the structure of a web page
- HTML consists of elements that tell the browser how to display content
- HTML elements label pieces of content like headings, paragraphs, and links
Simple HTML Document
- HTML documents begin with
<!DOCTYPE html>.
- The HTML document starts with
<html> and ends with </html>.
- The visible part of the HTML document is between
<body> and </body>.
- The content inside the
<body> section will be displayed in a browser
- The content inside the
<title> element will be shown in the browser's title bar or in the page's tab.
HTML Elements
- An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>- The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
- Certain HTML elements lack content, such as the
<br> element, and are termed empty elements, thus not requiring closing tags.
Web Browsers
- Web browsers (Chrome, Edge, Firefox, Safari) read HTML documents and display them correctly
- Browsers use HTML tags to determine document display, but do not show the actual tags themselves
Special Entity Characters
- Special characters like quotes and the copyright symbol can be displayed using entity codes
© displays the copyright symbol ©
Nested HTML Elements
- HTML elements can be nested, meaning an element can contain other elements.
- All HTML documents consist of nested HTML elements
- Example of nested elements:
<html> <body> <h1></h1> <p></p> </body> </html>
- The
<html> element is the root element and defines the whole HTML document with start and end tags, containing a <body> element.
HTML Attributes
- HTML attributes provide additional information about elements and are specified in the start tag
- Attributes follow a name="value" format
- The
<a> tag defines a hyperlink, its href attribute specifying the URL to which a link navigates: <a href="https://www.google.com">Visit google</a>
- The
<img> tag may include width and height attributes specifying image dimensions: <img src="img.jpg" width="500" height="600">
Block and Inline Elements
- Every HTML element has a default display value, depending on its type
Block-Level Elements
- Block-level elements always start on a new line, with browsers automatically adding some space (margin) before and after the element
- Example:
<p> <div>
<p> defines a paragraph in an HTML document<div> defines a division or a section in an HTML document
Inline Elements
- Inline elements do not start on a new line and take up only as much width as necessary
- Example:
<span>Hello World</span>
HTML Headings
- Display titles or subtitles on a webpage via heading tags
- Headings are defined with the
<h1> to <h6> tags.
<h1> defines the most important heading<h6> defines the least important heading
- Example:
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>
HTML Paragraphs
- Paragraphs are defined with the
<p> tag
- Example:
<p>This is a paragraph.</p><p>This is another paragraph.</p>
HTML Quotations
- The
<blockquote> element defines a section that is quoted from another source
- Browsers usually indent
<blockquote> elements
HTML Links
- The
<a> tag creates hyperlinks to allow users to navigate
- Links are defined with the
<a> tag:
- Absolute links point to other websites
<a href="https://yahoo.com">Yahoo</a>
- Relative links point to pages on your own site:
<a href="index.html">Home</a>
HTML Links for Emails
<a> can create links for email addresses and phone numbers- The
mailto: protocol creates a link that opens the default email client with the specified email address pre-filled: <a href="mailto:[email protected]">This is a link</a>
HTML Links for Phone Numbers
- The
tel: protocol creates a clickable phone number link on mobile devices: <a href="tel:+97470070070">Call Us</a>
HTML Line Break Element
<br> creates a line break and is a stand-alone tag- In HTML5 it is called a void element
- Causes the next element or text to display on a new line
HTML Horizontal Rule Element
<hr> configures a horizontal line and is a void element- Should indicate a thematic break at the paragraph level in HTML5
HTML Phrase Elements
-
Indicate the context and meaning of the text and display inline with the text
-
<b></b> - This text is displayed in bold font
-
<strong></strong> - This text has strong importance and is displayed in bold
-
<i></i> - This text is displayed in italic font
-
<em></em> - This text has emphasis and is displayed in italic font
HTML Lists
- HTML lists allow web developers to group a set of related items in lists
- Unordered Lists
- Description Lists
- Ordered Lists
Unordered HTML Lists
- An unordered list starts with the
<ul> tag and each list item starts with the <li> tag
- The list items are marked with bullets (small black circles) by default:
- Example:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>- Result:
- Coffee
- Tea
- Milk
Ordered HTML Lists
- An ordered list starts with the
<ol> tag and each list item starts with the <li> tag
- The list items are marked with numbers by default
- Example:
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>- Result:
-
- Coffee
-
- Tea
-
- Milk
HTML Description Lists
- A description list is a list of terms, with a description of each term
- The
<dl> tag defines the description list
- The
<dt> tag defines the term (name), and the <dd> tag describes each term
- Example:
<dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dt>Milk</dt> <dd>white cold drink</dd> </dl>- Result:
- Coffee black hot drink
- Milk white cold drink
HTML Div Element
- The
<div> element is used as a container for other HTML elements
- The
<div> element is by default a block element, meaning it takes all available width, and comes with line breaks before and after
- It can contain other block display and inline display elements
- There can be many
<div> containers on the same page
Structural Elements
- Structural elements include:
- Header -
<header></header>
- Nav -
<nav></nav>
- Main -
<main></main>
- Footer -
<footer></footer>
HTML Tables
- HTML tables arrange data into rows and columns for logical grouping
- Table data is best presented via tabular form
Creating tables
- Tables are created with the
<table></table> tags, acting as a container for table rows
- Table rows are created with
<tr></tr> tags, providing a container for table data cells
- Table data cells are created with
<td></td> tags, enclosing the actual data
- Creating tables example:
<table>
<tr>
<td>Month</td>
<td>Sales</td>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
</table>
- Output:
Month Sales
January $10,000
Enhancing tables
- Optionally, the
</td> and </tr> closing tags can be omitted
- Table titles are specified with the
<caption></caption> tags, and row/column headings with <th></th> tags
- Caption must immediately follow the opening
<table> tag
- Table title can be specified with
- Column headings can be added using
- Table headers and footers can be enhanced with special rows using and
- Standard rows are enclosed using after those elements are used
- Keypoints for enhancement
- Multiple elements can group rows for long tables
- Headers and footers repeat on each page when printed
-
must appear before , but after
if applicable
- Enhancements improve readability and organization
Table Colspan & Rowspan
- Colspan makes a cell span over multiple columns
- Rowspan makes a cell span over multiple rows
Studying That Suits
You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
More Like This
Use Quizgecko on...
Browser
Signup and view all the flashcards
tag
Signup and view all the flashcards
Valid HTML Benefit
Signup and view all the flashcards
Study Notes
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating web pages
- HTML describes the structure of a web page
- HTML consists of elements that tell the browser how to display content
- HTML elements label pieces of content like headings, paragraphs, and links
Simple HTML Document
- HTML documents begin with
<!DOCTYPE html>.
- The HTML document starts with
<html> and ends with </html>.
- The visible part of the HTML document is between
<body> and </body>.
- The content inside the
<body> section will be displayed in a browser
- The content inside the
<title> element will be shown in the browser's title bar or in the page's tab.
HTML Elements
- An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>- The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
- Certain HTML elements lack content, such as the
<br> element, and are termed empty elements, thus not requiring closing tags.
Web Browsers
- Web browsers (Chrome, Edge, Firefox, Safari) read HTML documents and display them correctly
- Browsers use HTML tags to determine document display, but do not show the actual tags themselves
Special Entity Characters
- Special characters like quotes and the copyright symbol can be displayed using entity codes
© displays the copyright symbol ©
Nested HTML Elements
- HTML elements can be nested, meaning an element can contain other elements.
- All HTML documents consist of nested HTML elements
- Example of nested elements:
<html> <body> <h1></h1> <p></p> </body> </html>
- The
<html> element is the root element and defines the whole HTML document with start and end tags, containing a <body> element.
HTML Attributes
- HTML attributes provide additional information about elements and are specified in the start tag
- Attributes follow a name="value" format
- The
<a> tag defines a hyperlink, its href attribute specifying the URL to which a link navigates: <a href="https://www.google.com">Visit google</a>
- The
<img> tag may include width and height attributes specifying image dimensions: <img src="img.jpg" width="500" height="600">
Block and Inline Elements
- Every HTML element has a default display value, depending on its type
Block-Level Elements
- Block-level elements always start on a new line, with browsers automatically adding some space (margin) before and after the element
- Example:
<p> <div>
<p> defines a paragraph in an HTML document<div> defines a division or a section in an HTML document
Inline Elements
- Inline elements do not start on a new line and take up only as much width as necessary
- Example:
<span>Hello World</span>
HTML Headings
- Display titles or subtitles on a webpage via heading tags
- Headings are defined with the
<h1> to <h6> tags.
<h1> defines the most important heading<h6> defines the least important heading
- Example:
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>
HTML Paragraphs
- Paragraphs are defined with the
<p> tag
- Example:
<p>This is a paragraph.</p><p>This is another paragraph.</p>
HTML Quotations
- The
<blockquote> element defines a section that is quoted from another source
- Browsers usually indent
<blockquote> elements
HTML Links
- The
<a> tag creates hyperlinks to allow users to navigate
- Links are defined with the
<a> tag:
- Absolute links point to other websites
<a href="https://yahoo.com">Yahoo</a>
- Relative links point to pages on your own site:
<a href="index.html">Home</a>
HTML Links for Emails
<a> can create links for email addresses and phone numbers- The
mailto: protocol creates a link that opens the default email client with the specified email address pre-filled: <a href="mailto:[email protected]">This is a link</a>
HTML Links for Phone Numbers
- The
tel: protocol creates a clickable phone number link on mobile devices: <a href="tel:+97470070070">Call Us</a>
HTML Line Break Element
<br> creates a line break and is a stand-alone tag- In HTML5 it is called a void element
- Causes the next element or text to display on a new line
HTML Horizontal Rule Element
<hr> configures a horizontal line and is a void element- Should indicate a thematic break at the paragraph level in HTML5
HTML Phrase Elements
-
Indicate the context and meaning of the text and display inline with the text
-
<b></b> - This text is displayed in bold font
-
<strong></strong> - This text has strong importance and is displayed in bold
-
<i></i> - This text is displayed in italic font
-
<em></em> - This text has emphasis and is displayed in italic font
HTML Lists
- HTML lists allow web developers to group a set of related items in lists
- Unordered Lists
- Description Lists
- Ordered Lists
Unordered HTML Lists
- An unordered list starts with the
<ul> tag and each list item starts with the <li> tag
- The list items are marked with bullets (small black circles) by default:
- Example:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>- Result:
- Coffee
- Tea
- Milk
Ordered HTML Lists
- An ordered list starts with the
<ol> tag and each list item starts with the <li> tag
- The list items are marked with numbers by default
- Example:
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>- Result:
-
- Coffee
-
- Tea
-
- Milk
HTML Description Lists
- A description list is a list of terms, with a description of each term
- The
<dl> tag defines the description list
- The
<dt> tag defines the term (name), and the <dd> tag describes each term
- Example:
<dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dt>Milk</dt> <dd>white cold drink</dd> </dl>- Result:
- Coffee black hot drink
- Milk white cold drink
HTML Div Element
- The
<div> element is used as a container for other HTML elements
- The
<div> element is by default a block element, meaning it takes all available width, and comes with line breaks before and after
- It can contain other block display and inline display elements
- There can be many
<div> containers on the same page
Structural Elements
- Structural elements include:
- Header -
<header></header>
- Nav -
<nav></nav>
- Main -
<main></main>
- Footer -
<footer></footer>
HTML Tables
- HTML tables arrange data into rows and columns for logical grouping
- Table data is best presented via tabular form
Creating tables
- Tables are created with the
<table></table> tags, acting as a container for table rows
- Table rows are created with
<tr></tr> tags, providing a container for table data cells
- Table data cells are created with
<td></td> tags, enclosing the actual data
- Creating tables example:
<table>
<tr>
<td>Month</td>
<td>Sales</td>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
</table>
- Output:
Month Sales
January $10,000
Enhancing tables
- Optionally, the
</td> and </tr> closing tags can be omitted
- Table titles are specified with the
<caption></caption> tags, and row/column headings with <th></th> tags
- Caption must immediately follow the opening
<table> tag
- Table title can be specified with
- Column headings can be added using
- Table headers and footers can be enhanced with special rows using and
- Standard rows are enclosed using after those elements are used
- Keypoints for enhancement
- Multiple elements can group rows for long tables
- Headers and footers repeat on each page when printed
-
must appear before , but after
if applicable
- Enhancements improve readability and organization
Table Colspan & Rowspan
- Colspan makes a cell span over multiple columns
- Rowspan makes a cell span over multiple rows
Studying That Suits
You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
More Like This
Use Quizgecko on...
Browser
Signup and view all the flashcards
Valid HTML Benefit
Valid HTML Benefit
Signup and view all the flashcards
Study Notes
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating web pages
- HTML describes the structure of a web page
- HTML consists of elements that tell the browser how to display content
- HTML elements label pieces of content like headings, paragraphs, and links
Simple HTML Document
- HTML documents begin with
<!DOCTYPE html>. - The HTML document starts with
<html>and ends with</html>. - The visible part of the HTML document is between
<body>and</body>. - The content inside the
<body>section will be displayed in a browser - The content inside the
<title>element will be shown in the browser's title bar or in the page's tab.
HTML Elements
- An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>- The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1> - Certain HTML elements lack content, such as the
<br>element, and are termed empty elements, thus not requiring closing tags.
Web Browsers
- Web browsers (Chrome, Edge, Firefox, Safari) read HTML documents and display them correctly
- Browsers use HTML tags to determine document display, but do not show the actual tags themselves
Special Entity Characters
- Special characters like quotes and the copyright symbol can be displayed using entity codes
©displays the copyright symbol ©
Nested HTML Elements
- HTML elements can be nested, meaning an element can contain other elements.
- All HTML documents consist of nested HTML elements
- Example of nested elements:
<html> <body> <h1></h1> <p></p> </body> </html>
- The
<html>element is the root element and defines the whole HTML document with start and end tags, containing a<body>element.
HTML Attributes
- HTML attributes provide additional information about elements and are specified in the start tag
- Attributes follow a name="value" format
- The
<a>tag defines a hyperlink, itshrefattribute specifying the URL to which a link navigates:<a href="https://www.google.com">Visit google</a> - The
<img>tag may includewidthandheightattributes specifying image dimensions:<img src="img.jpg" width="500" height="600">
Block and Inline Elements
- Every HTML element has a default display value, depending on its type
Block-Level Elements
- Block-level elements always start on a new line, with browsers automatically adding some space (margin) before and after the element
- Example:
<p><div><p>defines a paragraph in an HTML document<div>defines a division or a section in an HTML document
Inline Elements
- Inline elements do not start on a new line and take up only as much width as necessary
- Example:
<span>Hello World</span>
HTML Headings
- Display titles or subtitles on a webpage via heading tags
- Headings are defined with the
<h1>to<h6>tags.<h1>defines the most important heading<h6>defines the least important heading
- Example:
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3>
HTML Paragraphs
- Paragraphs are defined with the
<p>tag - Example:
<p>This is a paragraph.</p><p>This is another paragraph.</p>
HTML Quotations
- The
<blockquote>element defines a section that is quoted from another source - Browsers usually indent
<blockquote>elements
HTML Links
- The
<a>tag creates hyperlinks to allow users to navigate - Links are defined with the
<a>tag: - Absolute links point to other websites
<a href="https://yahoo.com">Yahoo</a> - Relative links point to pages on your own site:
<a href="index.html">Home</a>
HTML Links for Emails
<a>can create links for email addresses and phone numbers- The
mailto:protocol creates a link that opens the default email client with the specified email address pre-filled:<a href="mailto:[email protected]">This is a link</a>
HTML Links for Phone Numbers
- The
tel:protocol creates a clickable phone number link on mobile devices:<a href="tel:+97470070070">Call Us</a>
HTML Line Break Element
<br>creates a line break and is a stand-alone tag- In HTML5 it is called a void element
- Causes the next element or text to display on a new line
HTML Horizontal Rule Element
<hr>configures a horizontal line and is a void element- Should indicate a thematic break at the paragraph level in HTML5
HTML Phrase Elements
-
Indicate the context and meaning of the text and display inline with the text
-
<b></b>- This text is displayed in bold font -
<strong></strong>- This text has strong importance and is displayed in bold -
<i></i>- This text is displayed in italic font -
<em></em>- This text has emphasis and is displayed in italic font
HTML Lists
- HTML lists allow web developers to group a set of related items in lists
- Unordered Lists
- Description Lists
- Ordered Lists
Unordered HTML Lists
- An unordered list starts with the
<ul>tag and each list item starts with the<li>tag - The list items are marked with bullets (small black circles) by default:
- Example:
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>- Result:
- Coffee
- Tea
- Milk
Ordered HTML Lists
- An ordered list starts with the
<ol>tag and each list item starts with the<li>tag - The list items are marked with numbers by default
- Example:
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>- Result:
-
- Coffee
-
- Tea
-
- Milk
HTML Description Lists
- A description list is a list of terms, with a description of each term
- The
<dl>tag defines the description list - The
<dt>tag defines the term (name), and the<dd>tag describes each term - Example:
<dl> <dt>Coffee</dt> <dd>black hot drink</dd> <dt>Milk</dt> <dd>white cold drink</dd> </dl>- Result:
- Coffee black hot drink
- Milk white cold drink
HTML Div Element
- The
<div>element is used as a container for other HTML elements - The
<div>element is by default a block element, meaning it takes all available width, and comes with line breaks before and after - It can contain other block display and inline display elements
- There can be many
<div>containers on the same page
Structural Elements
- Structural elements include:
- Header -
<header></header> - Nav -
<nav></nav> - Main -
<main></main> - Footer -
<footer></footer>
- Header -
HTML Tables
- HTML tables arrange data into rows and columns for logical grouping
- Table data is best presented via tabular form
Creating tables
- Tables are created with the
<table></table>tags, acting as a container for table rows - Table rows are created with
<tr></tr>tags, providing a container for table data cells - Table data cells are created with
<td></td>tags, enclosing the actual data - Creating tables example:
<table>
<tr>
<td>Month</td>
<td>Sales</td>
</tr>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
</table>
- Output:
Month Sales January $10,000
Enhancing tables
- Optionally, the
</td>and</tr>closing tags can be omitted - Table titles are specified with the
<caption></caption>tags, and row/column headings with<th></th>tags - Caption must immediately follow the opening
<table>tag - Table title can be specified with
tags - Column headings can be added using
tags - Table headers and footers can be enhanced with special rows using and
- Standard rows are enclosed using after those elements are used
- Keypoints for enhancement
- Multiple elements can group rows for long tables
- Headers and footers repeat on each page when printed
- must appear before , but after
if applicable - Enhancements improve readability and organization
Table Colspan & Rowspan
- Colspan makes a cell span over multiple columns
- Rowspan makes a cell span over multiple rows
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Related Documents
More Like This
Use Quizgecko on...Browser
- Standard rows are enclosed using after those elements are used
