HTML Fundamentals
40 Questions
4 Views

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

Which statement accurately describes the role of HTML in web development?

  • HTML is used to manage server-side operations and databases.
  • HTML is responsible for defining the structure and content of a webpage. (correct)
  • HTML is a programming language used to create dynamic web applications.
  • HTML is primarily used for styling the visual appearance of a webpage.

What is the correct syntax for declaring the document type in HTML5?

  • <!DOCTYPE HTML>
  • <DOCTYPE html>
  • <!DOCTYPE html> (correct)
  • <HTML DOCTYPE>

Which HTML element is used to define the main content of an HTML document?

  • <title>
  • <head>
  • <html>
  • <body> (correct)

What is the term for an HTML element that contains both a start tag and an end tag?

<p>Container element (D)</p> Signup and view all the answers

Which of the following is an example of a correctly nested HTML structure?

<p><strong>This is a paragraph.</strong></p> (B) Signup and view all the answers

What is the purpose of HTML attributes?

<p>To provide additional information about HTML elements. (C)</p> Signup and view all the answers

Which of the following HTML elements is considered an 'empty' element?

<p><br> (D)</p> Signup and view all the answers

Suppose you want to display the text 5 > 3 in an HTML document. What is the correct HTML to use so that the browser renders the > symbol correctly?

<p>5 &amp;gt 3 (A)</p> Signup and view all the answers

Consider an HTML document with improperly nested tags: <p><b>This is a test</p></b>. How might a browser handle this?

<p>The browser will attempt to correct the nesting, possibly leading to unexpected rendering. (D)</p> Signup and view all the answers

Given the following HTML snippet: <body><div><h1>Hello</h1></div><p>World</p></body>. If a CSS rule body > * { margin: 10px; } is applied, what elements will have a 10px margin?

<p>The <code>&lt;div&gt;</code> and <code>&lt;p&gt;</code> elements. (B)</p> Signup and view all the answers

Which of the following statements accurately describes HTML attributes?

<p>Attributes provide additional information about HTML elements and are specified in the start tag. (A)</p> Signup and view all the answers

What attribute is mandatory within the <a> tag to create a hyperlink to another webpage?

<p>href (B)</p> Signup and view all the answers

Which of the options represents a block-level element?

<p> (B) Signup and view all the answers

Which HTML tag is used to define the most important heading?

<h1> (B) Signup and view all the answers

What is the primary function of the HTML <blockquote> element?

<p>To indicate a section quoted from another source. (B)</p> Signup and view all the answers

How do inline elements differ from block-level elements in HTML?

<p>Inline elements only take up as much width as necessary, while block-level elements take up the full width available. (B)</p> Signup and view all the answers

Consider the following HTML snippet: <a href="https://example.com"><img src="image.png"></a>. If a user clicks on the image, what will happen?

<p>The user will be redirected to <code>https://example.com</code>. (D)</p> Signup and view all the answers

Given the following HTML structure: <div><p>This is a paragraph with a <span>span element</span> inside.</p></div>, which of the following statements is most accurate?

<p>The <code>span</code> element will allow for specific styling of a portion of the text within the paragraph without creating a new block. (A)</p> Signup and view all the answers

In HTML, every element has a default display value. What determines this default display value?

<p>The type of element; whether it is a block-level or inline element. (A)</p> Signup and view all the answers

Consider a scenario where you want to embed an image that also acts as a link. However, you want the image to open in a new tab when clicked. Which of the options will achieve this?

<p>Both B and C (C)</p> Signup and view all the answers

HTML attributes provide additional information about HTML elements.

<p>True (A)</p> Signup and view all the answers

HTML attributes are specified in the closing tag of an element.

<p>False (B)</p> Signup and view all the answers

The href attribute within the <a> tag specifies the text that will be displayed as the hyperlink.

<p>False (B)</p> Signup and view all the answers

The <img> tag requires both width and height attributes to ensure proper image display and prevent layout shifting.

<p>True (A)</p> Signup and view all the answers

A block-level element, by default, flows within the surrounding content without starting on a new line.

<p>False (B)</p> Signup and view all the answers

