首页 > 其他分享 >HTML 04 - Elements

HTML 04 - Elements

时间:2024-05-13 19:52:55浏览次数:20  
标签:Elements HTML 04 tags element content tag Element

HTML Elements are building block of a web page. It is used to create component for webpages. HTML documents consist of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed within various parts of an HTML document.

What is an HTML Element?

HTML Elements are consists of a start tag, an end tag, and the content between them. HTML Element is a component of HTML document, it tells the browser how a content should be render. It contains formating instruction, semantic meaning and content.

HTML Elelement

Note: There are a few HTML elements that does not have end tag or content like <br> tag, <hr> tag, etc.
 

Difference Between tags & element

All the HTML elements are created using the HTML tags. But, an HTML element is defined by a pair of starting tags and closing tags. Within these tags, we place the content of the HTML document which further creates the layout and structure of the web page.

For example, <p> is the starting tag of a paragraph and </p> is closing tag of the same paragraph but <p>This is paragraph</p> is a paragraph element.

Try to click the iconrun button run button to run the following HTML code to see the output.

Examples of HTML Elements

In the bellow examples we will see Simple Element, Nested Element and Emty Element

HTML Simple Element

In this example we will create two HTML element one will header element and other one will be paragraph element.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Smiple Element</title>
</head>
<body>
    <h1>This is Header Element</h1>
    <p>This is Paragrapgh Element</p>
</body>
</html>

 


HTML Nested Element

In this example we will creat a nested element, a parent element and two child element inside of the parent element.

 
<!DOCTYPE html>
<html>

<head>
    <title>HTML Nested Element</title>
</head>
<body>
    <p>
        This is parent element containing 
        <span>Child Elelement 1</span> &  
        <span>Child Elelement 2</span>.
    </p>
</body>
</html>

 

HTML Empty Element

In this example we will create a empty element between two simple element.

 
<!DOCTYPE html>
<html>
<head>
    <title>HTML Smiple Element</title>
</head>
<body>
    <h1>This is Header Element</h1>
    <hr>
    <p>This is Paragrapgh Element</p>
</body>

 

Mandatory Closing tag

Only the empty elements like <hr> and <br> do not require closing tags, other elements such as <p> and <h1> do. Failing to include closing tags for these elements may not result in an error, and some content may still display properly. However, never miss the closing tag as it may lead to unexpected and inconsistent results.

<!DOCTYPE html>
<html>
<body>
   <p>
       This line contains a line break tag,
       <br> hence content is visible in
       two separate lines.
   <p>
       This line is <hr>separated by a 
       horizontal rule.
</body>
</html>

 


Are HTML elements case-sensitive?

Yes, HTML elements are case-insensitive which means we can use both uppercase and lowercase for tag names. However, it is not a good practice as W3C recommends and demands lowercase. Hence, always try to use lowercase for the tag names.

 
<!DOCTYPE html>
<HTml>
<BODY>
   <P>
       HTML is not case sensitive i.e we can 
       use both upper or, lower case letters 
       in the tags.
   </p>
</BOdy>
</html>

 

 

 

标签:Elements,HTML,04,tags,element,content,tag,Element
From: https://www.cnblogs.com/emanlee/p/18189867

相关文章

  • HTML 03 - Basic Tags
    HTML-BasicTags HTMLtagsarethefundamentalelementsofHTMLusedfordefiningthestructureofthedocument.Thesearelettersorwordsenclosedbyanglebrackets(<and>).Usually,mostoftheHTMLtagscontainsanOpeningandaClosingtag......
  • HTML 02 - Editors
    HTML-EditorsTolearnHTMLwewillrecommendyoutouseatexteditorlikeNotepad,becauseaNotepadwillhelpyoutounderstandtherequirementofeachtag,itwillnotsuggestanythingonitsownthatwillbehelpfultounderstandtheHTMLsyntax. ......
  • HTML Tutorial
     HTMLstandsforHyperTextMarkupLanguage,itisaStandardMarkuplanguageforwebpages.HTMLisusedtocreatecontentandstructureofanywebpage.IfyouthinkofthehumanbodyasawebpagethenHTMListheskeletonofthebody.Itisthebuildi......
  • Find Products of Elements of Big Array
    FindProductsofElementsofBigArrayA powerfularray foraninteger x istheshortestsortedarrayofpowersoftwothatsumupto x.Forexample,thepowerfularrayfor11is [1,2,8].Thearray big_nums iscreatedbyconcatenatingthe powerful......
  • 设计模式04----原型模式
    原型模式(PrototypePattern)是一种创建型设计模式,在软件工程中用来创建对象的副本,从而避免新建对象时的性能开销。此模式利用已存在的对象实例作为原型,通过克隆(Clone)机制来创建新的对象,新对象与原型对象具有相同的属性和状态,但彼此独立,修改一个对象不会影响到另一个。原理与特点......
  • HTML5 参考手册(字母排序)
    标签描述<!--...-->定义注释<!DOCTYPE>定义文档类型<a>定义超文本链接<abbr>定义缩写<acronym>定义只取首字母的缩写,不支持HTML5<address>定义文档作者或拥有者的联系信息<applet>HTML5中不赞成使用。定义嵌入的applet。<area>定义图像映......
  • Spark - [04] RDD编程
    题记部分 一、RDD编程模型  在Spark中,RDD被表示为对象,通过对象上的方法调用来对RDD进行转换。经过一系列的transformations定义RDD之后,就可以调用actions触发RDD的计算,action可以是向应用程序返回结果(count,collect等),或者是向存储系统保存数据(saveAsTextFile......
  • CodePen 的国内替代「笔.COOL」,一个功能完备、使用便捷的在线HTML代码编辑和作品分享
    笔.COOL,是一个在线HTML代码编辑和作品分享平台。笔.COOL提供了一个在线的HTML、CSS和JavaScript代码编辑器。无需任何安装,你只需打开网站,就可以开始编写前端代码。编辑器支持代码高亮、自动补全等功能,提高编码效率。笔.COOL还提供了实时预览功能,预览界面会随着你的代码更......
  • hdu2049递归问题
    解法:从N中选出M个C[n][m],然后乘上错排公式;f[n]=(n-1)*(f[n-1]+f[n-2]);f[0]=0;f[1]=1;importjava.util.Scanner;publicclasshdu2049{publicstaticintC(inta,intb){if(a==b){return1;}elseif(b==1){returna......
  • hdu2048递归问题
    题目思路:其实我还真没怎么看出来这个是递推(嘤嘤自己好菜哇)……不过很清楚的是我们需要求出每个人拿到的都不是自己的牌子的情况有几种,按照日常经验,如果前n个人已经做到了错排(也就是拿的都不是自己的牌子),当第n+1个人来的时候,他跟任意一个人交换后就能做到这n+1个人都实现错排,!!但是......