#html hr tag attributes

[saide-hossain]

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

[promptlyspeedyandroid]

Top HTML Interview Questions and Answers for Freshers and Experts

HTML (HyperText Markup Language) is the fundamental building block of web development. Whether you’re a fresher stepping into the tech world or an experienced developer looking to refresh your basics, mastering HTML is essential. It is often the first topic covered in web development interviews, making preparation in this area crucial for any frontend or full-stack role.

This blog on Top HTML Interview Questions and Answers for Freshers and Experts is designed to help candidates at all levels confidently prepare for job interviews. From simple questions about tags and attributes to complex concepts like semantic HTML, accessibility, and new features in HTML5, this guide will walk you through the most frequently asked and impactful questions that hiring managers love to ask.

Why Learn HTML for Interviews?

HTML is not just a markup language. It is the foundation of every webpage. Even modern frameworks like React, Angular, or Vue render HTML at the core. Interviewers want to see if you understand how web pages are structured, how elements behave, and how HTML works in harmony with CSS and JavaScript.

Whether you're applying for a position as a front-end developer, UI/UX designer, WordPress developer, or full-stack engineer, HTML questions are almost always a part of the technical screening process.

HTML Interview Questions for Freshers

1. What is HTML?

Answer: HTML stands for HyperText Markup Language. It is used to create the structure of web pages using elements like headings, paragraphs, images, links, and more.

2. What is the difference between HTML and HTML5?

Answer: HTML5 is the latest version of HTML. It includes new semantic elements (<header>, <footer>, <article>), multimedia support (<audio>, <video>), and improved APIs like canvas, local storage, and geolocation.

3. What is a tag in HTML?

Answer: A tag is a keyword enclosed in angle brackets that defines the beginning and end of an HTML element (e.g., <p>Paragraph</p>).

4. What is the purpose of the <DOCTYPE html> declaration?

Answer: It defines the HTML version and helps the browser render the page correctly. For HTML5, it is written as <!DOCTYPE html>.

5. What is the difference between <div> and <span>?

Answer: <div> is a block-level element used for grouping sections, while <span> is an inline element used for styling a part of text or inline elements.

Intermediate to Advanced HTML Interview Questions

6. What is semantic HTML?

Answer: Semantic HTML uses meaningful tags (like <article>, <section>, <nav>) to describe the content, making it more readable for developers and accessible for screen readers and search engines.

7. What are void (self-closing) elements in HTML?

Answer: Void elements do not have a closing tag. Examples include <img>, <input>, <br>, and <hr>.

8. How is HTML different from XML?

Answer: HTML is designed for web page layout, while XML is used for storing and transporting data. HTML is more lenient with errors, whereas XML is strict and case-sensitive.

9. What is the difference between id and class attributes?

Answer: An id is unique for a single element, while a class can be applied to multiple elements. IDs are used for single-item styling or DOM targeting, whereas classes help in grouping and styling multiple elements.

10. What is the use of the alt attribute in images?

Answer: The alt attribute provides alternative text for images when they cannot be displayed. It also helps screen readers understand the image content, enhancing accessibility.

HTML5-Specific Interview Questions

11. Explain the difference between <section> and <article>.

Answer: <section> defines a thematic grouping of content, while <article> represents independent, self-contained content like blog posts or news articles.

12. What is the purpose of the <canvas> element?

Answer: The <canvas> element in HTML5 allows drawing graphics, animations, and visualizations using JavaScript.

13. How does local storage work in HTML5?

Answer: HTML5 introduces localStorage, allowing you to store data in the browser with no expiration time. It helps in storing user preferences or app data even after the browser is closed.

Why Interviewers Ask HTML Questions

To evaluate your core web development knowledge

To assess your understanding of page structure and layout

To test your awareness of accessibility and SEO principles

To understand your readiness to work on real projects

Even if you're familiar with frameworks like React or Angular, understanding raw HTML ensures you're not dependent on abstractions.

Tips to Prepare for HTML Interviews

Practice writing HTML code regularly.

Read documentation on HTML5 and its newer features.

Understand semantic elements and SEO best practices.

Use online editors like CodePen, JSFiddle, or Visual Studio Code for hands-on experience.

Explore real-world examples like building forms, creating layouts, and embedding media.

Who Should Read This Blog?

This blog is ideal for:

Freshers preparing for entry-level front-end interviews

Self-taught developers polishing their HTML fundamentals

Web designers shifting to development roles

Professionals brushing up on HTML for technical assessments

Conclusion

Preparing for HTML interviews doesn’t just help you answer questions—it helps you build a stronger foundation for web development. Whether you are just starting or have years of experience, reviewing these Top HTML Interview Questions and Answers for Freshers and Experts will give you the confidence to tackle interviews effectively.

[html-tute]

Basics of HTML

HTML (HyperText Markup Language) is the standard language used to create web pages. It provides the structure and content of a webpage, which is then styled with CSS and made interactive with JavaScript. Let’s go through the basics of HTML:

1. HTML Document Structure

An HTML document starts with a declaration and is followed by a series of elements enclosed in tags:<!DOCTYPE html> <html> <head> <title>My First Webpage</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a paragraph of text on my first webpage.</p> </body> </html>

<!DOCTYPE html>: Declares the document type and version of HTML. It helps the browser understand that the document is written in HTML5.

<html>: The root element that contains all other HTML elements on the page.

<head>: Contains meta-information about the document, like its title and links to stylesheets or scripts.

<title>: Sets the title of the webpage, which is displayed in the browser's title bar or tab.

<body>: Contains the content of the webpage, like text, images, and links.

2. HTML Tags and Elements

Tags: Keywords enclosed in angle brackets, like <h1> or <p>. Tags usually come in pairs: an opening tag (<h1>) and a closing tag (</h1>).

Elements: Consist of a start tag, content, and an end tag. For example:

<h1>Hello, World!</h1>

3. HTML Attributes

Attributes provide additional information about HTML elements. They are always included in the opening tag and are written as name="value" pairs:<a href="https://www.example.com">Visit Example</a> <img src="image.jpg" alt="A descriptive text">

href: Used in the <a> (anchor) tag to specify the link's destination.

src: Specifies the source of an image in the <img> tag.

alt: Provides alternative text for images, used for accessibility and if the image cannot be displayed.

4. HTML Headings

Headings are used to create titles and subtitles on your webpage:<h1>This is a main heading</h1> <h2>This is a subheading</h2> <h3>This is a smaller subheading</h3>