Inline elements, like <span>, automatically add a margin before and after themselves.

<p>False (B)</p> Signup and view all the answers

The <h1> tag represents the least important heading on a webpage.

<p>False (B)</p> Signup and view all the answers

HTML paragraphs, defined by the <p> tag, are displayed without automatic line breaks.

<p>False (B)</p> Signup and view all the answers

The <abbr> element is exclusively used to define sections quoted from external sources.

<p>False (B)</p> Signup and view all the answers

An HTML <a> tag can be used to create hyperlinks to other websites, files, locations within the same page, email addresses, or any other URL.

<p>True (A)</p> Signup and view all the answers

HTML is employed to dictate the arrangement of web pages.

<p>True (A)</p> Signup and view all the answers

HTML documents require a declaration that begins with <!DOCTYPE html>.

<p>True (A)</p> Signup and view all the answers

An HTML element is delineated exclusively by a start tag.

<p>False (B)</p> Signup and view all the answers

Empty HTML elements, like the <br> tag, require a closing tag.

<p>False (B)</p> Signup and view all the answers

Nesting HTML elements is prohibited, as it complicates the document structure.

<p>False (B)</p> Signup and view all the answers

The <body> element is a child of the <head> element.

<p>False (B)</p> Signup and view all the answers

HTML attributes provide mandatory information about HTML elements.

<p>False (B)</p> Signup and view all the answers

The phrase element <strong> is semantically identical to the phrase element <em>, only differing in browser display defaults.

<p>False (B)</p> Signup and view all the answers

The HTML entity &nbsp; represents a non-breaking space, which is visually identical to a standard space but prevents line breaks at its location.

<p>True (A)</p> Signup and view all the answers

In valid HTML5, the following declaration will render in quirks mode in all browsers: <!DOCTYPE HTML SYSTEM "http://www.w3.org/TR/html4/strict.dtd">

<p>True (A)</p> Signup and view all the answers

Flashcards

What is HTML?

Hyper Text Markup Language, the standard language for creating web pages. It describes the structure of a web page using elements.

HTML element purpose

HTML elements tell the browser how to display content. They label pieces of content like headings, paragraphs, and links.

HTML element

An HTML element consists of a start tag, content, and an end tag. For example: Content

Nested HTML elements

HTML elements can be placed inside other HTML elements. The element contains , , and elements.

Signup and view all the flashcards

Root element

The element is the root element, containing all other elements.

Signup and view all the flashcards

HTML attributes

Provide additional information about HTML elements.

Signup and view all the flashcards

DOCTYPE declaration

All HTML documents must start with this declaration. It defines the document type.

Signup and view all the flashcards

and tags

The HTML document begins and ends with these tags respectively.

Signup and view all the flashcards

and tags

The visible part of the HTML document is between these tags.

Signup and view all the flashcards

Empty elements

Some HTML elements have no closing tag (e.g. ).

Signup and view all the flashcards

href Attribute

Specifies the URL of the page the link goes to.

Signup and view all the flashcards

Block-level elements

Elements that start on a new line and add space before and after the element.

Signup and view all the flashcards

Inline elements

Elements that do not start on a new line and only take up as much width as necessary.

Signup and view all the flashcards

and

Two commonly used block elements that define a paragraph and a division/section, respectively.

Signup and view all the flashcards

HTML Headings

Titles or subtitles on a webpage, defined with the

to

tags, where

is the most important.

Signup and view all the flashcards

tag

The HTML element used to define a paragraph.

Signup and view all the flashcards

tag

An HTML element that defines a section quoted from another source, usually indented by browsers.

Signup and view all the flashcards

tag for Links

An HTML tag used to create hyperlinks, allowing users to navigate between pages.

Signup and view all the flashcards

width and height attributes

The tag should also contain the width and height attributes, which specify the width and height of the image

Signup and view all the flashcards

Markup Language

A language used to create web pages, defining their structure and content.

Signup and view all the flashcards

Web Browsers

Software applications that allow users to view web pages.

Signup and view all the flashcards

HTML Documents

Files containing HTML code, structured with elements and tags.

Signup and view all the flashcards

HTML Paragraph

Used to define a block of text on a webpage.

