How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code:

<!DOCTYPE html>

<html>

    <head>

        <title>
            #
        <title>

        <style>



        </style>

    </head>

    <body>

    <table>
        <tr>
            <tb><a href="#">Home</a></tb>
            <tb><a href="#">About</a></tb>
            <tb><a href="#">Freelance</a></tb>
            <tb><a href="#">Contact</a></tb>
        <tr>
    </table>

    </body>

</html>

Is there a way to create a more effective menu bar?

htmlcsshtml-tablemenubar

Answer №1

As pointed out by other comments, there are multiple errors in the HTML code you provided.

Despite these errors, the page will still display something.

The main issue causing the content not to show up is that you forgot to close the <title> tag. Instead of having two opening tags, make sure to include both an opening and closing tag like so: <title>#</title>

Corrected Version:

<html>
  <head>
    <title>#</title>
    <style>
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td><a href="#">Home</a></td>
        <td><a href="#">About</a></td>
        <td><a href="#">Freelance</a></td>
        <td><a href="#">Contact</a></td>
      <tr>
    </table>
  </body>
</html>

Answer №2

After a helpful observation from @sideroxylon, it was pointed out that there was a significant issue in forgetting to close the <title> tag. Once this is rectified, all content should be visible.

Some other key points to consider:

  1. Make sure to include the <html> surrounding tag in your code.
  2. Instead of <tb>, use <td>.
  3. Consider using indentation for better code readability.

Answer №3

After reviewing the feedback, I have identified three issues in your HTML:

  1. The <title> tag was never closed (thanks to sideroxylon for pointing that out), causing rendering problems for other HTML elements.

  2. You mistakenly used <tb> instead of <td>, which is not a valid HTML tag. While it may function, relying on invalid tags can lead to bad practices.

  3. There is a missing <html> tag in your code snippet. It's important to include all necessary tags when sharing code for review.

If you're looking for a more efficient way to create a header bar, consider using an unordered list along with CSS instead of a table. Numerous tutorials are available online for reference – a quick search on Google will provide several options. CSS offers easier customization and management, resulting in visually appealing designs for the end-user once you become familiar with it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for incorporating HTML into a Drupal 7 module

I have created a module that accepts user input, validates it, and then displays an image based on the input provided by the user. Below is the code snippet for this functionality: <?php function fisheye_menu() { $items = ...

htmlimagedrupalmoduledrupal-7

Container Based Absolute Positioning in Bootstrap

I am struggling with aligning text properly within a container. I want it to look like the image, but the text keeps ending up at the far right side of the page. https://i.sstatic.net/aSsrC.png Could you assist me in achieving this? Thank you! HTML: &l ...

htmlcsscontainerspositioningabsolute

Efficiently filter through numerous options with a search-enabled multiselect feature

I am working on a Sveltekit Project that uses Bootstrap (Sveltestrap), and I am looking to implement a search function for it. My goal is to have an input field where users can type in the desired value and then be able to select multiple values like in a ...

csssveltesveltekitsvelte-component

How can I activate the fancy box from a specific div element?

There are plenty of variations to this question, but none of them seem to help. I am looking for a way to trigger fancybox from a div. Here is the div in question: <div class="port web">Website</div> This particular div has some CSS styles ap ...

jqueryhtmlcssfancybox

Unable to halt animation at the final frame

I'm attempting to implement a character jumping animation that should stop on the last frame, but it's not working as expected. I have tried using animation-fill-mode: forwards; but it didn't produce the desired outcome. Below is the c ...

cssanimationkeyframe

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Seeking assistance in creating a grid of divs, I am working on finding the square root of the user's input to determine the height and width required to form a square. The code below is what I currently have: $('#size').click(function(){ $ ...

javascriptjqueryhtmlcss

Utilizing consistent form elements throughout various tabs

I'm working on an HTML project where I need to replicate form elements across different tabs with each tab having unique values. To achieve this, I found a helpful resource at . Here is what I've attempted: <html> <link rel="stylesheet" ...

javascriptjqueryhtmlbootstrap-4

How can I utilize jQuery to iterate through every anchor tag on an HTML page?

I am looking to reference all anchor tags on the page that have a parent h2 tag. To achieve this, I need to iterate through each anchor tag that has a parent h2 and add an attribute using jQuery. <body> <h1>not me</h1> <a href ...

javascriptjqueryhtmlcss

Conceal optional navigation bar options once a user has logged in - utilizing Angular 8

I need assistance with hiding certain links in my navbar once a user has logged in. Below are the current navbar menus: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav ...

htmlangularfirebasefirebase-authenticationangular8

Refreshing HTML content using event delegation in JavaScript

Currently, I am attempting to dynamically load additional HTML content onto my webpage when a button is clicked. Here is the code that I have implemented so far: Main HTML Code: <div class="row" id="gallery-wrapper" > <di ...

javascriptjqueryhtmlajax

"Clicking on a hash link will refresh the current page

I have a snippet of code embedded on external websites that loads HTML, CSS, and JavaScript using a <script> tag. Within the code is a JavaScript function that triggers when a specific link is clicked: <a href="#">?</a> If there are Ja ...

htmlhashbrowser-bugs

Having trouble aligning the form in the center?

Despite #container being centered, I am struggling to center the <form>. It is important for me to have all elements inside the form aligned horizontally and despite trying various techniques, it is not working as expected. <!-- Container Start - ...

htmlcss

Chrome does not support CSS animation rotation over 360 degrees

After researching for hours, I've encountered an issue with my animation in Chrome. It seems that while transform: rotate(1080deg); works flawlessly in Firefox, it fails to rotate in Chrome. Surprisingly, I discovered that it only rotates in Chrome wh ...

csscss-animations

How can PHP be utilized to dynamically add classes to <li> elements and alternate them after every third item

I'm trying to find a way to add a class to an unordered list and alternate that class after every third item. Here's the code I have so far: <?php $i=1; foreach($this->items as $item) : ?> <li class="<?php if ($i % 3 == 0) : ...

phpcssaddclass

What methods can I use to ensure my images are optimized for mobile users?

I have gone through several other discussions related to this issue, but none of the suggested solutions are working for me. Even with max-width: 100% and height: auto, the images remain unresponsive. They appear fine on browsers like IE, FF, and Chrome on ...

htmlcssimagemobileresponsive

Applying CSS to select a different element style within a webpage

I was thinking about the possibility of linking one style to another using events like :focus or :hover in CSS alone, without the need for JavaScript. For instance, can the class "hitArea" change the background attribute of "changeArea" when it is in foc ...

javascriptcsshtmlweb-applicationsanimation

Arrange, Explore (Refine), Segment HTML Chart

Is there a way to efficiently sort, paginate, and search (based on a specific column) data in an HTML table? I've explored several JQuery plugins such as DataTable, TableSorter, Picnet Table Filter, but none seem to offer all three functionalities (se ...

phpjavascriptjqueryhtmljquery-plugins

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

javascriptjquerycss

What is the best way to incorporate a splatter image within an MDX blog post?

I am working on an MDX blog where I render a blog post. pages/index.tsx <main className="flex min-h-screen dark:bg-black"> <div className="wrapper mb-24 gap-8 px-8 lg:grid lg:grid-cols-[1fr,70px,min(70ch,calc(100%-64 ...

cssreactjsnext.jscss-positionmdxjs

Troubleshooting Problems with Cascading Style Sheets

Struggling with a layout issue on my website. I need to display an image with text at the beginning of the site-wrap div under the name background-image, with the text inside that div. Adding line-height to the text div adjusts its height, but I want to m ...

htmlcss