DEV Community: Melina Caroline Bernard

Lists - HTML

Melina Caroline Bernard — Sat, 27 Sep 2025 15:52:25 +0000

•List items are container tags.

•A list consists of list items <li>

•There are 2 types of lists

1.Ordered lists <ol> -
~These show with numbers.

~You can use these when the points have a certain order.

For example👇🏻

<ol>
<li> Coffee </li>
<li> Tea </li>
<li> Milk </li>;
</ol>

Output👇🏻

Coffee
Tea
Milk

2.Unordered lists <ul>
~They are shown with bullet points.

~You can use these when the order of the items is not important

Example 👇🏻

<ul>
<li> Coffee </li>
<li> Tea </li>
<li> Milk </li>;
</ul>

Output

•Coffee
•Tea
• Milk

•A list can contain any number of items

• A list can be nested inside another

• (use indentation to make your code look clean when you prefer nesting)

<ul>
 <li>Coffee</li>
 
 <li>Tea (Varieties) 
    *<ul>
      <li>Green Tea</li>
      <li>Black Tea</li>
    </ul>*
 </li>
 <li>Milk</li>
</ul>

💡Quick Tip

•Each < li > tags are presented in new lines automatically

Example👇🏻

<ol>
<li>Item1</li><li>Item2</li>
<li>Item3</li>
<\ol>

Output👇🏻

Item1
Item2
Item3

Links -HTML

Melina Caroline Bernard — Sat, 27 Sep 2025 11:56:46 +0000

•The Web wouldn’t be possible without HyperText.

•HyperText is text that contains a link to another page.

•Web pages are called HyperText documents because _they are connected by hyper links _

•These hyper links allow users to move from one page to another
& Share information across different machines and systems

•The anchor tag <a> is used to create a hyperlink on a web page.

•To create a link, you need "href" to add the destination URL

•href stands for HyperText reference

•The URL needs to be enclosed in quotes to work without errors.

Adding images - HTML

Melina Caroline Bernard — Sat, 27 Sep 2025 10:40:59 +0000

•A picture is worth a thousand words!

•Web pages with images get more views, higher ranking in search results, and get shared more on social media

•Images are not technically inserted into a web page, they are linked.

•< img src='URL'>

📎The source (src) points to where the image can be found. You'll use either:

1.An Absolute URL (a full link to an image on the internet).