<h1> to <h6>: Represents different levels of headings, with <h1> being the most important and <h6> the least.

5. HTML Paragraphs

Paragraphs are used to write blocks of text:<p>This is a paragraph of text. HTML automatically adds some space before and after paragraphs.</p>

<p>: Wraps around blocks of text to create paragraphs.

6. HTML Line Breaks and Horizontal Lines

Line Break (<br>): Used to create a line break (new line) within text.

Horizontal Line (<hr>): Used to create a thematic break or a horizontal line:

<p>This is the first line.<br>This is the second line.</p> <hr> <p>This is text after a horizontal line.</p>

7. HTML Comments

Comments are not displayed in the browser and are used to explain the code:<!-- This is a comment --> <p>This text will be visible.</p>

<!-- Comment -->: Wraps around text to make it a comment.

8. HTML Links

Links allow users to navigate from one page to another:<a href="https://www.example.com">Click here to visit Example</a>

<a>: The anchor tag creates a hyperlink. The href attribute specifies the URL to navigate to when the link is clicked.

9. HTML Images

Images can be embedded using the <img> tag:<img src="image.jpg" alt="Description of the image">

<img>: Used to embed images. The src attribute specifies the image source, and alt provides descriptive text.

10. HTML Lists

HTML supports ordered and unordered lists:

Unordered List (<ul>):

. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>

Ordered List (<ol>):

<ol> <li>First item</li> <li>Second item</li> <li>Third item</li> </ol>

<ul>: Creates an unordered list with bullet points.

<ol>: Creates an ordered list with numbers.

<li>: Represents each item in a list.

11. HTML Metadata

Metadata is data that provides information about other data. It is placed within the <head> section and includes information like character set, author, and page description:<meta charset="UTF-8"> <meta name="description" content="An example of HTML basics"> <meta name="keywords" content="HTML, tutorial, basics"> <meta name="author" content="Saide Hossain">

12. HTML Document Structure Summary

Here’s a simple HTML document combining all the basic elements:<!DOCTYPE html> <html> <head> <title>My First HTML Page</title> <meta charset="UTF-8"> <meta name="description" content="Learning HTML Basics"> <meta name="keywords" content="HTML, basics, tutorial"> <meta name="author" content="Saide Hossain"> </head> <body> <h1>Welcome to My Website</h1> <p>This is my first webpage. I'm learning HTML!</p> <p>HTML is easy to learn and fun to use.</p> <hr> <h2>Here are some of my favorite websites:</h2> <ul> <li><a href="https://www.example.com">Example.com</a></li> <li><a href="https://www.anotherexample.com">Another Example</a></li> </ul> <h2>My Favorite Image:</h2> <img src="https://images.pexels.com/photos/287240/pexels-photo-287240.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" width="300" alt="A beautiful view"> <hr> <p>Contact me at <a href="mailto:saide2857@gmail.com">saide2857@gmail.com</a></p> </body> </html>

Key Takeaways

HTML is all about using tags to structure content.

The basic building blocks include headings, paragraphs, lists, links, images, and more.

Every HTML document needs a proper structure, starting with <!DOCTYPE html> and wrapping content within <html>, <head>, and <body> tags.

With these basics, you can start building your web pages!

Source: HTML TUTE BLOG

[chidrestechtutorials]

For Web Designing Students; size attribute of HTML hr tag indicates? Learn more: https://www.youtube.com/chidrestechtutorials

A) width of horizontal line B) thickness of horizontal line C) depth of horizontal line D) none of the above

[krishna337]

HTML hr Tag

The HTML <hr> tag is used to define a horizontal line or rule to separate content in an HTML page. The <hr> tag is an empty tag and this tag does not require an ending tag. Syntax <hr> Example <!doctype html> <html> <head> <title>HTML Hr Tag</title> </head> <body> <h1>What Is HTML?</h1> <p>HTML stands for Hyper Text Markup Language, which is the most popular language on web and the language is…

[webtutorsblog]

Learn HTML Tags with WebTutor.dev: Your Ultimate Resource for Web Development Tutorials

HTML (Hypertext Markup Language) is the backbone of the web. It is the standard markup language used to create web pages. HTML consists of a series of tags that define the structure and content of a web page. In this blog post, we will dive deeper into HTML tags, what they are, and how they work.

HTML tags are the building blocks of a web page. They are used to define the structure and content of a web page. HTML tags are surrounded by angle brackets (<>) and are written in lowercase. There are two types of HTML tags: opening tags and closing tags. An opening tag is used to start a tag, and a closing tag is used to end it. For example, the opening tag for a paragraph is <p>, and the closing tag is </p>.

HTML tags can also have attributes, which provide additional information about the tag. Attributes are included in the opening tag and are written as name-value pairs. For example, the <img> tag is used to embed an image on a web page. The src attribute is used to specify the URL of the image. The alt attribute is used to provide a description of the image for users who cannot see it.

HTML tags can be used to define headings, paragraphs, links, images, lists, tables, forms, and more. Here are some examples of commonly used HTML tags:

<html>: Defines the document as an HTML document

<head>: Defines the head section of the document, which contains metadata such as the page title and links to external files

<title>: Defines the title of the document, which appears in the browser's title bar

<body>: Defines the body section of the document, which contains the content of the page

<h1> to <h6>: Defines HTML headings of different sizes, with <h1> being the largest and <h6> being the smallest

<p>: Defines a paragraph

<a>: Defines a hyperlink to another web page or a specific location on the same page

<img>: Defines an image to be displayed on the page

<ul> and <ol>: Defines unordered and ordered lists, respectively

<table>: Defines a table

<form>: Defines a form for user input

<br>: Inserts a line break

<hr>: Inserts a horizontal rule

<strong>: Defines text as important or emphasized

<em>: Defines text as emphasized

<blockquote>: Defines a block of quoted text

<cite>: Defines the title of a work, such as a book or movie

<code>: Defines a piece of code

<pre>: Defines preformatted text, which preserves spaces and line breaks

<sup> and <sub>: Defines superscript and subscript text, respectively

<div>: Defines a section of the page for grouping content

<span>: Defines a small section of text within a larger block of text for styling purposes

Learning HTML can seem daunting, but with the right resources, it can be easy and enjoyable. One such resource is WebTutor.dev, an online platform that provides tutorials on web development, including HTML. The tutorials are easy to follow and provide a hands-on learning experience. The platform also offers quizzes to test your knowledge and a community forum to connect with other learners and ask questions.

In conclusion, HTML tags are the building blocks of a web page. They define the structure and content of a web page and can be used to create headings, paragraphs, links, images, lists, tables, forms, and more. If you are interested in learning HTML, check out WebTutor.dev for easy-to-follow tutorials and a supportive community of learners.

[mostlysignssomeportents]

20 years a blogger

It's been twenty years, to the day, since I published my first blog-post.

I'm a blogger.

Blogging - publicly breaking down the things that seem significant, then synthesizing them in longer pieces - is the defining activity of my days.

https://boingboing.net/2001/01/13/hey-mark-made-me-a.html

Over the years, I've been lauded, threatened, sued (more than once). I've met many people who read my work and have made connections with many more whose work  I wrote about. Combing through my old posts every morning is a journey through my intellectual development.

It's been almost exactly a year I left Boing Boing, after 19 years. It wasn't planned, and it wasn't fun, but it was definitely time. I still own a chunk of the business and wish them well. But after 19 years, it was time for a change.

A few weeks after I quit Boing Boing, I started a solo project. It's called Pluralistic: it's a blog that is published simultaneously on Twitter, Mastodon, Tumblr, a newsletter and the web. It's got no tracking or ads. Here's the very first edition:

https://pluralistic.net/2020/02/19/pluralist-19-feb-2020/

I don't often do "process posts" but this merits it. Here's how I built Pluralistic and here's how it works today, after nearly a year.

I get up at 5AM and make coffee. Then I sit down on the sofa and open a huge tab-group, and scroll through my RSS feeds using Newsblur.

I spend the next 1-2 hours winnowing through all the stuff that seems important. I have a chronic pain problem and I really shouldn't sit on the sofa for more than 10 minutes, so I use a timer and get up every 10 minutes and do one minute of physio.

After a couple hours, I'm left with 3-4 tabs that I want to write articles about that day. When I started writing Pluralistic, I had a text file on my desktop with some blank HTML I'd tinkered with to generate a layout; now I have an XML file (more on that later).

First I go through these tabs and think up metadata tags I want to use for each; I type these into the template using my text-editor (gedit), like this:

   <xtags>

process, blogging, pluralistic, recursion, navel-gazing

   </xtags>

Each post has its own little template. It needs an anchor tag (for this post, that's "hfbd"), a title ("20 years a blogger") and a slug ("Reflections on a lifetime of reflecting"). I fill these in for each post.

Then I come up with a graphic for each post: I've got a giant folder of public domain clip-art, and I'm good at using all the search tools for open-licensed art: the Library of Congress, Wikimedia, Creative Commons, Flickr Commons, and, ofc, Google Image Search.

I am neither an artist nor a shooper, but I've been editing clip art since I created pixel-art versions of the Frankie Goes to Hollywood glyphs using Bannermaker for the Apple //c in 1985 and printed them out on enough fan-fold paper to form a border around my bedroom.

As I create the graphics, I pre-compose Creative Commons attribution strings to go in the post; there's two versions, one for the blog/newsletter and one for Mastodon/Twitter/Tumblr. I compose these manually.

Here's a recent one:

Blog/Newsletter:

(<i>Image: <a href="https://commons.wikimedia.org/wiki/File:QAnon_in_red_shirt_(48555421111).jpg">Marc Nozell</a>, <a href="https://creativecommons.org/licenses/by/2.0/deed.en">CC BY</a>, modified</i>)

Twitter/Masto/Tumblr:

Image: Marc Nozell (modified)

https://commons.wikimedia.org/wiki/File:QAnon_in_red_shirt_(48555421111).jpg

CC BY

https://creativecommons.org/licenses/by/2.0/deed.en

This is purely manual work, but I've been composing these CC attribution strings since CC launched in 2003, and they're just muscle-memory now. Reflex.

These attribution strings, as well as anything else I'll need to go from Twitter to the web (for example, the names of people whose Twitter handles I use in posts, or images I drop in, go into the text file). Here's how the post looks at this point in the composition.

<hr>

<a name="hfbd"></a>

<img src="https://craphound.com/images/20yrs.jpg">

<h1>20 years a blogger</h1><xtagline>Reflections on a lifetime of reflecting.</xtagline>

<img src="https://craphound.com/images/frnklogo.jpg">

See that <img> tag in there for frnklogo.jpg? I snuck that in while I was composing this in Twitter. When I locate an image on the web I want to use in a post, I save it to a dir on my desktop that syncs every 60 seconds to the /images/ dir on my webserver.

As I save it, I copy the filename to my clipboard, flip over to gedit, and type in the <img> tag, pasting the filename. I've typed <img src="https://craphound.com/images/ CTRL-V"> tens of thousands of times - muscle memory.

Once the thread is complete, I copy each tweet back into gedit, tabbing back and forth, replacing Twitter handles and hashtags with non-Twitter versions, changing the ALL CAPS EMPHASIS to the extra-character-consuming *asterisk-bracketed emphasis*.

My composition is greatly aided both 20 years' worth of mnemonic slurry of semi-remembered posts and the ability to search memex.craphound.com (the site where I've mirrored all my Boing Boing posts) easily.

A huge, searchable database of decades of thoughts really simplifies the process of synthesis.

Next I port the posts to other media. I copy the headline and paste it into a new Tumblr compose tab, then import the image and tag the post "pluralistic."

Then I paste the text of the post into Tumblr and manually select, cut, and re-paste every URL in the post (because Tumblr's automatic URL-to-clickable-link tool's been broken for 10+ months).

Next I past the whole post into a Mastodon compose field. Working by trial and error, I cut it down to <500 characters, breaking at a para-break and putting the rest on my clipboard. I post, reply, and add the next item in the thread until it's all done.

*Then* I hit publish on my Twitter thread. Composing in Twitter is the most unforgiving medium I've ever worked in. You have to keep each stanza below 280 chars. You can't save a thread as a draft, so as you edit it, you have to pray your browser doesn't crash.

And once you hit publish, you can't edit it. Forever. So you want to publish Twitter threads LAST, because the process of mirroring them to Tumblr and Mastodon reveals typos and mistakes (but there's no way to save the thread while you work!).

