HTML BASICS - All Things Programming

HTML, or HyperText Markup Language, creates and designs web pages. It defines the structure of a webpage by using a system of tags and elements that web browsers interpret. HTML enables content to be displayed in a structured format, including text, images, links, and multimedia.

The primary purpose of HTML in web development is to provide a framework for organizing and displaying content. It is the foundation upon which other technologies, like CSS (for styling) and JavaScript (for interactivity), are built. Without HTML, web browsers wouldn’t know how to render the content or handle links between pages.

HTML enables developers to ensure their content is accessible to users across different browsers and devices. Additionally, a well-structured HTML document improves SEO, making web content more visible to search engines.

This HTML Basics article will enable you to understand the basics of Hypertext markup languages and create a clear path for beginners.

HTML Basics – Basic Structure of HTML Documents

An HTML document follows a specific structure that tells the browser how to display the content. Each document part has its role and purpose, ensuring that the web page is correctly interpreted and rendered.

HTML Document Structure:

<!DOCTYPE html>: This declaration informs the browser that the document follows HTML5 standards. It’s essential to ensure that modern browsers render the page correctly.
<html>: This is the root element of the document. All the content within the web page is nested inside the opening and closing </html> tags.
<head>: The <head> section contains meta-information about the page, such as its title, character encoding, links to stylesheets (CSS), or scripts (JavaScript). This content is not directly visible on the webpage but is vital for its operation and display.
<title>: This tag defines the web page’s title, which appears in the browser tab when the page is loaded. It also plays a crucial role in search engine optimization (SEO).
<body>: The <body> section holds the webpage’s main content. Anything inside the <body> tag, such as headings, paragraphs, images, and links, is displayed directly to the user.

Example of Basic HTML Document

<!DOCTYPE html>

<html>

  <head>

    <title>Page Title</title>

  </head>

  <body>

    <h1>Welcome to My Website</h1>

    <p>This is a paragraph of text.</p>

  </body>

</html>

Explanation

<!DOCTYPE html>: Informs the browser that the document uses HTML5.
<html>: Contains all the elements of the web page.
<head>: Includes metadata like the title.
<title>Page Title</title>: Sets the title displayed in the browser tab.
<body>: Contains the content users see. In this case, a heading (<h1>) and a paragraph (<p>).

This basic structure forms the foundation of any web page and allows developers to build more complex layouts and functionalities by adding additional elements and external resources like CSS and JavaScript

Example of an HTML Basic Document

Below is an example of a Simple HTML document with a title, heading, and paragraph

<!DOCTYPE html>

<html>

  <head>

    <title>My First Web Page</title>

  </head>

  <body>

    <h1>Hello World!</h1>

    <p>This is my first paragraph in HTML.</p>

  </body>

</html>

When opened in a browser, this code will display “Hello World!” as a large heading and “This is my first paragraph in HTML” as a regular paragraph below. The browser tab will show the title “My First Web Page.”

Head Section Basics

This example shows how the <head> section works with meta tags and links to external stylesheets.

<!DOCTYPE html>

<html>

  <head>

    <title>Testing Head Section</title>

    <meta charset="UTF-8">

    <meta name="description" content="A demo webpage to test the head section">

    <meta name="keywords" content="HTML, test, head">

    <meta name="author" content="Your Name">

  </head>

  <body>

    <h1>Testing Meta Tags</h1>

    <p>Check the source code to see the meta information.</p>

  </body>

</html>

In the above example, the <meta> tags are located inside the <head> section of the HTML document. These tags provide essential information about the webpage but are not displayed directly on the webpage itself.

Instead, they serve background purposes, like improving SEO (Search Engine Optimization), helping the browser understand the content, and providing metadata for social media previews or other web services.

<meta charset=”UTF-8″>:

This tag defines the character encoding for the webpage. It ensures the webpage can properly display characters from different languages (letters, symbols, etc.). Without this tag, characters might not render correctly, mainly if you use special symbols, accented characters, or characters from non-Latin languages.

<meta name=”description” content=”A demo webpage to test the head section”>:

This tag provides a brief description of the webpage. Search engines like Google use this description to preview the page’s content in search results. A well-written description can improve search engine results click-through rate (CTR).

<meta name=”keywords” content=”HTML, test, head”>:

This tag provides a list of relevant keywords for the webpage. These keywords help search engines understand the topic of the page. However, most modern search engines (like Google) no longer rely heavily on this tag but can still be useful for internal searches or legacy systems. Though historically, it helped with SEO, it’s less influential now.

