HTML_10_Layout

Layout

HTML has several semantic elements that define the different parts of a web page:

<header> - Defines a header for a document or a section

<nav> - Defines a set of navigation links

<section> - Defines a section in a document

<article> - Defines an independent, self-contained content

<aside> - Defines content aside from the content (like a sidebar)

<footer> - Defines a footer for a document or a section

<details> - Defines additional details that the user can open and close on demand

<summary> - Defines a heading for the <details> element

<main> - The <main> HTML element represents the dominant content of the <body> of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.

















ID attribute & class attribute

the id attribute, it is used to uniquely identify that element from other elements on the page. Its value should start with a letter or an underscore. id attribute is known as a global attribute because it can be used on any element.
a class attribute, sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page.

div & span

<div>
The <div> element allows you to group a set of elements together in one block-level box.

<span>
The <span> element acts like an inline equivalent of the <div> element. It is used to either:
1. Contain a section of text where there is no other suitable element to differentiate it from its surrounding text
2. Contain a number of inline elements The most common reason why people use <span> elements is so that they can control the appearance of the content of these elements using CSS.

Difference between id and class,  div and span

ID's are unique
Each element can have only one ID
Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
<div> tag is used to identify a blocklevel section/division of a document that has a line break both before and after it.
<span> tag is used to identify an inline section/division of a document.
Some elements will always appear to start on a new line in the browser window. These are known as block level elements. Examples of block elements are <h1>, <p>, <ul>, and <li>.
Some elements will always appear to continue on the same line as their neighbouring elements. These are known as inline elements. Examples of inline elements are <a>, <b>, <em>, and <img>.





Comments

Post a Comment

Popular posts from this blog

HTML_1_Introduction

Image
What is a website? A website is a collection of web pages and related content that is identified by a common domain name and published on at least one web server.  Web advertising is any form of Internet-based marketing.  Nowadays, websites become the tools or services for people in our working environments due to the digital transformation. Why we should use? First impression as a real business Online Presence 24/7 Information Exchange Easily Market Expansion Advertising Use anytime, anywhere, any devices Basic Website Language HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. CSS stands for Cascading Style Sheet, which is used to design the web page to be more attractive. JS stands for JavaScript, which is used to make web pages interactive and dynamic. What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTM...
Read more

HTML_6_Media

Image
Media Image <img> To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes: src This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.  alt This provides a text description of the image which describes the image if you cannot see it. title You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image. <img src="car.jpg" alt="car" title="car" /> <figure> Images often come with captions. HTML5 has introduced a new <figure> element to contain images and their caption so that the two are associated. <figcaption> The <figcaption> element has been added to HTML5 in order to a...
Read more

HTML_7_Link

Image
Link Links are created using the <a> element which has an attribute called href.  The value of the href attribute is the page that you want people to go to when they click on the link.  Users can click on anything that appears between the opening <a> tag and the closing </a> tag and will be taken to the page specified in the href attribute. <a> other-sites.html HTML Link Type Link to other website Link to other website with new tab Link to email Link to Top (ID) and Bottom Link to Pages (Same folder, Child folder, Parents folder and so on) Link to Other Website <a href="https://www.google.com/">Google</a> Link to Other Website with New Tab <a href="https://www.google.com/" target="_blank">Google New Tab</a> Link to Email <a href="mailto:coffeehouse@gmail.com">Email Us</a> Link to Other Website <a href="https://www.google.com/">Google</a> Link to Other Website with N...
Read more