Now I create a draft Wordpress post on pluralistic.net, and create a custom slug for the page (today's is "two-decades"). Saving the draft generates the URL for the page, which I add to the XML file.

Once all the day's posts are done, I make sure to credit all my sources in another part of that master XML file, and then I flip to the command line and run a bunch of python scripts that do MAGIC: formatting the master file as a newsletter, a blog post, and a master thread.

Those python scripts saved my ASS. For the first two months of Pluralistic, i did all the reformatting by hand. It was a lot of search-replace (I used a checklist) and I ALWAYS screwed it up and had to debug, sometimes taking hours.

Then, out of the blue, a reader - Loren Kohnfelder - wrote to me to point out bugs in the site's RSS. He offered to help with text automation and we embarked on a month of intensive back-and-forth as he wrote a custom suite for me.

Those programs take my XML file and spit out all the files I need to publish my site, newsletter and master thread (which I pin to my profile). They've saved me more time than I can say. I probably couldn't kept this up without Loren's generous help (thank you, Loren!).

I open up the output from the scripts in gedit. I paste the blog post into the Wordpress draft and copy-paste the metadata tags into WP's "tags" field. I preview the post, tweak as necessary, and publish.

(And now I write this, I realize I forgot to mention that while I'm doing the graphics, I also create a square header image that makes a grid-collage out of the day's post images, using the Gimp's "alignment" tool)

(because I'm composing this in Twitter, it would be a LOT of work to insert that information further up in the post, where it would make sense to have it - see what I mean about an unforgiving medium?)

(While I'm on the subject: putting the "add tweet to thread" and "publish the whole thread" buttons next to each other is a cruel joke that has caused me to repeatedly publish before I was done, and deleting a thread after you publish it is a nightmare)

Now I paste the newsletter file into a new mail message, address it to my Mailman server, and create a custom subject for the day, send it, open the Mailman admin interface in a browser, and approve the message.

Now it's time to create that anthology post you can see pinned to my Mastodon and Twitter accounts. Loren's script uses a template to produce all the tweets for the day, but it's not easy to get that pre-written thread into Twitter and Mastodon.

Part of the problem is that each day's Twitter master thread has a tweet with a link to the day's Mastodon master thread ("Are you trying to wean yourself off Big Tech? Follow these threads on the #fediverse at @pluralistic@mamot.fr. Here's today's edition: LINK").

So the first order of business is to create the Mastodon thread, pin it, copy the link to it, and paste it into the template for the Twitter thread, then create and pin the Twitter thread.

Now it's time to get ready for tomorrow. I open up the master XML template file and overwrite my daily working file with its contents. I edit the file's header with tomorrow's date, trim away any "Upcoming appearances" that have gone by, etc.

Then I compose tomorrow's retrospective links. I open tabs for this day a year ago, 5 years ago, 10 years ago, 15 years ago, and (now) 20 years ago:

http://memex.craphound.com/2020/01/14

http://memex.craphound.com/2016/01/14

http://memex.craphound.com/2011/01/14

http://memex.craphound.com/2006/01/14

http://memex.craphound.com/2001/01/14

I go through each day, and open anything I want to republish in its own tab, then open the OP link in the next tab (finding it in the @internetarchive if necessary). Then I copy my original headline and the link to the article into tomorrow's XML file, like so:

#10yrsago Disney World’s awful Tiki Room catches fire <a href="https://thedisneyblog.com/2011/01/12/fire-reported-at-magic-kingdom-tiki-room/">https://thedisneyblog.com/2011/01/12/fire-reported-at-magic-kingdom-tiki-room/</a>

And NOW my day is done.

So, why do I do all this?

First and foremost, I do it for ME. The memex I've created by thinking about and then describing every interesting thing I've encountered is hugely important for how I understand the world. It's the raw material of every novel, article, story and speech I write.

And I do it for the causes I believe in. There's stuff in this world I want to change for the better. Explaining what I think is wrong, and how it can be improved, is the best way I know for nudging it in a direction I want to see it move.

The more people I reach, the more it moves.

When I left Boing Boing, I lost access to a freestanding way of communicating. Though I had popular Twitter and Tumblr accounts, they are at the mercy of giant companies with itchy banhammers and arbitrary moderation policies.

I'd long been a fan of the POSSE - Post Own Site, Share Everywhere - ethic, the idea that your work lives on platforms you control, but that it travels to meet your readers wherever they are.

Pluralistic posts start out as Twitter threads because that's the most constrained medium I work in, but their permalinks (each with multiple hidden messages in their slugs) are anchored to a server I control.

When my threads get popular, I make a point of appending the pluralistic.net permalink to them.

When I started blogging, 20 years ago, blogger.com had few amenities. None of the familiar utilities of today's media came with the package.

Back then, I'd manually create my headlines with <h2> tags. I'd manually create discussion links for each post on Quicktopic. I'd manually paste each post into a Yahoo Groups email. All the guff I do today to publish Pluralistic is, in some way, nothing new.

20 years in, blogging is still a curious mix of both technical, literary and graphic bodgery, with each day's work demanding the kind of technical minutuae we were told would disappear with WYSIWYG desktop publishing.

I grew up in the back-rooms of print shops where my dad and his friends published radical newspapers, laying out editions with a razor-blade and rubber cement on a light table. Today, I spend hours slicing up ASCII with a cursor.

I go through my old posts every day. I know that much - most? - of them are not for the ages. But some of them are good. Some, I think, are great. They define who I am. They're my outboard brain.

[vampirecatsw]

Ao3 Html tricks

Sorry, so I didn't get to links and linebreaks for this bc I ran out of characters lol. Sorry Ao3 profile readers. Also, this is like the basic of the basics, it doesn't even hold a candle to some really well written html guides people have published on Ao3.

~

Hehe, join the revolution! Here are some simple HTML to spice up your comments and bookmarks: Disclaimer: There's like a million other better guides on Ao3/ other sites, I only scraped up some very simple things up in an hour and a half (I can't believe a 10 min idea became this monstrosity), please go check the other guides out! Note most tags start with < > and end with </>

Images and Links

<a href="Link, remember to add https:// if this is out of Ao3"> what text will appear as a link</a> <img src="link" alt="alternative name if image doesnt load" width="insert number" height="insert number"/> Height and width can be removed. I haven't figured out how to insert file paths instead of online links so idk bout that one.

Word Effects <strong> bold </strong> <em> italicised </em> <del> striked-out </del> or <strike> also striked </strike> <ins> underlined </ins> You can stack these up by putting them inside of each other.

Colours, fonts, text sizes, linebreaks <p> </p> encloses text. You can add attributes to change things. <p style="color:blue" >Blue text. Remember that color is in american spelling. You can change red to other colours.</p > <p style="font-family:'Courier New'"> Text in Courier New font </p> <p; style="font-size:11px" > 11 pixel sized text </p> <br /> is just an enter lol <hr> is a linebreak. It makes a line that crosses the whole text area. No ending tag for <br/> or <hr>, they last for one line

Pls also check out www.w3schools.com! Also, I'm not a professional, I only learnt html for 8 weeks in school and got a B on the test, sorry for errors. I hope you find this helpful tho!

[sagar-jaybhay]

How Angular Routing Works and What is Routing?

New Post has been published on https://sagarjaybhay.net/what-is-routing-angular-how-routing-works-angular/

How Angular Routing Works and What is Routing?

In this article, we will understand How Angular Routing Works and What is the Meaning Of routing In Angular By Sagar Jaybhay.`

What is the Meaning Of routing In Angular

Routing basically means navigating between pages. You have seen many sites with links that direct you to a new page.

The Angular Router enables you to show different components and data to the user based on where the user is in the application. The router enables navigation from one view to the next as users perform tasks.

Angular Routing

Routing Collection is a place where we specify the URLs and components where loaded.

If you create an angular project using cli command then it will automatically add your_app_name-routing.module.ts file where we can define routes.

import NgModule from '@angular/core'; import Routes, RouterModule from '@angular/router'; import HomeComponent from "./home/home.component"; import LeftmenuComponent from "./leftmenu/leftmenu.component"; import SupplierComponent from "./supplier/supplier.component"; import CustomerComponent from './Customer.component'; const routes: Routes = [ path:'Home',component:HomeComponent, path:'Customer',component:CustomerComponent, path:'Supplier',component:SupplierComponent, path:'',component:HomeComponent ]; @NgModule( imports: [RouterModule.forRoot(routes)], exports: [RouterModule] ) export class AppRoutingModule

This file needs to add in our main module file by default it is added but if it is not added by default you can go add this in this location.

But for this path, we need to modify some of the Html code like below.

<p>home works!</p> <a [routerLink]="['Home']">Home</a> <br/> <a [routerLink]="['Customer']">Customer</a> <br/> <a [routerLink]="['Supplier']">Supplier</a> <br/> <hr> <br/> <br/> <br/> <div> <router-outlet></router-outlet> </div>

In the above code, we use 2 different directives routerLink and router-outlet.

base href

Most routing applications should add an <base> element to the index.html as the first child in the <head> tag to tell the router how to compose navigation URLs.

If the app folder is the application root, as it is for the sample application, set the href value exactly as shown here.

src/index.html (base-href)

content_copy<base href="/">

routerLink

This is used to generate a router link. In our case  http://localhost:4200/Home you can pass a parameter to the route by using the following way.

a [routerLink]="['/user/bob']" [queryParams]="debug: true" fragment="education"> link to the user component </a>

If you want to preserve state in the browser you can use state variable.

<a [routerLink]="['/user/bob']" [state]="tracingId: 123"> link to the user component </a>

router-outlet

It is used to placed dynamically added content in our case it is a component that is associated with view. Each outlet can have a unique name, determined by the optional name attribute. The name cannot be set or changed dynamically. If not set, the default value is “primary”.

<router-outlet></router-outlet> <router-outlet name='left'></router-outlet> <router-outlet name='right'></router-outlet>

A router outlet emits an activate event when a new component is instantiated, and a deactivate event when a component is destroyed.

<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>

GitHub Project Link: – https://github.com/Sagar-Jaybhay/angular9

[parsaweb-blog]

آموزش طراحی سایت

این بخش شامل آموزش مرحله به مرحله آموزش طراحی وب سایت می باشد که سعی می شود هر هفته مقاله ای در این زمینه به شما عزیزان ارائه کنیم. در اولین قسمت از این سری آموزش طراحی سایت با ما باشید.

این دوره آموزش طراحی سایت بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint  می باشد.

چه کسانی باید این کتاب را بخوانند؟

این کتاب برای کسانی مفید است که از آموزش طراحی سایت اطلاعی ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود. این کتاب شما را با HTML  و CSS آشنا می کند و راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد.

Setting up Shop

این قسمت آموزش طراحی سایت در واقع آماده کردن کامپیوتر برای کار، قبل از زدن اولین طرح شماست.

قبل از این که وب سایت خودتان را بسازید، می بایست کامپیوتر خود را برای کار آماده نمایید که شامل برنامه هایی است که یا در سیستم شما موجود می باشد و یا این که می بایست آن ها را نصب نمایید.

برنامه های زیادی در بازار موجود می باشد ولی در ابتدا از برنامه های رایگان و قابل دسترس استفاده می کنیم.

وسایل و برنامه های اصلی که شما نیاز دارید:

1-     وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب سایت شما را شامل میشود.

2-     یک مرورگر (web browser) برای دیدن صفحات وب در آن.

3-     فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client.

چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را بررسی خواهیم کرد.

ابزارهای اولیه در ویندوز برای آموزش طراحی وب سایت:

1- ادیت کردن متن : برای ادیت کردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است .

برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:

START > ALL PROGRAMS > ACCESSORIES > NOTEPAD

2- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorer در دسترس است.

شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید.

3- فرستادن صفحه به محیط وب : برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.

ابزارهای دیگر آموزش طراحی سایت:

برای ادیت کردن صفحات خود می توانید از برنامه Notepad++ استفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند.

همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorer توصیه می کنم. اما  در اینجا از یکی از بهترین آنها را نام می برم : firefox

اما همه عناصر که متن نیستند شما برای ویرایش عکس هم به برنامه هایی نیاز دارید که می توانید از برنامه های زیر استفاده کنید:

Adobe photoshop

Adobe fireworks

Picasa

توصیه من استفاده از فتوشاپ است ، نگران نباشید یادگیری آ�� برای کاربرد وب آسان است.

مرحله آخر – درست کردن مکانی است برای فایل های ساخته شده :

بعد از ساختن فایل های خود مدیریت آنها بسیار مهم است و این که در کجا فایل اصلی و در کجا تصاویر قرار گیرد و به همین ترتیب تمام عناصر وب سایت.

در ��ین مرحله از آموزش طراحی سایت شما باید یک فولدر بسازید و تمام عناصر وب سایت خود را در آن قرار دهید. فرض کنید در دسکتاپ خود می خواهید یک وب سایت بسازید.

RIGHT CLICK > NEW > FOLDER

سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر و css ,html ,…..  را داخل آن قرار می دهید.

Your First Web Pages

بگذاريد دقيق شويم ! طراحي سايت ای كه شما مي بينيد به سه لايه اصلي تقسيم مي شود:

يادگيري اين سه لايه شما را به يك طراح سایت تبديل ميكند!

لايه اول لايه محتوي است كه مانند شاسي ماشين است و شامل تگهاي متفاوتي مي باشد .لايه دوم لايه نمايش است كه به عناصر HTML شكل و ظاهر مي دهد و لايه سوم لايه رفتار است كه حركت و پويايي صفحات را شامل مي شود.

چيزي كه در اين كتاب درباره ی آموزش طراحی سایت گفته می شود مربوط به 2 لايه  HTML و  CSS است.

ديدن Source برنامه:

ديدن كد برنامه مي تواند در آموزش طراحی سایت و يادگيري شما سرعت ببخشد البته بايد در انتخاب وب سايت خود دقت نماييد تا اشتباه آنها مسير يادگيري طراحی سایت توسط شما را تغيير ندهد. روش كار بدين صورت است كه ماوس را درروي صفحه جايي غير از تصاوير ببريد و كليك راست كنيد و view page source  يا view source را بزنيد.

بايد صفحه اي مانند زير در فايرفاكس ببينيد:

يا در IE

عناصر اصلي يك صفحهHTML :

یک DOCTYPE

یک<HTML> TAG

یک<HEAD>  TAG

یک<TITLE>   TAG

یک<BODY>   TAG

تو سورس پيداشون كنيد.

و حالا يك نمونه كد فقط شامل عناصري اصلي :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 STRICT//EN”

“HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD“>

<HTML XMLNS=”HTTP://WWW.W3.ORG/1999/XHTML“>

<HEAD>

<TITLE>UNTITLED DOCUMENT</TITLE>

<META HTTP-EQUIV=”CONTENT-TYPE   CONTENT=”TEXT/HTML; CHARSET=UTF-8″/>

</HEAD>

<BODY>

</BODY>

</HTML>

حالا مي خواهيم با تك تك اين عناصر آشنا شويم :

داك تايپ DocType  : Document Type Definition

اولين آيتم صفحه است بدون فاصله. اين يك قانون است.

همانطوري كه فايل word 2007 در نمايش در 2000 دچار مشكل مي شود HTML ها با داك تايپ هاي متفاوت هم نمايش متفاوت در مرورگرها خواهند داشت.

در واقع اين داك تايپ است كه به مرورگر مي گويد اين سند از چه نوعي است و بايد به چه ترتيب Render شود . نحوه رندر شدن و تفاوت هاي آنها بايد در سطح حرفه اي تري مطرح شود.

داك تايپ ها هم در طول زمان به وجود مي آيند يعني مانند word نوع هاي جديدي روي قبلي ها عرضه مي شوند مانند HTML5  كه به تازگي مطرح شده است.

براي ديدن داك تايپ هاي موجود به اين آدرس بريد http://reference.sitepoint.com/html/doctypes

<!DOCTYPE  HTML  PUBLIC “-//W3C//DTD XHTML 1.0 STRICT//EN”

“HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD“>

به کدهای داك تايپ دقت نماييد: ما در اين خط مي گوييم نوع سند چيست و آدرسي كه بايد به اين نوع سند در وب سايت كنسرسيوم جهاني وب World Wide Web Consortium یا W3C ، اشاره كند کدام است.

در حال حاضر دو نوع داكتايپ هستند كه استفاده بيشتري دارند Transitional  و  Strict

همانطوري كه گفتم فعلا دنبال تفاوت اين داك تايپ ها نباشيد به آن هم خواهيم رسيد .

تاكيد ميكنم : اولين آيتم صفحه است بدون فاصله. اين يك قانون است.

عناصر

HTML  :

قبل از اين كه عناصر HTML را شرح دهم بايد با مفهوم تگ (tag) آشناشويد. تگ يعني اسمي كه ميان اين دو <> قرار گيرد و نام تگ همان متني است كه بين اين دو <> قرار مي گيرد

تگ HTML    <HTML>

تگ HEAD   <HEAD>

تگ ها مي توانند شامل چند attribute (ویژگی) باشند:

<HTML   XMLNS=”HTTP://WWW.W3.ORG/1999/XHTML ”  DIR=”RTL” >

dir يك نام attribute است و value ، rtl (مقدار) آن است كه بين ” ” قرار گرفته است.

تگ ها به دودسته container و empty  تقسيم مي شوند.تگ هاي container شامل يك تگ بازشونده و يك تگ بسته شونده هستند به مثال بالا دقت نماييد HTML  باز شده و بسته شده است. تگهاي empty  متفاوت هستند مانند مثال زير

<IMG SRC=”IMAGES/TEST.JPG” ALT=”TEST” />

<BR/>

تگ هاي empty  را مي توان به صورت container استفاده كرد ولي در داك تايپ هاي xhtml تو��يه شده است كه تگ هاي empty را به همان شكل empty  بنويسيم.

در استفاده از تگ ها بايد بدانيد كه از چه نوعي هستند تا سند شما دچار error نشود بعنوان مثال اگر تگ div را به صورت empty  بنويسيم دچار error می شویم.

نگران نباشيد كم كم همه آنها را خواهيد آموخت . بياييد همين الان تو اينترنت عبارت روبرو را جستجو كنيم :

EMPTY TAG IN HTML

بسيار عالي شما هم اين نتايج را پيدا كرديد :

•       <BR/>

•       <HR/>

•       <META/>

•       <BASE/>

•       <LINK/>

•       <META/>

•       <IMG/>

•       <EMBED/>

•       <AREA/>

•       <INPUT/>

اين را گفتم كه هيچ وقت دنياي وب و جستجو را به ویژه هنگام طراحی سایت فراموش نكنيد.

غير از داك تايپ ها تمامي عناصر صفحه داخل تگ HTML است كه شامل 2 بخش مي شود head و  body

عنصر

HAED

اين يك تگ container  است و در بالاي سند قبل از body قرار مي گيرد و شامل اطلاعاتي در باره صفحه است مانند title, meta, css  و …..

<HEAD>

<TITLE>UNTITLED DOCUMENT</TITLE>

<META HTTP-EQUIV=”CONTENT-TYPE” CONTENT=”TEXT/HTML; CHARSET=UTF-8″/>

</HEAD>

عنصر  

title :

يك تگ container است كه متن وسط آن در عنوان Title) ) بالاي صفحه قرار ميگيرد :

موارد استفاده ديگر:

•         اين تايتل در زمان مينيمايز كردن پنجره در taskbar windows قابل مشاهده است.

•         در زمان بوكمارك كردن صفحه با اين عنوان  در ليست ما ذخيره مي شود.

•         براي معرفي آن صفحه است.

•         براي موتورهاي جستجو هم حائز اهميت مي باشد .

عنصر

meta  :

متا تگ يك تگ empty است و براي  دلايل متفاوتي استفاده مي شوند اطلاعات اضافي كه در مرورگر نمايش پيدا نمي كند . به طور مثال براي نام نويسنده ويا حق كپي رايت و يا نوع كاراكتر و ….

Css و  javascript  هم در head قرار ميگيرند كه بنا به نياز استفاده ميشوند البته براي جاوااسكريپت ميتوان يك تفاوتهايي  در طراحی های حرفه ای  قائل شد. به طور مثال سورسی که در طراحی سایت فوق استفاده شده است را مشاهده نمایید. جاوا اسکریپت در پ��یین صفحه درج شده است.

عناصر

body :

هرآنچه در body قرار مي گيرد را مي توان در خروجي ديد: تيترها، پاراگراف ها, تصاوير و …….

[promptlyspeedyandroid]

HTML Interview Questions: Crack Your Web Developer Interview

HTML (HyperText Markup Language) is the foundation of every website you see on the internet. Whether you're a fresher stepping into the tech world or an experienced developer preparing for a job switch, mastering HTML interview questions is crucial for clearing any web developer interview.

In this guide, we’ll explore the most commonly asked HTML interview questions, along with clear explanations and examples. These questions are ideal for both beginners and intermediate developers aiming to showcase their front-end knowledge.

Why HTML is Important in Web Development Interviews

HTML is the standard markup language used to create the structure of web pages. It forms the base upon which CSS and JavaScript work. Employers test HTML skills in interviews to evaluate a candidate’s understanding of webpage structure, semantic elements, accessibility, and proper coding practices.

Basic HTML Interview Questions and Answers

1. What is HTML?

Answer: HTML stands for HyperText Markup Language. It is used to structure content on the web using elements like headings, paragraphs, links, lists, and images.

2. What are HTML tags and elements?

Answer: HTML tags are the building blocks used to create HTML elements. Tags are enclosed in angle brackets, like <p> for paragraphs. An element includes the start tag, content, and end tag, e.g., <p>This is a paragraph</p>.

3. What is the difference between HTML and HTML5?

Answer:

HTML5 is the latest version of HTML.

HTML5 supports semantic elements like <article>, <section>, and <nav>.

It introduces multimedia tags like <audio> and <video>.

HTML5 supports APIs for geolocation, local storage, and canvas graphics.

4. What is a semantic HTML element?

Answer: Semantic HTML elements clearly describe their meaning to both the browser and developer. Examples include <header>, <footer>, <article>, and <aside>. These improve SEO and accessibility.

5. What is the difference between <div> and <span>?

Answer:

<div> is a block-level element used for grouping content.

<span> is an inline element used for styling small pieces of text or elements.

Intermediate HTML Interview Questions

6. How do you create a hyperlink in HTML?

Answer: Use the <a> tag with the href attribute. Example: <a href="https://example.com">Visit Example</a>

7. How can you insert an image in HTML?

Answer: Use the <img> tag with the src and alt attributes. Example: <img src="image.jpg" alt="Description of image">

8. What is the purpose of the alt attribute in images?

Answer: The alt attribute provides alternative text if the image can't load and improves accessibility for screen readers.

9. What is the use of the <meta> tag?

Answer: <meta> provides metadata about the HTML document such as character encoding, page description, keywords, and author. It is placed inside the <head> tag.

10. What are void (self-closing) elements in HTML?

Answer: Void elements do not require a closing tag. Examples include <img>, <br>, <hr>, <input>, and <meta>.

Advanced HTML Interview Questions

11. What is the difference between id and class attributes in HTML?

Answer:

id is unique and used to target one specific element.

class can be used on multiple elements for grouping and styling.

12. How do you create a form in HTML?

Answer:<form action="/submit" method="post"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="Login"> </form>

This creates a form that takes input and submits data to a server.

13. What are some new input types in HTML5?

Answer: HTML5 introduced new input types such as:

email

date

time

number

range

color These enhance validation and user experience.

14. What is the use of <iframe> in HTML?

Answer: <iframe> is used to embed another HTML page or external content (like YouTube videos) within a current webpage.

Example:<iframe src="https://example.com" width="600" height="400"></iframe>

15. How does HTML handle accessibility?

Answer: HTML supports accessibility through:

Semantic tags

alt attributes for images

ARIA (Accessible Rich Internet Applications) roles

Proper use of forms and labels

These features make content more usable for screen readers and assistive technologies.

Bonus Tips to Crack HTML Interviews

Practice Real Code: Use platforms like CodePen or JSFiddle to experiment with HTML structures.

Understand Semantic HTML: Many companies focus on code that is SEO- and accessibility-friendly.

Be Clear with Fundamentals: Interviewers often focus on basic but important questions.

Combine with CSS & JavaScript: Know how HTML works in combination with styling and scripting.

Ask Clarifying Questions: If you're given a coding task, ask questions before you begin coding.

Final Thoughts

Cracking a web developer interview starts with having a strong grip on the basics, and HTML is at the core of front-end development. This guide — “HTML Interview Questions: Crack Your Web Developer Interview” — has walked you through a range of frequently asked questions from beginner to advanced levels.

By preparing these questions and practicing real-world HTML code, you’ll be well-equipped to confidently answer your interviewer and demonstrate your understanding of webpage structure, elements, and best practices.

So, keep coding, stay curious, and crack that web developer interview!

[byteshastra]

hr Tag in HTML

The `<hr>` tag in HTML5 is used to create a horizontal line or rule between sections of content. In this tutorial, we will discuss the `<hr>` tag in HTML5, its uses, and best practices for using it effectively. Syntax The syntax for the `<hr>` tag in HTML5 is as follows: <hr> The `<hr>` tag is a self-closing tag, which means it does not require a closing tag. Attributes There are several…

[gomathi14-blog]

Hei, learn HTML with simple examples.

Give your valuable comments, feedbacks, ratings and enroll the course.

[nianeyna]

it surprised me that a screen reader wouldn't understand the horizontal rule as I thought that was the preferred web syntax for thematic breaks. I did a bit of googling on the subject and it looks like this isn't universal, since I found a bit on how to make your hr elements not be read by screen readers, lol. (so helpful!)

I'm resistant to the idea that it's better to ditch the horizontal rule altogether in favor of non-standardized individual solutions as suggested above. I believe this to be a fragile and non-optimal approach - it is, in my opinion, too reliant on the quirks of individual software. What is understandable when read by one screenreader might be ignored or mangled by another. "dash dash dash" is a pretty decent audio cue for a scene break! but I'm... not sure that you can necessarily guarantee that that's what the screen reader is going to say when it encounters "---" in the text. I admit I haven't tested this or done more than a small amount of research into it, but from my understanding there's a distinct possibility that some software might parse that as punctuation (since it is) and ignore it. Then you're back where you started with the horizontal rule issue, except now you're not using semantic html either.

I do have a suggestion - it's a little more work than just typing in dashes but it should to the best of my knowledge work with the majority of modern screen readers, while keeping the nice semantic horizontal rule. Here it is:

Use the rich text editor (or whatever method) to insert horizontal rules as described above

Switch to the html editor and copy the entire text of the fic

Paste that into a text editor (NOT a word processor. I like VS Code, though you could probably just use Notepad as well)

Use find-replace to replace all instances of <hr /> with <hr aria-label="dash dash dash" />

Do a little quality-control check to make sure you got all the scene breaks

Copy-paste the edited html back into the html editor and post!

The reason this is so much more likely to work is that the "aria-label" html attribute is designed specifically to work with assistive technology in exactly this sort of situation, so you're working with the accessibility software instead of around it. It also lets you have a lot more freedom in choosing the audio cue you want to use without sacrificing the visual presentation, which is a nice bonus!

(quick disclaimer: I haven't done any testing for this specific use case - I recommend looking up aria-label if you want to verify for yourself that this is a correct usage)

ETA: thanks to @luckywatersao3 I now know that this doesn't work due to the fact that ao3 will automatically remove the aria-label tag. Super sorry for the misinformation!

@ao3commentoftheday @fixomnia-scribble

use a horizontal rule instead of special characters if you’d like your fic to work for people who use screen readers

[html-tutorial]

HTML Elements

Introduction

We have already discussed HTML and its importance in our previous blog. In today’s article, you will get to know about what HTML Elements are and their types which helps in the development of eye-catchy and business-oriented websites. So, let’s get started. Anything from the start tag to the end tag is considered an HTML element. Attributes to the elements can also be added. However, it is optional.

<tagname attribute=”rule”>Contents here….</tagname>

Example

<div> <title=”div element” style=”color: green;” >Block Element</div>

Empty HTML Elements

Empty elements are HTML elements that have no content i.e., we cannot write <hr> some content </hr> or <br> some content </br>

Nesting HTML Elements

Most HTML elements (except empty elements) can contain any number of additional elements, which are made up of tags, attributes, content and much more.

Check out this html tutorial blog and run examples by yourself…

[holyscream]

A DISCLAIMER OF SORTS:

I'm not someone who posts publicly very much but I do enjoy creating (private) posts on here. More importantly, I’m not sure I’m exactly bobaboard’s target demographic—following mostly because I think it's a great project—but I hope my rambling can be useful in some way despite that, even just as an example of what your users might not need or want.

I’ll be talking mainly about the new NPF editor, as I've been using it for a while now and have liked it so much that I have gone out of my way to brainstorm ideas for posts just so I could use it again.

What I love

What I think the NPF post editor does very well is allow users to combine content blocks in whichever order they want. It’s much more fun to post things when you have control over how they look. I have also found it very rewarding to create themes for it and see the blocks working in different constellations. On a more meta level I also like the public github repo and the discussions on open issues there.

I also enjoy the way different paragraph types each have a theme or use; I think it's a good compromise between still allowing themes to be unique while giving the dashboard a bit more uniformity. Also copied text from another post getting automatically pasted as a blockquote block.

I like that the formatting options for the trail or children of a post are not more limited than those of the parent post.

What I hate

I think the image limit should be around 20, rather than 10.

I dislike that posting audio is tied to streaming.

While I like the idea different paragraph types, I miss the HTML editor very much, especially the free color choices.

The <pre> html tag being merged with the “chat” post type into one “monospace” block, when it’s not guaranteed that chat blocks will be monospaced on every theme (besides the fact that code and dialogue are very different things).

I wish they didn’t mash headings and large text sizes together (iirc the block types are named “heading1” and “heading2” in the json respectively), and allowed more nesting (h1 to h6)

I wound like the ability to nest things again; “large” or “chat” or “quote” blocks inside “blockquote” blocks and nested lists!

I miss <hr> lines. With how few images one can use per post it sucks to have to waste them on spacing paragraphs

One feature they can take away over my dead body

The HTML editor, which they have already done. RIP me.

Image hosting and the flexible image grid.

One Three issues I'd "literally" pay them to fix

Wonkyness in NPF rendering, but that is an NPF-specific issue (and it's still in beta anyways). I guess in general I want the documentation of the site’s code to be up-to-date and explain how it wants me to render things; such as best practices for what html tag to use for each block type.

Right now adding alt text to images is very annoying and easy to forget, especially on the website, because it deletes it on every edit (the app doesn't).

Tags aren't editable and as someone that regulary hits the character limit on tags this is very frustrating. Also tags auto-breaking on ".

One Two features I'd "literally" pay them to add

Another text color option with a color wheel for unlimited custom colors (and less garish ones especially)

The ability to add ARIA-labels or role attributes to elements

My favorite text editors and what I like about them

I don't have a specific favorite, but

I will love any editor that supports many HTML tags.

The option to use grids/flexbox-type blocks is one of my favorite things about the Tumblr editor.

I am always happy to see an HTML preview option that doesn't open in a new page or allows switching between HTML and Rich Text editors without losing formatting.

Some editors let you swap images without deleting the image element, so alt text and formatting stays consistent. I think the editor on EA's help forums does that. (Never would have thought I'd use that one as a positive example lol)

HTML > Rich Text > Markdown always

When it comes to Markdown I really prefer the editor to come with a cheat sheet, because I personally always mix them up.

AO3's incredibly bare-bones editor still tells me which HTML tags it supports, and I love it for that.

So yeah. Hope this was useful in some way at least.

Sorry for the length. orz

Tumblr Post Editor

Soliciting thoughts. As usual, feel free to mix and match and even rant.

What do you love?

What do you hate?

What's one feature they can take away over your dead body?

What's one issue you'd ""literally"" pay them to fix? (not just code bugs, features that are frustrating to use also count)

What's one feature you'd ""literally"" pay then to add?

Which service has your favorite text editor? What do you like about it? (Alternatively: just tell me about other text editors you use)