<meta name=”author” content=”Your Name”>:

This tag specifies the author of the webpage. It can be useful for indicating who wrote or created the page. It’s helpful for personal blogs or web content where credit is essential.

Meta tags are placed within the <head> section of the HTML document, which is used explicitly for metadata and linking external resources (such as stylesheets, scripts, etc.).

The browser only displays the content inside the <body> section to the user because that’s where the web page’s visible content (text, images, etc.) is located.

The purpose of the <head> section is not to show visual elements but to communicate essential information to the browser, search engines, or other web services. This is why meta tags, which live in the <head> section, are never rendered on the screen but still play a crucial role in processing and understanding the page.

If you want to see the meta tags, you need to view the source code of the webpage by right-clicking on the page and selecting “View Page Source” (or something similar, depending on your browser). The meta information will be visible in the <head> section of the code but not on the visual page.

Title HTML Basics

Changes the page’s title, which is displayed in the browser tab.

<!DOCTYPE html>

<html>

  <head>

    <title>My Blog Post Title</title>

  </head>

  <body>

    <h1>Blog Post Header</h1>

    <p>This is the content of my blog post.</p>

  </body>

</html>

What to expect: The browser tab will display “My Blog Post Title,” while the page content will show a heading and a paragraph.

Body Content Example

Try this example to add more content inside the <body> tag.

<!DOCTYPE html>

<html>

  <head>

    <title>Body Content Example</title>

  </head>

  <body>

    <h1>Welcome to My Blog</h1>

    <p>Here is a list of things I love:</p>

    <ul>

      <li>HTML</li>

      <li>CSS</li>

      <li>JavaScript</li>

    </ul>

  </body>

</html>

What to Expect: This will display a heading, a paragraph, and an unordered list of items (“HTML,” “CSS,” “JavaScript”).

HTML Basics on Using Images

Use the <img> tag to insert an image into your web page.

<!DOCTYPE html>

<html>

  <head>

    <title>Image Example</title>

  </head>

  <body>

    <h1>Adding an Image</h1>

    <img src="https://www.allthingsprogramming.com/image.jpg" alt="An example image" width="300" height="200">

  </body>

</html>

This will display an image from the specified URL with the dimensions 300×200 pixels. You can replace the src URL with your image path.

HTML Basics – Using Hyperlinks

This example demonstrates how to create a clickable hyperlink.

<!DOCTYPE html>

<html>

  <head>

    <title>Link Example</title>

  </head>

  <body>

    <h1>Click the Link Below</h1>

    <p><a href="https://www.example.com">Go to Example Website</a></p>

  </body>

</html>

This will display a clickable link that redirects to “https://www.example.com” when clicked.

Combining Elements in Basic HTML

Below is an example that combines headings, paragraphs, images, and links in a single page.

<!DOCTYPE html>

<html>

  <head>

    <title>My Blog Page</title>

  </head>

  <body>

    <h1>Welcome to My Blog</h1>

    <p>This is a blog post about web development.</p>

    <h2>Here is an Image:</h2>

    <img src="https://www.example.com/image.jpg" alt="A cool image" width="400" height="300">

    <h2>Want to learn more?</h2>

    <p><a href="https://allthingsprogramming.com/html/">Click here to learn more about HTML</a></p>

  </body>

</html>

What Happens When You Combine Elements

This combination of elements such as headings, paragraphs, images, and links—creates a well-structured and interactive webpage. Here’s how it works together:

Headings (<h1>, <h2>): Provide a clear structure and hierarchy, making it easy for readers (and search engines) to understand the importance of different sections.
Paragraphs (<p>): Organize your content into readable chunks.
Images (<img>): Enhance the visual appeal and provide relevant context or illustrations.
Links (<a>): Allow users to navigate to external or internal pages, making your content more interactive.

Essential HTML Tags

HTML provides a wide variety of tags to structure and format web content. Here are some of the most commonly used tags that help organize text, links, images, and lists.

Headings: <h1> to <h6>

Headings are used to define titles and subtitles, with <h1> being the most important (typically the main title of the page) and <h6> being the least important. Headings help organize content into a hierarchy.

<h1>Main Heading</h1> <!-- Most important heading -->

<h2>Subheading</h2> <!-- Secondary heading -->

<h3>Sub-subheading</h3> <!-- Tertiary heading -->

Paragraphs: <p>

The <p> tag is used to structure text into paragraphs. It helps organize the text into readable chunks.

<p>This is a paragraph of text. It can contain sentences and explanations.</p>

