HTML Reference

<html>

The <html> tag represents the root of an HTML document. It is the container for all other HTML elements (except for the <!DOCTYPE> tag). All HTML content must be enclosed within the <html> tags.

Usage

The <html> tag is the root element of an HTML page. It should include the lang attribute to declare the language of the document, which helps with accessibility and SEO.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

Real World Example

Every webpage on the internet uses the <html> tag as the root element. For example, when you view the source of any website, you'll see the HTML structure begins with <html> and ends with </html>.

Practice Exercise

Create a basic HTML5 document structure with the correct DOCTYPE declaration and language attribute set to "en".

More Practice Questions

  1. What is the purpose of the lang attribute in the <html> tag?
  2. Can an HTML document have multiple <html> tags?
  3. What is the difference between the <html> tag and the <body> tag?
  4. Why is it important to include the DOCTYPE declaration before the <html> tag?
  5. How would you set the language of an HTML document to Spanish?

<body>

The <body> tag contains all the contents of an HTML document, such as text, images, hyperlinks, tables, lists, etc. There can only be one <body> element in an HTML document.

Usage

The <body> tag defines the document's body and is a container for all the visible contents of a web page. It can contain various elements like headings, paragraphs, images, links, lists, etc.

Code Example

<!DOCTYPE html>
<html>
<head>
  <title>Body Tag Example</title>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
  <a href="https://www.example.com">This is a link</a>
  <img src="image.jpg" alt="Sample image">
</body>
</html>

Real World Example

Every visible element on a webpage resides within the <body> tag. For example, when you visit a news website, all the articles, images, navigation menus, and footer content are contained within the <body> element.

Practice Exercise

Create a basic HTML page with a body containing a heading, a paragraph, an image, and a link to another website.

More Practice Questions

  1. How many <body> tags can an HTML document contain?
  2. What is the difference between the <head> and <body> tags?
  3. Can JavaScript directly manipulate elements in the <body>?
  4. What are some common attributes used with the <body> tag?
  5. Why is it important to structure content properly within the <body> tag?

<title>

The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. It is required in all HTML documents.

Usage

The <title> element defines the document's title that is shown in a browser's title bar or a page's tab. It is also used as the default name for bookmarks and is important for SEO as search engines display it in search results.

Code Example

<!DOCTYPE html>
<html>
<head>
  <title>HTML Reference - Learn Web Development</title>
</head>
<body>
  <h1>Welcome to our HTML Reference</h1>
  <p>This page contains information about HTML tags.</p>
</body>
</html>

Real World Example

On e-commerce sites like Amazon, the <title> tag typically includes the product name, key features, and price to attract clicks from search engine results. For example: "Samsung 55-inch QLED TV - 4K UHD Smart TV with HDR | Amazon.com".

Practice Exercise

Create an HTML document with a title that follows best practices for SEO, including a primary keyword and brand name.

More Practice Questions

  1. Where is the <title> tag placed in an HTML document?
  2. How does the <title> tag affect SEO?
  3. What is the ideal length for a title tag?
  4. Can a document have multiple <title> tags?
  5. What happens if you omit the <title> tag?

<meta>

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page but will be machine-readable. It is typically used to specify page description, keywords, author, and viewport settings.

Usage

Meta elements are typically used to specify character set, page description, keywords, author, and viewport settings. They are placed inside the <head> element and are used by browsers, search engines, and other web services.

Common Meta Tag Attributes

Attribute Value Description
charset character_set Specifies the character encoding for the HTML document
name application-name, author, description, etc. Specifies the name for the metadata
content text Specifies the value associated with the name or http-equiv attribute
http-equiv content-type, default-style, refresh Provides an HTTP header for the information in the content attribute

Code Example

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Free web development tutorials and references">
  <meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
  <meta name="author" content="John Doe">
  <meta http-equiv="refresh" content="30">
  <title>Meta Tag Example</title>
</head>
<body>
  <h1>Meta Tags Example</h1>
  <p>This page demonstrates various meta tags.</p>
</body>
</html>

Real World Example

News websites often use meta tags to control how articles appear when shared on social media. For example, The New York Times uses Open Graph meta tags to ensure that when an article is shared on Facebook, it displays a specific image, title, and description.

Practice Exercise

Create a set of meta tags for a blog post about "10 Best Travel Destinations in 2023" that includes charset, viewport, description, keywords, and author information.

More Practice Questions

  1. What is the purpose of the charset meta tag?
  2. Why is the viewport meta tag important for mobile devices?
  3. How do search engines use the description meta tag?
  4. What is the difference between the name and http-equiv attributes?
  5. Are keywords meta tags still important for SEO?