Signup and view all the flashcards

HTML Quotation

Used to define a section quoted from another source.

Signup and view all the flashcards

HTML Links

Create hyperlinks to other web pages or resources.

Signup and view all the flashcards

tag and href attribute

The tag defines a hyperlink, while the href attribute specifies the URL the link points to.

Signup and view all the flashcards

and

elements

and elements are commonly used block-level elements.

Signup and view all the flashcards

tag (hyperlink)

Enables navigation to another page when clicked.

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 a series of elements

HTML Elements

  • HTML elements tell the browser how to display the content.
  • HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc..
  • An HTML element is defined by a start tag, some content, and an end tag: <tagname> Content goes here... </tagname>
  • An HTML element is everything from the start tag to the end tag
  • Some HTML elements have no content, like the <br> element, they are called empty elements and do not have an end tag
  • HTML elements can be nested, meaning that elements can contain other elements
  • All HTML documents consist of nested HTML elements
  • The following example contains four HTML elements (<html>, <body>, <h1> and <p>)
<!DOCTYPE html>
 <html>
  <body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
  </body>
 </html>
  • The <html> element is the root element and defines the whole HTML document, it has a start tag <html> and an end tag </html>.
  • Inside the <html> element there is a <body>.

HTML Documents

  • All HTML documents must start with a document type declaration: <!DOCTYPE html>.
  • The HTML document itself begins with <html> and ends with </html>.
  • The visible part of the HTML document is between <body> and </body>.

Web Browsers

  • A web browser's (Chrome, Edge, Firefox, Safari) purpose is to read HTML documents and display them correctly.
  • A browser does not display the HTML tags, but uses them to determine how to display the document.

HTML Attributes

  • HTML attributes provide additional information about the HTML elements.
  • All HTML elements can have attributes.
  • Attributes provide additional information about elements.
  • Attributes are always specified in the start tag.
  • Attributes usually come in name/value pairs, like: name="value"
  • The <a>tag defines a hyperlink and the href attribute, specifies the URL of the page the link goes to: <a href="https://www.google.com">Visit google</a>
  • The <img> tag should contain the width and height attributes, which specify the width and height of the image: <img src="img.jpg" width="500" height="600>

HTML Block and Inline Elements

  • Every HTML element has a default display value, depending on what type of element it is.
  • Block-level elements always start on a new line, and the browsers automatically add some space (a margin) before and after the element: <p> <div>
  • Inline elements do not start on a new line, only take up as much width as necessary.
  • Two commonly used block elements are: <p> and <div>.
  • The <p> element defines a paragraph in an HTML document.
  • The <div> element defines a division or a section in an HTML document.
  <p>Hello World</p>
  <div>Hello World</div>
  • An inline element does not start on a new line, only takes up as much width as necessary.
  • <span> is an inline element inside a paragraph.
 <span>Hello World</span>

HTML Headings

  • HTML headings are titles or subtitles that you want to display on a webpage.
  • HTML headings are defined with the <h1> to <h6> tags.
  • <h1> defines the most important heading and <h6> defines the least important heading.

HTML Paragraphs

  • HTML paragraphs are defined with the <p> tag.

HTML Quotations

  • The HTML <blockquote> element defines a section that is quoted from another source and browsers usually indent <blockquote> elements.
  • The <a> tag in HTML is typically used to create hyperlinks, allowing users to navigate from one page to another.
  • HTML links are defined with the <a> tag.
  • To link to other websites use an absolute link <a href="https://yahoo.com">Yahoo</a>
  • To link to pages on your own site use a relative link <a href="index.html">Home</a>
  • <a> can also be used to create links for email or phone numbers by using the mailto: or tel: protocols inside the href attribute.
 <a href="mailto:[email protected]">This is a link</a>
 <a href="tel:+97470070070">Call Us</a>

HTML Line Break Element

  • The Line Break element </br>is a stand-alone tag and is called a "void element" in HTML5.
  • <br> causes the next element or text to display on a new line.

HTML Horizontal Rule Element

  • The Horizontal Rule element is a void element <hr>.
  • <hr> Configures a horizontal line on the page and in HTML5, it should be used to indicate a thematic break at the paragraph level

