Scribd
Upload
30 views4 pages

HTML Structure and Elements Guide

The document provides an overview of HTML structure, including elements for headings, paragraphs, links, images, audio, and video. It also covers text formatting options, group tags, and basic CSS concepts such as float, combinators, and pseudo elements. This serves as a reference for creating and styling web pages using HTML and CSS.

Uploaded by

ahmedmukarram6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views4 pages

HTML Structure and Elements Guide

The document provides an overview of HTML structure, including elements for headings, paragraphs, links, images, audio, and video. It also covers text formatting options, group tags, and basic CSS concepts such as float, combinators, and pseudo elements. This serves as a reference for creating and styling web pages using HTML and CSS.

Uploaded by

ahmedmukarram6
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<DOTYPE html>

<html></html> : html content


<head></head>: includes:
<title></title> title heading for page

<body></body> visual content of page:


h1, h1 heading
h2, h2 heading
h3, h3 heading
h4, h4 heading
h5, h5 heading
p, paragraph tag
<br>, line break self closing tag
hr, horizontal line on page
<p>  <pre> that will enable to add extra spaces and line breaks in paragraphs
text
<!-- --> this is for a comment

LINKS
<a href=”link”> this is a link </a>
<a href=”link” target=”_blank”> :this is a link </a> opens link in new tab
<a href=”link” title=”link for youtube” > this is a link </a> : shows the given title
when hovers over it

<a href=”[Link]”></a> takes to other html file


<a href=”[Link]

IMAGE
<img src=”[Link]” height=”100” width=”100”>
<img src=”[Link]” height=”100” width=”100”>

<img src=”[Link]” alt=”This is a image” height=”100” width=”100”> if


images doesn’t display this will appear
<a href=”link”> <img src=”[Link]” height=”100” width=”100”>
</a> can use image as a link too

AUDIO
<audio>
<source src=”audio.mp3”>
</audio>

<audio controls>
<source src=”audio.mp3”>
</audio> to add controls
Can add <audio controls autoplay> , <audio controls autoplay muted>, <audio
controls autoplay muted loop>

<audio controls>
<source src=”audio.mp3” type=”audio/mpeg”>
<source src=”[Link]” type=”audio/wav>
</audio> as a backup

VIDEO
<video src=”video.mp4” height=”100px” controls>
</video>
Can add autoplay, muted, loop

<a href=”link” target=”_blank”> <video src=”video.mp4” height=”100px”


controls>
</video>
</a> can use video as a link too

<link rel=”icon” type=”image/pnj” href=”[Link]”> add this in the head for the
page icon
Text Formatting
<p> this is <b>text</b> </p> : make it bold
<p> this is <i>text</i> </p> : italic
<u></u> underline
<del></del> deleted text
<big></big> big size
<small>
<sub> subscript text
<sup> superscript text
<tt> monospace text
<mark style=”background-color:green;”> mark text with green highlighter

Group Tags
<span>
<div>
<h1><span style=”background-color:blue;”> This is span
text</span></h1>

<h1><div style="background-color:cyan;">this is span text</div></h1>


this is block type container

CSS :
Float:
property, either left or right, used to wrap text around an image/ blocks.

Combinators:
Relationships b/w different selectors:
“space” = decendents, > = childs, ~ = general siblings, + = adjacent siblings.
Pseudo elements:
To style specific parts of elements,
syntax selector::key word like p::first-letter{}

You might also like