<h1> to <h6>

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading, while <h6> defines the least important heading. Search engines use headings to index the structure and content of web pages.

Usage

Headings help create a hierarchical structure for your content. Users often skim pages by headings, so it's important to use them to convey document structure. <h1> should be used for main headings, followed by <h2>, then <h3>, and so on.

Heading Levels and Their Typical Use

Tag Description Common Usage
<h1> Main heading of the page Page title, primary content heading
<h2> Second-level heading Main section headings
<h3> Third-level heading Sub-sections under h2
<h4> Fourth-level heading Sub-sections under h3
<h5> Fifth-level heading Rarely used, for deep nesting
<h6> Sixth-level heading Rarely used, for deepest nesting

Code Example

<h1>Main Title of the Page</h1>
<p>This is an introduction to the page content.</p>

<h2>First Major Section</h2>
<p>This section contains important information.</p>

<h3>Subsection of First Section</h3>
<p>More detailed information about the first section.</p>

<h2>Second Major Section</h2>
<p>This is another important section.</p>

<h3>Subsection of Second Section</h3>
<p>Details about the second section.</p>

<h4>A Minor Point</h4>
<p>Additional information about the subsection.</p>

Real World Example

Wikipedia articles make extensive use of heading tags to organize content. The article title is an <h1>, major sections like "History", "Geography", and "Demographics" are <h2> tags, and subsections within those are <h3> tags, creating a clear content hierarchy.

Practice Exercise

Create a properly structured document about "The Benefits of Exercise" with a main heading, three section headings, and at least two subsections under one of the sections.

More Practice Questions

  1. Why should you avoid skipping heading levels (e.g., going from h2 to h4)?
  2. How many h1 tags should a page typically have?
  3. What is the SEO impact of properly structured headings?
  4. How do screen readers use heading tags?
  5. Can CSS change the visual appearance of heading tags without affecting their semantic meaning?

<p>

The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS.

Usage

The <p> element is used to structure text content into logical paragraphs. It's a block-level element that typically contains text, images, links, and other inline elements. Screen readers and other assistive technologies use paragraph tags to help users navigate content.

Code Example

<p>This is a paragraph of text. It can contain <strong>bold text</strong>, <em>italic text</em>, and even <a href="#">links</a>.</p>

<p>This is another paragraph. Browsers automatically add space between paragraphs to improve readability.</p>

<p>Paragraphs are block-level elements, which means they take up the full width available and start on a new line.</p>

Real World Example

News articles and blog posts make extensive use of paragraph tags to structure content. For example, The New York Times online articles use <p> tags for each paragraph of the article, making the text readable and properly spaced.

Practice Exercise

Create three paragraphs about your favorite hobby, with each paragraph containing at least three sentences and some formatted text (bold, italic, or link).

More Practice Questions

  1. What is the default margin value for paragraph tags in most browsers?
  2. Can paragraph tags contain other block-level elements?
  3. How does the paragraph tag differ from the div tag semantically?
  4. What happens if you nest paragraph tags inside each other?
  5. How can you change the spacing between paragraphs using CSS?

<a>

The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.

Usage

Anchor tags are fundamental to web navigation. They can link to other web pages, files, locations within the same page, email addresses, or telephone numbers. By default, links appear as underlined text and change color when visited.

Common Anchor Tag Attributes

Attribute Value Description
href URL Specifies the URL of the page the link goes to
target _blank, _self, _parent, _top Specifies where to open the linked document
rel nofollow, noopener, noreferrer Specifies the relationship between the current and linked document
download filename Specifies that the target will be downloaded when clicked

Code Example

<!-- External link -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- Link opening in new tab -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Visit Example.com in a new tab</a>

<!-- Internal page link -->
<a href="/about.html">About Us</a>

<!-- Link to section on same page -->
<a href="#section1">Jump to Section 1</a>

<!-- Email link -->
<a href="mailto:someone@example.com">Send Email</a>

<!-- Telephone link -->
<a href="tel:+1234567890">Call Us</a>

<!-- Download link -->
<a href="document.pdf" download>Download PDF</a>

Real World Example

Navigation menus on websites are built using anchor tags. For example, Amazon's main navigation contains links like "Today's Deals", "Customer Service", and "Registry" that are all <a> tags pointing to different sections of the site.

Practice Exercise

Create a navigation bar with five links, including one external link that opens in a new tab, one email link, and one telephone link.