HTML Phrase elements

  • Indicate the context and meaning of the text and display inline with the text:
    • <b></b> - Text is displayed in bold font
    • <strong></strong> - Text has strong importance and is displayed in bold
    • <i></i> - Text is displayed in italic font
    • <em></em> - 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.
  • There are unordered, description, and ordered Lists

HTML Unordered 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.
<ul>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ul>

HTML Ordered 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.
<ol>
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
</ol>

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
<dl>
 <dt>Coffee</dt>
  <dd>black hot drink</dd>
 <dt>Milk</dt>
  <dd>white cold drink</dd>
</dl>

HTML Div Element

  • The <div> element is used as a container for other HTML elements.
  • By default, the <div> element is a block element, meaning that it takes all available width, and comes with line breaks before and after.
  • <div> includes other block display and inline display elements and you can have many <div> containers on the same page.

Structural Elements

 <header></header>
 //Contains the headings
 <nav></nav>
 //Contains the main navigation
 <main></main>
//Contains the main content
 <footer></footer>
//Contains the footer

HTML Tables

  • HTML tables allow web developers to arrange data into rows and columns and it is best practice to present data in tabular form.
  • Tables are created table with <table> </table> tags, which provide a container for table rows.
<table>
  <!-- Table rows to go here. -->
</table>
  • Each table row is created with <tr> </tr> tags, which provide a container for a line of table data cells.
<table>
  <tr>
  </tr>
</table>
  • Each table data cell is created with <td> </td> tags, which enclose the actual data to be presented.
  • Optionally, the </td> and </tr> closing tags may be omitted, either form of the <td> and <tr> element is valid.
<table>
 <tr>
  <td>Month</td>
  <td>Sales</td>
 </tr>
 <tr>
  <td>January</td>
  <td>$10,000</td>
 </tr>
</table>
  • A table title can be specified with <caption> </caption> tags.
  • Row and column headings can be added between <th> </th> tags.
  • If a <caption> element is to be included it must immediately follow the opening <table> tag.
<table>
 <caption>Monthly Sales Report</caption>
 <tr>
   <th>Month</th>
   <th>Sales</th>
 </tr>
 <tr>
  <td>January</td>
  <td>$10,000</td>
 </tr>
</table>
  • To make a cell span over multiple columns you add colspan to the table header:
<table>
  <caption>Monthly Sales Report</caption>
    <tr>
      <th colsapn="2">Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Abdullah</td>
      <td>Ali</td>
      <td>28</td>
   </tr>
</table>
  • To make a cell span over multiple rows you add rowspan to the table data:
<table>
  <caption>Monthly Sales Report</caption>
    <tr>
      <th>Day</th>
      <th>Time</th>
      <th>Event</th>
    </tr>
    <tr>
      <td rowspan="2">Monday</td>
      <td>09:00 AM</td>
      <td>Meeting</td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td>Workshop</td>
    </tr>
</table>

Enhance Tables

  • In HTML, tables can include special header and footer rows using <thead> and <tfoot> tags for additional table information.
  • Regular table rows must be enclosed in <tbody> tags when <thead> and/or <tfoot> are enabled.
  • Multiple <tbody> elements can group rows into sections for long tables.
  • If tables are printed, headers and footers can repeat on each page.
  • <thead> must appear before <tbody>, but after <caption> if present.
  • The use of <thead>, <tbody>, and <tfoot> enhances table readability and organization.
<table>
  <thead>
    <tr>
      <th>Day</th>
      <th>Time</th>
      <th>Event</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="2">Monday</td>
      <td>09:00 AM</td>
      <td>Meeting</td>
    </tr>
    <tr>
      <td>10:00 AM</td>
      <td>Workshop</td>
    </tr>
  </tbody>
  <tfoot>
    <tr><td>Footer Information</td></tr>
  </tfoot>
</table>

Writing Valid HTML

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

Chapter 01 HTML PDF

Description

Test your knowledge of basic HTML concepts, including document structure, elements, attributes, and syntax. This quiz covers HTML5 doctype declarations, nesting, and browser rendering.

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser