Tell us what’s happening:
Hi, I just encountered this challenge 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.
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.
You have a file with some text you want to display in a browser.
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.
you save the file with the extension .html
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)
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.">
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.
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
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
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.
<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.
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?
my bad