# HTML SEMANTICS AND SYNTAX: BASICS TO HTML
**WHAT IS HTML?**
<hr>
HTML (hyper text mark up language) : this is a markup language for creating and linking web-pages and displaying the information on the world wide web. It is the building block of the web. It defines the meaning and structure of web content
“Hypertext” refers to links that connect web-pages to one another either within a single website or between websites.
**BASIC HTML WEB STUCTURE**
```
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
```
The <!DOCTYPE html> element is a declaration of the type of document. It’s just like saying “this is html!!
where the html entails the head and the body tags.
**THE HEAD TAG**
The head contains information that is not displayed as content, it has the `<title>` which is displayed as the name of the web-page and the meta data which is used by search engines to better locate a particular web-page or website on the web based on searches.
```
<head>
<title>LEARNING HTML</title>
<meta charset=”UTF-8”>
<meta name=”author” content=”sedicryptic”>
<meta name=”discription” content=”This is my article”>
</head>
```
**THE BODY TAG**
The body tag contains the content of the web-page having different tags. The body basically displays the content on the web-pages.
```
<body>
<h1>MY WEBPAGE DESIGN AT BLOCKFUSE</h1>
<p>This is a webpage that im building</p>
</body>
```
<hr>
**BLOCK ELEMENTS**
Block occupies the full width of its container and starts a new line. It is this behavior that causes the element to "block" other elements from sitting horizontally beside it. Block elements also respect margin and padding and will expand to the width of its parent container unless otherwise specified.
Common block elements include:` <div>, <p>, <h1> to <h6>, <section>`, and `<article>`. These elements are used to define the structure of a page's layout and usually build the parent section or container of something. Inline Elements
**INLINE ELEMENTS**
Inline elements only occupy the width of their content and do not force a new line. Several inline elements may sit next to each other on the same line.
Inline elements do not respect vertical orientation as much as block elements do. They actually affect only the horizontal spacing of elements. Examples of inline elements include: `<span> <a> <strong> <em>` They are to be used for tiny portions of texts or other inline items that need some styling without interfering with the adjacent texts.
<hr>
**WOLRD WIDE WEB CONSORTIUM**
This is the organization for the standard of how webpages are built. the WWC has a validation platform where webpages can be tested to see if a webpage is up to the standard
<hr>
**TAGS**
this is an element which have a con tent wrapped in them or in-between where you have an element e.g. `<article>`good`<article>` where `<article>` is the element and good is the content. This has an opening an d closing tag which always have / in the closing tag. Those are known as closing tags.
Where as there are self-closing tags which do not need a closing tags like the anchor tag `<a href=”https://...”>` it has the content within the tag and do not need a closing tag, there fore it is a self closing tags but not all self closing tags have content within the tag such as the line break(`<br>`)
**ATTRIBUTES**
Attributes are what adds exta imformation to the elements
example:
```
<img src=”” alt”image”> (alt=”image” is the attribute)
<html lang=”en”> (lang=”en” is the attribute)
<a href=”” target=”_blank”> (target=”_blank is the attribute)
```
<hr>
**HOW TO ADD LINKS, IMAGES IN A WEBPAGE**:
To add a link you use the anchor tag `<a href=”https://…..”>` and then you put the link within the quotation. Normally this would open in the current tab that your on but if you don’t want this, then you should add an attribute to the anchor tag like this `<a href=”https://…..” target=”_blank”>` this should open the link in a different tab (this is a self closing tag)
To add an image you would actually use the `<img src=”home/img/…..”>` where you input the link of the image from your root (if your working on a local server) within the quotation mark. This should be displayed on your webpage but when your website is deployed when there may be latency on a particular network and the image doesn’t load there should be something to tell the visitor that there is an image there this is where you would use an attribute `<img src=”home/img…” alt=”image”>`
<hr>
**HOW TO CREATE A TABLE **
Creating a simple table: you’ll be using the `<table> `tag `<tr> ,`<th>` `and the`<td>`tag where the `<th> `tag is for the table head and the <td> tag is for the table data, whatever comes below in the `<td> `would be seen to represent the `<th>`
```
<table>
<tr>
<th>AGE</th>
<th>BLOODGROUP</th>
<th>GENPOTYPE</th>
<th>DONOR</th>
<th>HOBBIES</th>
</tr>
<tr>
<td>16</td>
<td>B+</td>
<td>AA</td>
<td>NO</td>
<td>UN-DISCLOSED</td>
</tr>
</table>
```
<table>
<tr>
<th>AGE</th>
<th>BLOODGROUP</th>
<th>GENPOTYPE</th>
<th>DONOR</th>
<th>HOBBIES</th>
</tr>
<tr>
<td>16</td>
<td>B+</td>
<td>AA</td>
<td>NO</td>
<td>UN-DISCLOSED</td>
</tr>
</table>
**HOW TO CREATE A SIMPLE FORM**
` Using other semantic tags like the `<form>`, `<label>`, `<input>`. Using the `<form>` semantic tag to show its a form then the ``<h1>``tag to clearly state out the form, then using the `<label>` tag to to declare a field and the the `<label>` which holds the value for a specific data, while using the input to hold a data with a an attribute to clearly define the data to be held in that field. While doing this Use the line break tag (``<br>``) to separate the fields because they are inline elements.
```
<form>
<h1>JOB APPLICATION FORM</h1>
<label>FULL NAME</label>
<input type="text"><br><br>
<label>EMAIL</label>
<input type="email"><br><br>
<label>DATE OF BIRTH</label>
<input type="date"><br><br>
<label>HOBBIES:</label>
<label>football</label>
<input type="checkbox">
<label>Football</label>
<input type="checkbox">
<label>Singing</label>
<input type="checkbox"><br><br>
<label>CONTINENT OF RESIDENCE</label>
<select>
<option>AFRICA</option>
<option>NORTH AMERICA</option>
<option>SOUTH AMERICA</option>
<option>EUROPE</option>
<option>ASIA</option>
<option>AUSTRALIA</option>
</select><br><br>
<label>WOULD YOU LIKE TO WORK REMOTELY?</label>
<label>Yes<label<label>
<input type="radio" name=”yes” value=”option”>
<label>No</label>
<input type="radio" name=”no” value=”option2”><br><br>
<button>submit</buttton>
<button>clear</button>
</form><br><br><br>
```
**ADDING A FOOTER**
A footer should should have about little but important information about the page
it should always be in an un-orderd list where you put basic information about the site which can also have internal and external links within the footer
```
<footer>
© 2025 learning-html.com. All rights reserved.
<ul>
<li><a href="#about">ABOUT</a></li>
<li>MISSION AND VISION</li>
<li>ACHIEVEMENT</li>
<li>DONATIONS</li>
</ul>
</footer>
```
```
```
<footer>
© 2025 learning-html.com. All rights reserved.
<ul>
<li><a href="#about">ABOUT</a></li>
<li>MISSION AND VISION</li>
<li>ACHIEVEMENT</li>
<li>DONATIONS</li>
</ul>
</footer>
```
Sign in with Wallet
Connect another wallet