Basically, from what I've learnt , Elements are the building blocks of HTML that describe the structure and content of a web page. They are the “Markup” part of HyperText Markup Language (HTML). Elements usually have an opening tag and a closing tag, and give information about the content they contain.
Many elements have an opening tag and a closing tag — for example, a p (paragraph) element has a
tag, followed by the paragraph text, followed by a closing
tag.Some elements don’t have a closing tag. These are called empty elements. For example, the br element for inserting line breaks is simply written
.
If you’re working with XHTML then you write empty elements using self-closing tags — for example,
.
Now let’s look at those 10 tags!
- … — The root element All web pages start with the html element. It’s also called the root element because it’s at the root of the tree of elements that make up a web page.
HTML element and document tree The html element sits at the root of the tree of elements in a web page. To create the html element, you write an opening tag followed by a closing tag. Everything else in your web page then goes between these 2 tags:
(all other page elements go here)… — The document head The head element contains information about the web page, as opposed to the web page content itself. There are many elements that you can put inside the head element, such as: title link, which you can use to add style sheets and favicons to your page meta, for specifying things like character sets, page descriptions, and keywords for search engines script, for adding JavaScript code to the page.
… — The page title The title element contains the title of the page. The title is displayed in the browser’s title bar (the bar at the top of the browser window), as well as in bookmarks, search engine results, and many other places.
The title should describe the page’s content succinctly and accurately. Try to give each page of your site its own unique title. Here’s an example:
The Adventures of My Cat Lucky- … — The page’s content The body element appears after the head element in the page. It should contain all the content of your web page: text, images, and so on. All web pages have 1 single body element, with the exception of frameset pages, which contain frame elements instead.
Below is the general format of the body element:
(all page content goes here)…
— A section heading Headings let you break up your page content into readable chunks. They work much like headings and subheadings in a book or a report. HTML actually supports 6 heading elements: h1, h2, h3, h4, h5, and h6. h1 is for the most important headings, h2 is for less important subheadings, and so on. Typically you won’t need to use more than h1, h2 and h3, unless your page is very long and complex.
Here’s an example of an h1 heading element:
The Adventures of My Cat Lucky
…
— A paragraph The p element lets you create paragraphs of text. Most browsers display paragraphs with a vertical gap between each paragraph, nicely breaking up the text. While you can create “paragraphs” of text just by using
tags to insert blank lines between chunks of text, it’s better to use p elements instead. Not only is it neater, but it gives browsers, search engines and other non-humans a better idea of how your page is structured.… — A link One of the most important elements in a web page, the a element lets you create links to other content. The content can be either on your own site or on another site. To create a link, you wrap and tags around the content you want to use for the link, and supply the URL to link to in the tag’s href attribute.
Here’s how to create some text that links to example.com: Visit this great website!
— An image The img element lets you insert images into your web pages. To insert an image, you first upload the image to your web server, then use an
tag to reference the uploaded image filename. Let us look at the example below:
The alt attribute is required for all img tags. It’s used by browsers that don’t display images to give alternative text to the visitor.
Find out more about using images in web pages.- …— A block-level container for content The div element is a generic container that you can use to add more structure to your page content. For example, you might group several paragraphs or headings that serve a similar purpose together inside a div element. Typically, div elements are used for things like: Page headers and footers Columns of content and sidebars Highlighted boxes within the text flow Areas of the page with a specific purpose, such as ad spots Image galleries By adding class and/or id attributes to your div elements, you can then use CSS to style and position the divs. This is the basis for creating CSS-based page layouts.
… — An inline container for content The span element is similar to div in that it’s used to add structure to your content. The difference is that div is a block-level element, while span is an inline element: Block-level elements, such as div, h1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line. Inline elements, such as span, a, and img, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level element.
Html Layouts: HTML layouts provide a way to arrange web pages in well-mannered, well-structured, and in responsive form or we can say that HTML layout specifies a way in which the web pages can be arranged. Web-page layout works with arrangement of visual elements of an HTML document.
Web page layout is the most important part to keep in mind while creating a website so that our website can appear professional with the great look. You can also use CSS and JAVASCRIPT based frameworks for creating layouts for responsive and dynamic website designing. Following are different HTML5 elements which are used to define the different parts of a webpage.
- : It is used to define a header for a document or a section.
- : It is used to define a container for navigation links
- : It is used to define a section in a document
- : It is used to define an independent self-contained article
- : It is used to define a footer for a document or a section
- : It is used to define additional details
: It is used to define a heading for the element