{Nadeem Haddadeen}

Arabic SEO Consultant, Python for SEO From Jordan

Web foundations

HTML, CSS, and JavaScript: what each does and what to check for SEO

Understand the different jobs of HTML, CSS, and JavaScript, then use that distinction to investigate missing content and broken page controls.

HTML, CSS, and JavaScript: what each does and what to check for SEO
Background photograph: Arnold Francisca / Unsplash. Title design: Nadeem Haddadeen.

When a page looks wrong, the first question is what failed. The content may be absent from the HTML, hidden by a CSS rule, or waiting for JavaScript that never completed. Looking only at the finished screen leaves those causes mixed together.

HTML provides the document structure. CSS controls presentation. JavaScript runs logic and can change the document after it arrives. Modern websites use all three, but they do not have to depend on them in the same way.

Inspect the HTML structure

HTML elements identify headings, paragraphs, links, and other parts of the page. An anchor with an href gives a link a destination. A heading identifies a section. These meanings remain useful even before a stylesheet makes the page look like the final design.

<h1>Running shoes</h1>
<p>Compare the available sizes and colours.</p>
<a href="/running-shoes/road/">Road running shoes</a>

Save this in a local HTML document and open it. The browser displays readable text and a working link without a custom stylesheet. The destination in this practice example requires a server route to work; the markup alone cannot create that route.

Use View page source to inspect the returned document. Use the Elements panel to inspect the current DOM. Scripts can add or remove elements, so these two views can differ.

Add CSS without changing the meaning

CSS can change typography, layout, spacing, and visibility. A responsive stylesheet can rearrange the same document for a narrow screen.

h1 { color: #253747; }
a { color: #9b4c2e; }
@media (max-width: 600px) {
  h1 { font-size: 1.8rem; }
}

A missing stylesheet may leave an unattractive page whose text and links still work. A problematic rule can hide useful content or push it outside the visible area. Inspect the element and its computed styles before deciding that the content is absent.

Identify what JavaScript supplies

JavaScript can open a menu, request product data, add content, and send analytics events. A page may arrive with its main text already in the HTML, or with an almost empty container that scripts populate later.

For example, a script might insert a price into a product card. If the script request fails, the heading can remain visible while the price is missing. If all the category links depend on that script, discovery may also need investigation.

Disable JavaScript for a controlled comparison, reload, and record what disappears. A missing feature tells you about the dependency. It does not, by itself, establish what Google rendered or indexed.

Check content and controls separately

Use a page with a heading, product information, and a menu. Compare the original source with the live DOM, then check these questions:

  • Is the main text present in the returned HTML?
  • Does CSS hide or reorder it on mobile?
  • Are navigation destinations real links?
  • Does a script add content only after a click or scroll?
  • Are failed requests or console errors associated with the missing part?

A menu opening successfully does not confirm that its destinations exist in the HTML. A price appearing in your browser does not confirm that every crawler received the same response.

The detailed diagnosis belongs in a JavaScript rendering investigation. CSS delivery has its own checks for render-blocking stylesheets. Keeping those investigations specific makes the development work easier to reproduce.

My JavaScript SEO service covers content, links, and rendering dependencies. For teams implementing the changes themselves, developer SEO training connects these browser checks to the HTML their applications produce.

Video lessons: SEO course session 2 · SEO course session 8. The videos are in Arabic.