2.A Relative Path (the location of a local file, which is how you'll add images to your own portfolio).

📎The image URL or path needs to be enclosed in either single or double quotes.

Text Formatting - HTML

Melina Caroline Bernard — Fri, 26 Sep 2025 18:18:11 +0000

•HTML formatting tags are used to change how text is displayed

•These are container tags(we discussed about this in previous posts)

•Formatting tags are applied to text and are nested inside elements.
Examples 👇🏻
<b> </b> - This tag is used to bold text

<i> </i> - This displays text in italics

<u> </u> - This tag is used to underline a text

📎Web accessibility is all about making websites more inclusive and removing barriers.

📎Screen readers are programs that make the content of a web site accessible to users who visually impaired or have a learning disability.

These tags make your website more accessible 👇🏻

The < strong > < /strong > tag is used to highlight important texts (_same as <b> </b> tag)
_

The emphasis tag </em> < em > is used to define emphasized text. (same as <i> </i> tag)

🧩The above < strong > < /strong > and <em> < /em > tags are considered as semantic tags. Which means, they have a meaning & can be read by the screen readers, so that your web page becomes more accessible

Fun Fact - How web pages work & where the informations come from

Melina Caroline Bernard — Fri, 26 Sep 2025 16:43:33 +0000

•There are lot of web pages, we browse according to our needs.

•Where do you think these vast amount of information in the web lives? In everyone's phone or mobile device??

Definitely Not!

•Here comes The Server

•What is that?
📎Web servers are computers that are always connected to the Internet and continuously listening for requests of information

📎Code, documents and media files such as images and videos are put together by the browser to display the resulting web page

Body tag - HTML

Melina Caroline Bernard — Fri, 26 Sep 2025 16:11:57 +0000

•The <body> container tag is used to group everything that gets displayed on a web page when loaded in a browser.

•All the content elements that you need to display (like paragraphs, headings, buttons and images) need to be inside the <body> container tag.

💡Fun Fact
A web page can contain only one body element.

Body tags are needed for your page to be compatible with all web browsers.

Head tag - HTML

Melina Caroline Bernard — Fri, 26 Sep 2025 12:00:00 +0000

•The <head> container tag is used to include technical information about the page

•Title, description and keywords are nested in the head tag.

•You can use the <head> to help increase visibility and traffic from search engines like Google.

•The information in the head is not displayed on the web page.

•Only the title, is shown in search engine results and in the browser tab.

What is Nesting

Melina Caroline Bernard — Fri, 26 Sep 2025 11:26:44 +0000

•Some tags need to be placed inside other tags.

•When some HTML tags go inside other tags, this is called nesting.

•For example, all the contents of the html are included (nested) inside <html> tag

•The outer tag (<html>,in this example), is called a Parent tag and all the tags nested inside it are Child tags

📎A Golden Rule
the last tag you open must be the first tag you close.
So, you can close the parent tag only after closing all the child tags in nesting

💡Fun fact
<html> </html> tag is a container tag, which contains all the contents of html nested inside it

Paragraphs & breaks in HTML

Melina Caroline Bernard — Fri, 26 Sep 2025 07:43:53 +0000

•<p>..</p> is used to create a paragraph of text

•Usually, manual breaks inside paragraph is ignored by the browser when showing the web page

Example 👇🏻

<p>Hey there!
Come learn frontend with me.
Let's learn
HTML basics.</p>

Eventhough I typed the paragraph in several lines,

The output will be👇🏻

Hey there! Come learn frontend with me. Let's learn HTML basics.

•This behavior is known as whitespace collapsing or whitespace normalization, where the browser treats any sequence of spaces, tabs, or line breaks as a single space.

•To actually insert a line break in the output, you need to use <br>

Example 👇🏻
<p>Hey there! <br>
Come learn frontend with me.
Let's learn <br>
HTML basics.</p>

Output 👇🏻
Hey there!
Come learn frontend with me. Let's learn
HTML basics.

💡Fun Fact
<br> tag is one of the examples for empty tags.
Remember we discussed earlier?
Empty tag means, they don't need a closing tag : )

[Container tags vs Self closing "HTML tags - container (standard) vs empty (self closing) - DEV Community" https://dev.to/melina_bernard_7fce15e253/html-tags-2i53

Comments - HTML

Melina Caroline Bernard — Fri, 26 Sep 2025 06:54:03 +0000

•Comments in html is used as a short description of your code

•It makes your code easier to read & understand

•It may help you in the future when you look back at what you coded & it's crucial when you work in groups, so that other members can understand.

•it won't be visible in the web page

• is used to add a comment

Heading tags - HTML

Melina Caroline Bernard — Fri, 26 Sep 2025 06:22:23 +0000

•Heading tags are container tags (closing tags are must)

•There are 6 levels of HTML tags ranging from h1 to h6

•h1 is the biggest
<h1> </h1>
<h2> </h2>
.
.
<h6> </h6>

👉🏻Example

heading 1

heading 2

heading 6

💡Quick Tip
A page should only ever have one <h1> tag. This tag is reserved for the main title of the page (e.g., your portfolio name or the title of your blog post).

HTML tags - container (standard) vs empty (self closing)

Melina Caroline Bernard — Fri, 26 Sep 2025 06:00:20 +0000

•HTML code is based on tags.

•Tags are used to add elements to a web page

•Elements are surrounded by angular brackets <> to make it a tag

👉🏻Example
Button - <button>
Image - <img>
Paragraph text - <p>

•There are 2 types of tags

1.container tags - it should contain opening tags as well as closing tags <>..</>

👉🏻Example
<button> </button>
<p> </p>
<a> </a>

2.Empty tags - Also known as self closing tags.These don't need a closing tag.

👉🏻Example
<img>
<hr>
<br>