Links: <a>

The <a> tag is used to create hyperlinks, allowing users to navigate from one page to another or to external websites. The href attribute specifies the destination of the link.

<a href="https://www.example.com">Visit Example</a>

In this example, clicking on “Visit Example” will take you to the URL specified in the href attribute.

Images: <img>

The <img> tag is used to embed images in a webpage. It is a self-closing tag and uses the src attribute to define the image source and the alt attribute to provide a textual description for accessibility.

<img src="image.jpg" alt="A beautiful landscape" width="500" height="300">

Here, the src attribute specifies the image file location, and alt provides a description for accessibility.

Lists: <ol> and <ul>

HTML supports two types of lists: ordered lists (<ol>) and unordered lists (<ul>).

Ordered List (<ol>): Lists items in a numbered order.
Unordered List (<ul>): Lists items with bullet points.

<ol>

  <li>First item</li>

  <li>Second item</li>

</ol>

<ul>

  <li>Bullet point 1</li>

  <li>Bullet point 2</li>

</ul>

Other Common Tags

<br>: Inserts a line break in the text.

Line 1<br>Line 2

<hr>: Inserts a horizontal rule (a line) to separate sections.

<hr>

<em>: Emphasizes text, typically displayed in italics.

<em>This is emphasized text.</em>

<strong>: Indicates strong emphasis, typically displayed in bold.

<strong>This is strong emphasized text.</strong>

<blockquote>: Represents a block of quoted text, usually indented.

<blockquote>This is a quoted passage from someone.</blockquote>

These tags are fundamental for building the structure of a webpage. They help break down content into organized sections, improve readability, and enhance the user experience. By combining these tags effectively, you can create a well-structured webpage.

HTML Attributes

HTML attributes are used to provide additional information about an element. They modify the behavior or appearance of the element, and they are always added within the opening tag of an HTML element. Here are some of the most commonly used HTML attributes:

1. class

The class attribute is used to assign a CSS class to an element, allowing multiple elements to share the same styling. This is particularly useful when you want to apply a specific style to multiple elements at once.

<div class="container">Content here</div>

In this example, the div element is assigned the class “container”. In the CSS file, you can target this class to apply styles to all elements with the class container.

2. id

The id attribute is used to assign a unique identifier to an element. It is useful for targeting a specific element with CSS or JavaScript. An id should be unique within a webpage.

<div id="main-header">Header content</div>

Here, the div element has the id “main-header”. In CSS or JavaScript, you can target this unique id to style it or manipulate it.

3. href

The href (Hypertext Reference) attribute is used in anchor (<a>) tags to define the destination URL of a hyperlink.

<a href="https://www.example.com">Click Here</a>

In this example, when the user clicks on the link, they will be directed to “https://www.example.com“.

4. src

The src (source) attribute is used to define the source of an image, audio, video, or other media files. It tells the browser where to find the media to display or play.

<img src="logo.png" alt="Company Logo" width="200">

Here, the src attribute specifies the image file “logo.png” to be displayed. The alt attribute provides alternative text if the image cannot be displayed.

5. alt

The alt (alternative text) attribute is used to provide a textual description of an image. This is important for accessibility, as screen readers use the alt text to describe the image to users who are visually impaired. It is also used by search engines for indexing images.

<img src="image.jpg" alt="A beautiful landscape" width="500">

In this example, the alt attribute describes the image as “A beautiful landscape,” which helps with accessibility and SEO.

How Attributes Work

Attributes are written within the opening tag of an HTML element, and they are typically presented as name-value pairs. For example:

<tagname attribute="value">Content</tagname>

For instance, in the case of the image tag (<img>):

<img src="image.jpg" alt="A beautiful sunset" width="500">

src=”image.jpg” specifies the source of the image.
alt=”A beautiful sunset” provides a description for accessibility.
width=”500″ sets the width of the image to 500 pixels.

HTML attributes provide crucial additional information for elements and allow developers to customize their behavior, appearance, and interactions. Understanding how to use these attributes is key to building functional, accessible, and well-structured webpages.

Nesting and Hierarchy in HTML

In HTML, nesting refers to placing one HTML element inside another, creating a parent-child relationship. This hierarchical structure helps to organize content, define layouts, and apply styles more efficiently. When elements are nested, the outer element is known as the parent, and the elements inside it are children.

Nesting is an essential technique for building complex web pages, allowing you to group content logically and apply styles or functionality to specific sections.

Example of Nesting

Consider the following example:

<div>

  <h1>Main Title</h1>

  <p>This is a paragraph inside a div.</p>

</div>

The <div> element is the parent.
The <h1> and <p> elements are child elements inside the <div>.

In this case, the <div> element groups the heading (<h1>) and the paragraph (<p>) together. This allows you to apply styles or behaviors to the entire block of content as a whole.

Parent-Child Relationship

In HTML, the parent element can contain multiple child elements. These children can themselves be parents to even more nested elements. This creates a hierarchy where each level of nesting defines the structure of the content.

For example:

<div>

  <h1>Main Title</h1>

  <section>

    <h2>Subheading</h2>

    <p>Paragraph under subheading.</p>

  </section>

  <footer>

    <p>Footer content</p>

  </footer>

</div>

The outer <div> is the parent of everything inside it.
The <section> and <footer> are children of the <div>.
The <h2> and <p> inside the <section> are children of the <section>, and the <p> inside the <footer> is a child of the <footer>.

Why is Nesting Important?

Structure and Organization: Nesting allows content to be grouped in meaningful ways. For example, you might nest all content for a webpage inside a <div> or use <section> elements to organize content by topics.
Styling with CSS: By nesting elements, you can target specific groups of elements with CSS, applying styles to a parent and all of its children at once. For instance, you can target all paragraphs inside a specific section.
Creating Complex Layouts: Nested elements allow you to create complex webpage layouts with multiple sections, sidebars, and columns. For example, a <nav> tag inside a <header> can define a navigation bar.

Nesting Best Practices

Avoid excessive nesting: While nesting is powerful, excessive nesting can make the code harder to read and maintain. Keep the structure simple when possible.
Properly close tags: Always ensure that each opening tag has a corresponding closing tag to avoid rendering issues or errors.
Semantic structure: Use appropriate HTML tags for content grouping (e.g., <header>, <footer>, <article>) instead of relying too heavily on <div> tags.

Comments in HTML

In HTML, comments are used to insert notes or explanations within the code that are not visible on the rendered webpage. They are enclosed between <!– and –>. These comments are essential for keeping the code organized, explaining its purpose, or providing reminders without affecting the content displayed on the page.

Syntax of HTML Comments

<!-- This is a comment -->

Opening tag: <!–
Closing tag: –>

Anything written between these tags is treated as a comment and will not be displayed by the browser. For example:

<!-- This is a comment and will not show up on the page -->

<p>This is a visible paragraph.</p>

In this example, the comment <!– This is a comment and will not show up on the page –> is not displayed to the user, but the paragraph (<p>) is visible.

Use Cases for HTML Comments

Adding Notes for Developers
Comments are often used to leave explanatory notes in the code. This helps other developers (or your future self) understand the structure and logic behind the code.

<!-- This section handles the header and navigation menu -->

<header>

  <h1>My Website</h1>

  <nav>...</nav>

</header>

Debugging Code
When testing or debugging, developers often use comments to temporarily disable certain parts of the code without deleting them. This allows them to easily test changes and re-enable code later.

<!-- <img src="image.jpg" alt="Description"> -->

<p>This is a paragraph.</p>

In the above example, the <img> tag is commented out, so it won’t be displayed, but it remains in the code for later use.

Temporarily Removing Code
If you want to test a page without a specific section of code, you can comment it out instead of deleting it. This way, it’s easy to restore the code when needed.

<!-- <div>Temporary content removal</div> -->

<p>Other content that will remain visible.</p>

Providing Information for Future Updates
Comments can serve as reminders for future updates or tasks that need attention. For example, a developer might leave a comment indicating that a certain section needs to be optimized.

<!-- TODO: Optimize this section for mobile devices -->

Best Practices for HTML Comments

Be clear and concise: Keep comments short but informative. Write comments that help anyone who reads the code understand why something is done a certain way.
Avoid over-commenting: Too many comments can clutter the code. Only add comments when necessary to explain complex logic or provide context.
Use comments to explain the ‘why’, not the ‘what’: It’s often clear from the code itself what is happening, but comments are helpful for explaining why a specific solution was chosen.

HTML comments are a valuable tool for developers to add notes, explain code, and temporarily disable sections of code without affecting the user experience. Using comments makes your HTML code more maintainable, understandable, and easier to debug.

Semantic HTML

Semantic HTML refers to using HTML elements that clearly describe the meaning and purpose of the content they contain. Unlike generic <div> and <span> elements, semantic tags provide context to browsers, developers, and search engines about the role of each section in a web page.