This and That About HTML

Original article

HTML ELEMENTS

I think a year back I would have been very much convinced that I knew a lot about HTML and coming to my knowledge I realized that what I knew was just the tip of the iceberg. Its elements, structures, tables and semantics were kind of blur in today’s class but here is what I missed about the bits and pieces of the basics to what the big boys actually talk about in their more advanced spaces.

Element Content

We all know that the content is added to a web page using HTML (HyperText Markup Language), which we know tells the web browsers how to organize this content. Some of these contents include the element content which is known to be the text that appears in between an element's beginning and end tags. The easiest demonstration would be that of the Hello World set as the first heading

<h1>Hello World!</h1>

List Item Element (li/)

Another type of container that I am aware of is the List Item Element(li) and these are known to create or rather list certain elements and fall under ordered list (ol) or unordered lists(ul). A typical example would be that of random list of peoples names that falls under (ul) and the grocery list that would fall under (ol):

<ol>

  <li>Spinach</li>

  <li>Salt</li>

  <li>Meat</li>

  <li>Carrots</li>

</ol>

<ul>

  <li>Thatohatsi</li>

  <li>Coltrane</li>

   <li>Matshidiso</li>

</ul>

Video Element (video)

I honestly never knew that there was html element for managing your video url but today I also learned that it is actually possible that a media player for playing videos can be embedded within this very element. The video's URL can be found in the src (also known as the source) attribute. The media player will show video controls if the controls attribute is added like below:

<video src="test-video.mp4" controls>

  Video supported

</video>

Emphasis Element (em)

The Emphasis element was another one that I came across todays lecture as we all know that the text that is emphasized with the element (em) is often italicized by default in browsers and p being the paragraph. Like the instance created below:

<p>I am<em>hungry</em> today.</p>

Div Element & Span Element

Funny that what I could not really differentiate a year back were the two elements being the Span and Div elements but the clarity I got in today’s class was that div is an element which stands for "division," being the container that separates a document made up of HTML into sections. These elements are capable of holding flow content, including paragraphs, headings, links, and images. Meanwhilst span on the other hand enables text to be grouped for style purposes using the element, which is an inline text container. Nevertheless, if a more meaningful element is available, should not be used as it is a general container to split text fragments from a bigger body of text.

Div:
<div>

  <h1>The story behind Betty’s hat</h1>

  <p>Well it was stolen and nobody till this day knows about it </p>

</div>

<div>

  <h1>We are groomed to be at our best state</h1>

  <p>A little to know about us, we stil are to come</p>

</div>

Span:
<p><span>We are never</span> forgotten because we live amongst strangers</p>

Image Element (img)

Like I had touched upon some of the facts that I never really knew that a video can be embedded using html elements all I knew to it was that one could support HTML image using (img) elements and embed these images in documents. The src attribute contains the image URL and is mandatory. (img) on the other hand is an empty element meaning it should not have a closing tag. Like for instance:

<img src="image.png">

Strong and Bold Element

One would also wonder on how they can actually use the the bold and strong elements and although they seem to give the same outputs they also play two different roles. Where (b/)just makes the text bold whilst on the other hand important, serious, or urgent material is highlighted with the element (strong) by default, browsers display this highlighted text in (bold).

Strong:
<p>This is <strong>important</strong> text!</p>

Bold:
<p>This is <b>important</b>text!</p>

Line Break Element (Br)

When a text split is needed for instance, such as in a postal address, the line break element can be used to produce a line break in the text. I further learned that the line break element doesn't need a closing tag, it just needs a starting tag.

6 Olivard Street.<br>
Wright Park, Spring.<br>
Oh what a clean place indeed!

Unique ID Attributes

The last one on elements would definitely be Unique ID attributes. HTML elements can be distinguished from one another by assigning unique and particular id properties to them.

When necessary, JavaScript and CSS can use the (id) value to edit, format, and apply particular instructions to that element alone. A letter must be the first character in any valid ID property, and the only characters allowed are letters (a-Z), numerals (0-9) hyphens (-), underscores (_), and periods (.).
For example: AI is the Unique ID attributes in the instance set below

<h1 id="A1">Hello World</h1>

HTML SEMANTICS

Semantic HTML gives the code that we write a purpose. The elements of HTML has no meaning other than what they did or might include before Semantic HTML. A general-purpose element like was used to generate headers, footers, and articles, among other things. We were given two elements with Semantic HTML that specify to browsers and to developers what content belongs in it and how it should be used.

!--Non Semantic HTML-->

<div id="footer">

 <p>this is a footer</p>

</div>

<!--Semantic HTML-->

<footer>

 <p>this is a footer</p>

</footer>

Element Placement

The other one will be element placement where with the help of elements introduced by Semantic HTML, us including the big boys also known as senior developers can now determine an element's specific function or placement simply by looking at its name. The header, nav, main, and footer. header is a few of these elements. This provides an overview of the information found at the top of page body. It could have a search bar, navigational links, or a logo. The navigational links on the page are contained in nav . It frequently appears in the header or footer. Between the footer and header/navigation sections of a page, contains the primary content. At the bottom of the footer is where the page's footer content is contained in body.

Embedding media