More Practice Questions

  1. What is the purpose of the rel="noopener noreferrer" attribute?
  2. How do you create a link that jumps to a specific section on the same page?
  3. What's the difference between absolute and relative URLs in href attributes?
  4. How can you make a link open the user's email client?
  5. Why is it important to provide meaningful link text?

<img>

The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; they are linked to web pages. The <img> tag creates a holding space for the referenced image.

Usage

The <img> tag has two required attributes: src (specifies the path to the image) and alt (specifies an alternate text for the image). It's an empty element, meaning it has no closing tag and can't contain any content.

Common Image Tag Attributes

Attribute Value Description
src URL Specifies the path to the image (required)
alt text Specifies an alternate text for the image (required)
width pixels Specifies the width of the image
height pixels Specifies the height of the image
loading lazy, eager Specifies whether a browser should load an image immediately or defer loading

Code Example

<!-- Basic image with alt text -->
<img src="cat.jpg" alt="A ginger cat sleeping on a sofa">

<!-- Image with dimensions -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Image with lazy loading -->
<img src="large-image.jpg" alt="Scenic landscape" loading="lazy">

<!-- Image as a link -->
<a href="large-version.jpg">
  <img src="thumbnail.jpg" alt="View larger image">
</a>

Real World Example

E-commerce sites like Amazon use multiple <img> tags for each product. They typically include a main product image, thumbnail images for different angles, and often use lazy loading to improve page performance by loading images only as they come into view.

Practice Exercise

Create an image gallery with three images, each with appropriate alt text, and set the middle image to lazy load. Make the first image a link to a larger version.

More Practice Questions

  1. Why is the alt attribute important for accessibility?
  2. What happens if the src attribute points to a non-existent image?
  3. Should you use width and height attributes or CSS for image sizing?
  4. What is the benefit of lazy loading images?
  5. How can you make an image responsive (scale with screen size)?

<div>

The <div> tag defines a division or section in an HTML document. It is used as a container for HTML elements, which is then styled with CSS or manipulated with JavaScript.

Usage

The <div> element is a block-level container that groups elements for styling purposes or to create layout structures. It has no semantic meaning on its own but is incredibly versatile for organizing content.

Code Example

<div class="container">
  <div class="header">
    <h1>Website Title</h1>
  </div>

  <div class="content">
    <div class="sidebar">
      <h2>Navigation</h2>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </div>

    <div class="main-content">
      <h2>Welcome</h2>
      <p>This is the main content area.</p>
    </div>
  </div>

  <div class="footer">
    <p>Copyright 2023</p>
  </div>
</div>

Real World Example

Modern websites use countless <div> elements to structure their layouts. For example, Twitter's interface uses divs to create the sidebar, main feed, trending section, and other components that make up the page.

Practice Exercise

Create a basic webpage layout with a header, main content area, sidebar, and footer using div elements with appropriate class names.

More Practice Questions

  1. What is the main difference between div and span elements?
  2. When should you use a div instead of a semantic HTML5 element?
  3. How can you center a div horizontally on a page?
  4. What CSS property is commonly used with divs to create layouts?
  5. Can a div contain other div elements?

<span>

The <span> tag is an inline container used to mark up a part of a text, or a part of a document. It is often used to apply styles or manipulate text with JavaScript.

Usage

The <span> element is an inline equivalent of the <div> element. It's used to apply styles, classes, or IDs to specific portions of text without creating a line break. It has no semantic meaning on its own.

Code Example

<p>This is a paragraph with <span class="highlight">highlighted text</span> in the middle.</p>

<p>The meeting is on <span class="date">March 12, 2023</span> at <span class="time">2:00 PM</span>.</p>

<p>Chemical formula for water is H<span class="subscript">2</span>O.</p>

<p>The <span id="important">most important point</span> is often emphasized.</p>

<p>This word is <span style="color: red;">colored</span> using inline styles.</p>

Real World Example

Word processors and text editors like Google Docs use span elements extensively behind the scenes to apply formatting to specific portions of text, such as bold, italic, colored text, or different font sizes within the same paragraph.

Practice Exercise

Create a paragraph that includes at least three span elements with different classes to style specific words or phrases differently from the rest of the text.

More Practice Questions

  1. What is the key difference between span and div elements?
  2. Can span elements contain block-level elements?
  3. How is span typically used with JavaScript?
  4. When should you use a semantic element instead of a span?
  5. Can you apply multiple classes to a single span element?

<br>

The <br> tag inserts a single line break. It is an empty tag which means that it has no end tag. It is useful for writing addresses or poems.

Usage

The <br> element creates a line break in text. It should be used to separate lines of text where the division of lines is significant to the content's meaning, such as in poetry or addresses. For general spacing between elements, CSS margins should be used instead.

