I can't understand HTML5

HTML-CSS
#1

Tell us what’s happening:
Hi, I just encountered this challenge :slight_smile: What I want to know is a much clearer definition of the HTML5 element: “main” What is the actual use of it? What does it help with?

Your code so far


<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

Challenge: Introduction to HTML5 Elements

Link to the challenge:

#2

HTML5 elements like <main>, <header>, <footer> or <nav> are technically just <div> elements. Which means they have no CSS applied by the browser, like the default margin/padding of a <p> tag, for example. The only thing the browser knows about a <div> is that it’s set to display: block;.

You could replace all elements I’ve listed above with a <div>, and the website would look exactly the same. The difference is that those tags help screen readers to navigate on the page, and search engines to make sense of the content.

Read more here: https://www.freecodecamp.org/news/semantic-html5-elements/

6 Likes
#3

what are

elements?
#4

what are div elements

#5

image

#6

div are generic block elements that usually contain other elements

main is a div with a name which helps screen reader to know which is the main part of the page

tney are boxes in which you stuff elements for those parts of the page

#8

They’re what HTML is made up of.

  1. You have a file with some text you want to display in a browser.
  2. you add tags – like <p> or <body> or <img> – to the text to denote what the different things are, what the structure of the page should be.
  3. you save the file with the extension .html
  4. you can now open that file in a browser, and the browser will render that marked-up text as a web page. Those tags are rendered as elements (<p> is a paragraph, <img> is an image and so on)
1 Like
#9

HTML tags vs elements vs attributes

HTML tags

Tags are used to mark up the start and end of an HTML element. The following are paragraph tags.
<p></p>

HTML elements

An element in HTML represents some kind of structure or semantics and generally consists of a start tag, content, and an end tag. The following is a paragraph element:
<p>This is the content of the paragraph element.</p>

HTML attributes

An attribute defines a property for an element, consists of an attribute/value pair, and appears within the element’s start tag. An element’s start tag may contain any number of space separated attribute/value pairs.
The most popular misuse of the term “tag” is referring to alt attributes as “alt tags”. There is no such thing in HTML. Alt is an attribute, not a tag.
<img src="foobar.gif" alt="A foo can be balanced on a bar by placing its fubar on the bar's foobar.">

2 Likes
#10

can u give an example?

#11

So if you have some stuff (text, images etc) on a web page, you normally want to group blocks of them them together. For example, using <div>, which is just the generic tag you use if there’s nothing more specific you can use:

<div>
  <h1>A title</h1>
  <p>Here is some stuff</p>
  <p>Here is some more stuff</p>
</div>

<main> is also for grouping stuff, but it’s specifically for grouping all the main content of the web page.

#12

pls give an example. I mean a reality e.g and not a coded one.

#13

like, look at google homepage, you have a footer at the bottom with some links, a navbar to the top with some links, everything else is the main content of the page, the important part, which for google homepage is logo+searchbar and maybe some announcements. So you have distinct parts with different importance and different roles, you use main, footer, header, nav etc to identify these parts. You human with working eyes don’t need that, but a screen reader for blind people, or a search engine to idnex the page needs these parts identified

1 Like
#14

A product wrapper is a non code example

Candy makers can not sell candy without a wrapper

The producers are like the engine running the code

The producers cannot supply a product like candy without a wrapper

Also html can not run a code without a an element

Wrappers are closed in both ends enclosing the product

also

Html element are enclosing the content to be displayed using beginning tag like :
<> your product (any text you ant HTML to display on a browser) then a close </>

Eg < p> hello everyone < /p>

Hello everyone is a text wrapped by a < p> < /p>
( < p> is an HTML element which means a paragraph)

So hello everyone is a display as a paragraph with a content of hello everyone

2 Likes
#15

This should be </p>

1 Like
#16

Am using a phone That’s why the error

And i don’t mind about the code it about the non code example he asked for

Thank for the correction though I’ll edit it

1 Like
#17

i m a she :grinning:

#18

Thanks. That was helpful

#19

It’s a bit difficult to not talk about HTML without mentioning HTML – it’s just a way of tagging bits of text so that they have meaning to a browser.

Say you have a website with a header with a title and some navigation links, then the main content which is some , then a footer.

So you put the title in an <h1>. You put the nav links in a <nav>. You put those in a <header>. You have the paragraphs of text in <p> tags, you link the images using <img> tags. You put those both in a <main>. You put the stuff that goes in the footer in a <footer>.

Like you have a book - the book isn’t just a long text all on one sheet of paper. You have a title page, and the title page is divided up with the title and the author name and maybe some other information, then the book might have a contents page, then the book itself may be divided up into chapters, and those chapters may have titles, and they may be subdivided into sections, and at the end of the book there might be an index.

#20

HTML is simple markup language.

<h1> to <h6> tags are heading tags, like in this page " I can’t understand HTML5" is <h1>.
Page can only have 1 <h1> while few <h2> and many <h3>,<h4>

<p></p> is used to write paragraphs

<div></div> tag can be used to create areas in page like “left content” in separate <div> while right-content in separate <div>, these are block elements.

<main> in the challenge, is new HTML tag which tells about main content of page starts from here, until </main> is encountered.

Hope this helps.

#21

I knew you would notice that :sweat_smile: my bad
She then :grin: