logo-final-curve-version-05_1600851593
Menu Menu
Document Introduction to HTML

Introduction to HTML

Step-by-step guide to password protect your site or specific pages using Nilead’s CMS and visual editor — no coding required.

Table of content

TL;DR / Overview

HTML (HyperText Markup Language) is the backbone of all websites — it structures the content you see online. With Nilead’s Visual Editor, you don’t need to write HTML manually, but understanding its role can help you better design, troubleshoot, and personalize your website.

Prerequisites

  • No coding knowledge required

  • Access to Nilead Visual Website Builder

  • Curiosity about how websites are structured

Walkthrough

What is HTML?

HTML stands for HyperText Markup Language:

  • HyperText means text with links (called hyperlinks) to other text or resources.

  • Markup Language is a way of annotating content so that browsers know how to display it.

When you view a website, your browser reads HTML and CSS behind the scenes to render the page.

How Browsers Use HTML

When you visit a website:

  1. The browser loads the HTML code.

  2. It interprets each tag and element.

  3. It renders content accordingly — headings, text, images, links, etc.

Most modern browsers let you right-click → Inspect to view and edit HTML/CSS temporarily — a useful trick when troubleshooting design issues.

html-code-inspection

HTML Structure Breakdown

A simple HTML document looks like this:

<!DOCTYPE html> <html> <head> <title>Your Website Title</title> </head> <body> <h1>Welcome!</h1> <p>This is your homepage.</p> </body> </html>

Tag

Description

<!DOCTYPE html>

Declares the document as HTML5

<html>

Root element of the page

<head>

Contains metadata (not visible to visitors)

<title>

Sets the browser tab title

<body>

Contains all visible content on the page

html-structure

html-structure-2

Common HTML Elements

  • Headings: <h1> to <h6> — define content structure.

  • Paragraphs: <p> — blocks of text.

  • Links: <a href="..."> — create clickable hyperlinks.

  • Images: <img src="..." alt="..."> — add pictures (no closing tag).

  • Line breaks: <br> — forces a new line (no closing tag).

Note: Some tags don’t need closing tags, like <img> and <br>. These are called self-closing elements.

Important: Use unique id values for HTML elements to avoid confusion and ensure proper styling or scripting behavior.

html-element-paragraph

html-element-structure
id should be UNIQUE per html document!!!!

HTML vs. CSS: Who Does What?

  • HTML structures the content.

  • CSS (Cascading Style Sheets) styles the content.

For example:

<p id="welcome">Welcome to my site!</p>
#welcome { color: blue; font-weight: bold; }

CSS makes the text above appear bold and blue.

html-skeleton

When You Should (and Shouldn’t) Write HTML Manually

At Nilead, we generate the HTML and CSS for you using a Visual Editor. But if you need something ultra-custom or are debugging advanced layouts, hand-writing or tweaking code might be helpful.

Use Nilead’s builder when:

  • You want to launch fast

  • You don’t know HTML/CSS

  • You prefer visual control

Write HTML/CSS manually when:

  • You need pixel-perfect customization

  • You're embedding third-party scripts or code

  • You're integrating with advanced features not supported visually

FAQs

1. Do I need to know HTML to use Nilead?
No. Nilead’s Visual Editor handles HTML for you. But knowing the basics can help you tweak and troubleshoot.

2. Can I add custom HTML to my Nilead site?
Yes, advanced users can embed custom code via HTML blocks within the builder.

3. What if I break something while editing HTML?
You can always revert changes in the editor or contact Nilead support for help.

4. What’s the difference between HTML and CSS again?
HTML is for structure (what’s on the page), CSS is for style (how it looks).

5. Is it bad to use multiple <h1> tags on one page?
Yes. Best SEO practice is to use only one <h1> per page — it tells search engines what the page is about.

From this category

Responsive & Breakpoints

Important CSS concepts

Introduction to CSS Selector

Introduction to CSS

Important HTML elements

Discord chat

We're available Monday–Friday, security and critical bug fixes are available 24/7.

Facebook page

Get the latest news and updates regarding Nilead platform and services.

Company

plus-icon_1609925972 minus-icon_1609925972
What we do Career Contact Us

Use Cases

plus-icon_1609925972 minus-icon_1609925972
For Business Owners For Marketing Teams For Advanced Users

Industries

plus-icon_1609925972 minus-icon_1609925972
See More...

Resources

plus-icon_1609925972 minus-icon_1609925972
Blog Documentation Features FAQs Choose Right Website Solutions

Tools

plus-icon_1609925972 minus-icon_1609925972
Website Cost Calculator Website Platform Discovery Website Launch Action Plan Analytics Tool Discovery AI Model Discovery Tool Color Palette Generator

Social

plus-icon_1609925972 minus-icon_1609925972
facebook-2x_1611744290 behance-2x_1611744289 instagram-2x_1611744290
Terms of Use

|

Privacy Policy
© Copyright © 2022 Nilead. All rights reserved.