Author: Michal Szymanski
Note: Do not worry if any of the following examples are unclear to you. All details will be discussed in the next lessons.
HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.
Here's what the HTML code looks like:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
And here's what the above code looks like in your web browser:
My First Heading
My first paragraph.
HTML Headings
HTML headings are defined with the <h1> to <h6>
tags.
<h1> defines the most important heading. <h6>
defines the least important
heading.
HTML code of the headings:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
How the above code looks like in the web browser:
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
HTML code of the paragraphs:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
How the above code looks like in the web browser:
This is a paragraph.
This is another paragraph.
HTML Links
HTML links are defined with the <a> tag.
HTML code of the link:
<a href="https://mdbootstrap.com/">This is a link to https://mdbootstrap.com</a>
How the above code looks like in the web browser:
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
You will learn more about attributes in a later chapter.
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt),
width, and height are provided as
attributes.
HTML code of the images:
<img src="https://mdbootstrap.com/img/logo/mdb-transparent-big.png" alt="MDB" width="184" height="122">
How the above code looks like in the web browser:
HTML Buttons
HTML buttons are defined with the <button> tag.
HTML code of the button:
<button>Click me</button>
How the above code looks like in the web browser:
HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or the
<ol> (ordered/numbered list) tag, followed by <li>
tags (list items).
HTML code of the list:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
How the above code looks like in the web browser:
- Coffee
- Tea
- Milk
Previous lesson Next lesson
Spread the word:
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, web developer, UI/UX designer, marketing analyst. Dancer and nerd in one.Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download