Introduction to HTML and CSS
Foundation of web development
Hi, I'm a Computer Engineering student driven by the intersection of development and user-centric design. I believe in creating digital experiences that are not only functional but also beautiful and intuitive. My toolkit includes front-end technologies like HTML, CSS, JavaScript, and React.js, along with back-end languages such as Java, C, and C++. I use Figma to bring my UI/UX visions to life. I'm passionate about continuous learning and sharing my knowledge through articles on this platform. Let's connect and discuss the future of tech!
Introduction
So here it is: it's time to start understanding the foundation part of the web development. This article will teach you the basics of HTML and CSS, the two foundational building blocks of very much everything on the web.
HTML and CSS
HTML and CSS are two very important languages that work together to create everything you see on the internet when searching for information.
HTML is the raw data that a webpage is made up of. All links, texts, tags, cards, buttons, and lists are created using the raw HTML.
On the other hand, the CSS is the makeup kit for the HTML; it is what adds style to those plain HTML elements.
HTML puts information on a webpage, and the CSS will make that information more readable and attractive by positioning it in the right order, giving it color, changing the font, and making it look amazing to us!
Many resources out there keep referring to HTML and CSS as programming languages, but that is not true in a technical way. Because they are only concerned with presenting information. They are not using any type of programming logic in it. JavaScript is a programming language that makes webpages do things by using logic.
HTML
HTML (HyperText Markup Language) defines the structure and content of the webpage. HTML elements are used to create all of the paragraphs, headings, lists, images, and other elements that make up the traditional webpage.
Elements and Tags
On the webpage, almost all elements on an HTML page are just pieces of information wrapped in opening and closing tags.
HTML tags are an essential part that defines the structure and content of a webpage.
Opening tags tell the browser that this is the start of an HTML element. They are just keywords bound in angle brackets <> . For example, an opening paragraph tag looks like this: <p> .
Closing tags tell the browser where the element ends. They are mostly the same as opening tags; the only major difference is that they have a forward slash before the keyword. For example, a closing paragraph tag looks like this: </p>.
A full paragraph element looks like this:
<p>This is a paragraph tag.</p>
Let’s break this down:
<p>is the opening tag.This is a paragraph tag.It represents content wrapped within the opening and closing tags.</p>is the closing tag.
You can think of elements as containers for content. The opening and closing tags tell the browser what content the element contains. The browser can then use that information to determine how it should interpret and format the content.
Void Elements
Some HTML elements do not have a closing tag. These elements just have a single tag, like: <br> or <img>. They are known as void elements.
Void elements (also called empty elements) are HTML tags that cannot have child nodes (text or other elements). They only have a start tag, and providing a closing tag is considered invalid HTML.
There are 14 standard void elements currently in use:
<area>: Defines a specific area inside an image map.<base>: Specifies a base URL for all relative URLs in a document.<br>: Produces a line break in text.<col>: Specifies column properties for each column within a<colgroup>element.<embed>: Acts as a container for an external application or interactive content.<hr>: Represents a thematic break between paragraph-level elements (horizontal rule).<img>: Embeds an image in a web page.<input>: Defines an input control for web-based forms.<link>: Specifies relationships between the current document and external resources.<meta>: Represents metadata that cannot be represented by other HTML meta-related elements.<param>: Defines parameters for an<object>element.<source>: Specifies multiple media resources for<picture>,<audio>, or<video>.<track>: Specifies text tracks for<audio>and<video>elements.<wbr>: Represents a word break opportunity.
HTML Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First Webpage</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Each line of this code acts as a fundamental building block for a website. Here is a breakdown:
<!DOCTYPE html>: This is a document type declaration. It tells the web browser that this is a modern HTML5 document so it renders the page correctly instead of using "quirks mode" (an old way of displaying pages).<html lang="en">: This is the root element that wraps all other content. Thelang="en"attribute tells search engines and screen readers that the primary language of the page is English.<head>: This section contains metadata—information about the page that doesn't show up in the main browser window. It’s where you put things like the character set, SEO data, and links to CSS files.<meta charset="UTF-8">: This defines the character encoding, whichUTF-8is the universal standard that ensures almost all symbols, emojis, and characters from different languages display correctly.<title>My First Webpage</title>: This sets the text that appears on the browser tab. It is also the headline that shows up in search engine results.</head>: This is the closing tag for the head section, signaling that the metadata is finished.<body>: This is the content container. Everything inside these tags—text, images, buttons, and links—is what the user actually sees and interacts with on the screen.<h1>Hello World!</h1>: This is a level-one heading. It is usually the most important title on the page and is styled as large, bold text by default.</body>: This closes the body section.</html>: This closes the entire HTML document.
HTML organizes space on a page using these two display types. Every HTML element falls into one of these categories by default.
Block-level Elements
Think of these as building blocks or "bricks." They are the structure of your layout.
Takes up the full width: They always stretch to the left and right as far as they can, even if the content inside is short.
Starts on a new line: They automatically push the next element down to a new line.
Can have height and width: You can easily set their dimensions with CSS.
Examples from your code:
<html>,<body>, and<h1>. Other common ones include<div>,<p>, and<ul>.
Inline Elements
Think of these as beads on a string. They live inside other elements without breaking the flow.
Only takes up necessary width: They only occupy as much space as the content (text or image) requires.
Does not start on a new line: They sit side-by-side with other inline elements until they run out of horizontal space.
Ignores vertical margins/height: You generally cannot set a specific height or top/bottom margin on them without changing their display type.
Examples:
<a>(links),<span>,<strong>(bold text), and<img>.
Now that you have the skeleton of your site, it’s time to give it some skin. Stay tuned for the next part, where we cover CSS, and visit my profile so you don't miss the update!