Code Example

<p>
  123 Main Street<br>
  Apt 4B<br>
  New York, NY 10001
</p>

<p>
  The Road Not Taken<br>
  by Robert Frost<br>
  <br>
  Two roads diverged in a yellow wood,<br>
  And sorry I could not travel both<br>
  And be one traveler, long I stood<br>
  And looked down one as far as I could<br>
  To where it bent in the undergrowth;
</p>

<p>
  Line of text<br>
  Another line after a break<br><br>
  Line after double break
</p>

Real World Example

Contact pages on websites often use <br> tags to format addresses with proper line breaks. For example, a company's contact information might display the address with line breaks between the street, city, and zip code.

Practice Exercise

Create an address block for a business that includes the company name, street address, city, state, zip code, and phone number, using br tags for appropriate line breaks.

More Practice Questions

  1. What is the difference between using br tags and using CSS for spacing?
  2. Is the br tag a block-level or inline element?
  3. Can you use multiple br tags consecutively to create more space?
  4. When should you avoid using br tags?
  5. How does a screen reader typically interpret br tags?

<ul>, <ol>, and <li>

The <ul> tag defines an unordered (bulleted) list. The <ol> tag defines an ordered (numbered) list. The <li> tag defines a list item and is used inside both ul and ol elements.

Usage

Lists are used to present items in a structured format. Unordered lists (ul) are used when the order of items doesn't matter, typically displayed with bullets. Ordered lists (ol) are used when the sequence is important, displayed with numbers or letters. List items (li) contain the actual content of each list element.

List Attributes

Attribute Applies To Description
type ol Specifies the kind of marker to use (1, A, a, I, i)
start ol Specifies the start value of the first list item
reversed ol Specifies that the list order should be descending
value li Specifies the value of a list item (for ordered lists)

Code Example

<!-- Unordered list -->
<h3>Shopping List</h3>
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Bread</li>
  <li>Fruits
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
    </ul>
  </li>
</ul>

<!-- Ordered list -->
<h3>Cooking Instructions</h3>
<ol>
  <li>Preheat oven to 350°F (175°C)</li>
  <li>Grease a 9x13 inch baking pan</li>
  <li>Mix dry ingredients in a large bowl</li>
  <li>Add wet ingredients and mix well</li>
  <li>Pour batter into prepared pan</li>
  <li>Bake for 30-35 minutes</li>
</ol>

<!-- Ordered list with attributes -->
<ol type="A" start="3">
  <li>Third item</li>
  <li>Fourth item</li>
  <li value="10">Tenth item (jump in numbering)</li>
  <li>Eleventh item</li>
</ol>

Real World Example

Recipe websites like AllRecipes.com make extensive use of ordered lists for cooking instructions and unordered lists for ingredients. Navigation menus on websites are also often built using unordered lists with list items for each menu option.

Practice Exercise

Create a nested list structure for a table of contents that includes at least two levels of hierarchy, using both ordered and unordered lists appropriately.

More Practice Questions

  1. What is the semantic difference between ul and ol elements?
  2. Can you nest different types of lists (ul inside ol, etc.)?
  3. How can you change the bullet style of an unordered list?
  4. What is the purpose of the value attribute in li elements?
  5. How do screen readers typically announce lists?

<main>

The <main> tag specifies the main content of a document. The content inside the main element should be unique to the document and should not contain any content that is repeated across documents.

Usage

The <main> element is a semantic HTML5 tag that represents the dominant content of the body of a document. It should not contain content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms. There should be only one main element per page.

Code Example

<body>
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <!-- Navigation -->
  </nav>

  <main>
    <h1>Welcome to Our Website</h1>
    <article>
      <h2>Latest News</h2>
      <p>This is the main content of our homepage...</p>
    </article>

    <section>
      <h2>Featured Products</h2>
      <!-- Product listings -->
    </section>
  </main>

  <aside>
    <!-- Sidebar content -->
  </aside>

  <footer>
    <!-- Footer content -->
  </footer>
</body>

Real World Example

News websites like BBC.com use the main element to contain the primary news articles and featured content, while keeping navigation, advertisements, and other supplementary content outside of the main element.

Practice Exercise

Create a basic page structure with header, nav, main, aside, and footer elements. The main element should contain a heading and two sections with appropriate content.

More Practice Questions

  1. How many main elements should a single web page contain?
  2. Can the main element be nested inside other elements like article or section?
  3. What types of content should not be placed inside the main element?
  4. How does the main element benefit accessibility?
  5. Is the main element a block-level or inline element?