Beside the image convention, I never knew much about the others like the video element but having to embed media we are introduced to (video), (audio) and (embed) , and through semantic HTML our website can now have videos thanks to the elements themselves (video) element. We can incorporate sound into our website thanks to (audio) element. Any kind of media can be implemented with (embed) element . These elements are all the same in that they connect to the content's source using the src property. Although is a self-closed tag, and need a closing tag. Below is a demonstration where all is shown about the above, an example caption I got from Code Academy website:

<!--Video Tag-->
<video src="4kvideo.mp4">video not supported</video>

<!--Audio Tag-->
<audio src="koreanhiphop.mp3"></audio>

<!--Embed tag-->
<embed src="babyyoda.gif"/>

section and article elements

The last one I learned about under HTML’s semantics was about section and article elements. A document's chapters, headings, and additional sections with a common theme are defined using the term section. On the other hand article contains blog posts, articles, and comments that make sense on their own. Developers typically use section to specify the webpage's theme and to create separate material for it. This doesn't mean that article and section must be used together.

<section>

  <!--defines theme-->

  <h2>Politics are being questioned by the future</h2>

<!--writes independent content relating to that theme-->

  <article>

    <p>We nearing towards the end of conviction.</p>

  </article>

</section>

HTML STRUCTURE
Another one that displays a vital part is its structure which is arranged like a family tree. HTML components are capable of having siblings, parents, grandparents, kids, grandkids, and so on because of the structure at hand. How it can be drawn is the exact same example as below:

<body>

  <div>

    <h1>We all choices and priorities at the end of the day</h1>

    <h2>We are forever young</h2>

  </div>

</body>

Anchor Element (a)

In an HTML document, hyperlinks are created using the anchor element (a). Using a hyperlink's reference attribute, href, the hyperlinks can point to any other URL as well as additional web pages, documents on the same server, and locations inside the same page. The anchor element's pointer is shown by the href.

An example that was set in class was one of the other demonstrations simplified in even more easier for me:

!-- Creating text links -->

<a href="http://www.SheCodesAfrica.com">Visit this site</a>

<!-- Creating image links -->

<a href="http://www.SheCodesAfrica.com">

    <img src="logo.jpg">Click this image
</a>

Head Element(head)

The head element was another one that revived my knowledge about the structure as a whole as well known that the element itself generalizes on data regarding a page in HTML that isn't shown on the document itself becomes contained in the element. What I understood was that data, which is referred to as metadata, contains connections to stylesheets(CSS) and the HTML document's title.

Like for instance:

<!DOCTYPE html>

<html>

  <head>

    <!-- Metadata is contained in this element-->

  </head>
</html>

Target Attribute(target)

Target attribute was well explained on the anchor section where the target simply indicates where the hyperlink should be opened. In current browsers, a target value of "_blank" instructs the web browser to display the hyperlink in a new tab; in earlier versions, or if the browser's settings have been modified to load hyperlinks in a new window, it will open the url in a new window:

<a 

href="https://www.SheCodesAfrica" 

target="_blank">This anchor element

 links to she Codes Africa platform

and will open in a new tab or window.

</a>

Link to a Different Part of the Page #

Further linking to a different page was another attribute I was not quite sure about, especially that I was quite fluent with only linking to a website. Like for instance when a target value of "_blank" is specified, the browser is instructed to open hyperlinks in a new tab in current browsers, a new window in older browsers, or a new window if the browser's settings have been modified to open hyperlinks in a new window.

<div>

  <p id="id-of-element-to-link-to">What leads you to the 
different part  of the page!</p>

</div>

<a href="#id-of-element-to-link-to">which will direct you to a different part of the page
</a>

File Path

Under the very same topic, a files path was also spoken about. What came to my understanding was that in HTML, URL routes may include absolute paths, such as the complete URL: Relative file paths, such as./style.css, link to local files stored in the same folder or on the same server as https:/SheCodes Africa.org/en-US/docs/Learn. The path that leads to the local file is preceded by./ in relative file paths, which instruct the browser to seek for the file's path in the current folder.

Like for instance:

<a href="https://SheCodes Africa/en-US/docs/Web">The URL for this anchor element is an absolute file path.</a>

<a href="./about.html">The URL for this anchor element is a file path that is relative to it.</a>

HTML Element

Another element that one would see on the structure and quite take it for granted is that of the HTML element where the !DOCTYPE declaration needs to come before the element, which is the root of an HTML document. An HTML document's beginning and closing tags are said to contain all of its information and structure. The one I highlighted next to doctype is the html I am referring to:

<!DOCTYPE html>

<html>

  <!-- comment -->

</html>

Whitespace

Adding whitespace on the other hand, like line breaks, between block-level components in an HTML document doesn't increase the spacing on the generated HTML page( of which I thought it did), instead, it is typically thrown off by the browser. Instead, whitespace is inserted to the HTML content to improve structure and readability.

<p>Test paragraph</p>

<!-- The whitespace created by this line, and above/below this line is ignored by the browser itself-->

<p>a new paragraph, this will sit right under the first paragraph and there won’t be any extra space added between.</p>

Head Element

Headline title Section, being the HTML document’s title is the one defined by the text inside the title element. The HTML page is seen in the browser’s title bar or tab, where the title appears. Only the head element of a document may contain the title element.

<!DOCTYPE html>

<html>

  <head>

    <title>The headlines await</title>

  </head>
</html>

I am still journeying along learning more about other features under the HTML, but so far this is slowly but surely drawing me closer to knowing more about its advancements in the web development sector.